Skip to content

E
ETL-admin
Commit 6ccf3f6a by 莫晓莉
Options

头部模板

parent b1223e4c
Showing with 344 additions and 24 deletions
src/assets/icons/svg/correct.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611653557514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 955.733A443.733 443.733 0 1 1 955.733 512 443.733 443.733 0 0 1 512 955.733z" p-id="20528" fill="#ffffff"></path><path d="M753.323 318.805L439.637 632.491l-168.96-168.619A34.133 34.133 0 1 0 222.208 512l193.195 193.195a34.133 34.133 0 0 0 48.128 0l337.92-337.92a34.133 34.133 0 1 0-48.128-48.128z" p-id="20529" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/icons/svg/double.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611650008649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16708" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1008 335.2 1008 335.2l-160 144 0 0c-8.8 8-20 12.8-32 12.8-26.4 0-48-21.6-48-48 0-14.4 6.4-26.4 16-35.2l0 0 67.2-60L560 348.8c0 0 0 0 0 0L464 348.8l0 0L352 348.8 48 348.8c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l124.8 0 0 0L416 252.8l0 0 208 0 0 0 227.2 0L784 192l0 0c-9.6-8.8-16-21.6-16-35.2 0-26.4 21.6-48 48-48 12 0 23.2 4.8 32 12.8l0 0 160 144 0 0c9.6 8.8 16 21.6 16 35.2C1024 314.4 1017.6 326.4 1008 335.2zM16 680.8 16 680.8l160-144 0 0c8.8-8 20-12.8 32-12.8 26.4 0 48 21.6 48 48 0 14.4-6.4 26.4-16 35.2l0 0-67.2 60L400 667.2l0 0 208 0 0 0 243.2 0 0 0L976 667.2c26.4 0 48 21.6 48 48 0 26.4-21.6 48-48 48L672 763.2 560 763.2c0 0 0 0 0 0L464 763.2l0 0L172.8 763.2 240 824l0 0c9.6 8.8 16 21.6 16 35.2 0 26.4-21.6 48-48 48-12 0-23.2-4.8-32-12.8l0 0L16 752l0 0c-9.6-8.8-16-21.6-16-35.2C0 701.6 6.4 689.6 16 680.8z" p-id="16709" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/icons/svg/set.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611650145286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20151" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M540.444444 364.088889l0-68.266667-88.029867-19.5584c-3.003733-9.386667-6.826667-18.386489-11.286756-27.022222l48.469333-76.174222-48.275911-48.275911-76.174222 48.469333c-8.635733-4.460089-17.635556-8.283022-27.022222-11.286756L318.577778 73.955556l-68.266667 0-19.5584 88.029867c-9.386667 3.003733-18.386489 6.826667-27.022222 11.286756l-76.174222-48.469333-48.275911 48.275911 48.469333 76.174222c-4.460089 8.635733-8.283022 17.635556-11.286756 27.022222L28.444444 295.822222l0 68.266667 88.029867 19.5584c3.003733 9.386667 6.826667 18.386489 11.286756 27.022222l-48.469333 76.174222 48.275911 48.275911 76.174222-48.469333c8.635733 4.460089 17.635556 8.283022 27.022222 11.286756L250.311111 585.955556l68.266667 0 19.5584-88.029867c9.386667-3.003733 18.386489-6.826667 27.022222-11.286756l76.174222 48.469333 48.275911-48.275911-48.469333-76.174222c4.460089-8.635733 8.283022-17.635556 11.286756-27.022222L540.444444 364.088889zM284.444444 415.288889c-47.126756 0-85.333333-38.206578-85.333333-85.333333s38.206578-85.333333 85.333333-85.333333 85.333333 38.206578 85.333333 85.333333S331.5712 415.288889 284.444444 415.288889zM650.490311 860.182756l21.515378-52.542578-61.599289-42.8032c0.648533-8.169244 0.534756-16.304356-0.170667-24.348444l61.314844-43.360711-21.947733-52.371911-73.910044 13.312c-5.245156-6.144-10.9568-11.935289-17.237333-17.2032l12.686222-73.921422-52.542578-21.515378-42.8032 61.599289c-8.169244-0.648533-16.304356-0.534756-24.348444 0.170667l-43.360711-61.314844-52.371911 21.947733 13.312 73.910044c-6.144 5.245156-11.935289 10.9568-17.2032 17.237333l-73.921422-12.686222-21.515378 52.542578 61.599289 42.8032c-0.648533 8.169244-0.534756 16.304356 0.170667 24.348444l-61.314844 43.360711 21.947733 52.371911 73.910044-13.312c5.245156 6.144 10.9568 11.935289 17.237333 17.2032l-12.686222 73.921422 52.542578 21.515378 42.8032-61.599289c8.169244 0.648533 16.304356 0.534756 24.348444-0.170667l43.360711 61.314844 52.371911-21.947733-13.312-73.910044c6.144-5.233778 11.935289-10.9568 17.2032-17.237333L650.490311 860.182756zM437.293511 818.915556c-36.272356-14.848-53.646222-56.297244-38.798222-92.580978s56.297244-53.646222 92.580978-38.798222c36.272356 14.848 53.646222 56.297244 38.798222 92.580978C515.026489 816.401067 473.577244 833.774933 437.293511 818.915556zM988.603733 316.199822l-18.102044-55.819378-77.175467 7.350044c-4.937956-6.883556-10.467556-13.220978-16.395378-19.103289l19.433244-75.138844-52.280889-26.669511-49.436444 59.835733c-8.237511-1.353956-16.611556-2.104889-25.088-2.059378l-39.344356-66.798933-55.819378 18.102044 7.350044 77.175467c-6.883556 4.937956-13.220978 10.467556-19.103289 16.395378l-75.138844-19.433244-26.669511 52.280889 59.835733 49.436444c-1.353956 8.237511-2.104889 16.611556-2.059378 25.088L551.822222 396.174222l18.102044 55.819378 77.175467-7.350044c4.937956 6.883556 10.456178 13.220978 16.395378 19.103289l-19.433244 75.138844 52.280889 26.669511 49.436444-59.835733c8.237511 1.353956 16.611556 2.104889 25.088 2.059378l39.344356 66.798933 55.819378-18.102044-7.350044-77.175467c6.883556-4.937956 13.220978-10.467556 19.103289-16.395378l75.138844 19.433244 26.669511-52.280889-59.835733-49.436444c1.353956-8.237511 2.104889-16.611556 2.059378-25.088L988.603733 316.199822zM792.849067 425.961244c-38.536533 12.504178-79.917511-8.612978-92.410311-47.149511-12.504178-38.536533 8.612978-79.917511 47.149511-92.410311 38.536533-12.504178 79.917511 8.612978 92.410311 47.149511S831.3856 413.468444 792.849067 425.961244z" p-id="20152" fill="#ffffff"></path></svg>
\ No newline at end of file
src/assets/icons/svg/wrong.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611653636616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21350" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M524.552258 848.929032c184.32 0 333.625806-149.966452 333.625807-333.625806s-149.966452-333.625806-333.625807-333.625807c-184.32 0-333.625806 149.966452-333.625806 333.625807s149.305806 333.625806 333.625806 333.625806m0 48.227097c-210.745806 0-381.852903-171.107097-381.852903-381.852903s171.107097-381.852903 381.852903-381.852903 381.192258 171.107097 381.192258 381.852903-170.446452 381.852903-381.192258 381.852903z" p-id="21351" fill="#ffffff"></path><path d="M377.889032 412.242581c-9.249032-9.249032-9.249032-24.443871 0-33.692904 9.249032-9.249032 24.443871-9.249032 33.692903 0l251.705807 251.705807c9.249032 9.249032 9.249032 24.443871 0 33.692903-9.249032 9.249032-24.443871 9.249032-33.692903 0L377.889032 412.242581" p-id="21352" fill="#ffffff"></path><path d="M636.20129 377.228387c9.249032-9.249032 24.443871-9.249032 33.692904 0 9.249032 9.249032 9.249032 24.443871 0 33.692903l-251.705807 251.705807c-9.249032 9.249032-24.443871 9.249032-33.692903 0-9.249032-9.249032-9.249032-24.443871 0-33.692903l251.705806-251.705807" p-id="21353" fill="#ffffff"></path></svg>
\ No newline at end of file
src/views/dashboard/PanelGroup.vue
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <!-- <svg-icon icon-class="all" class-name="card-panel-icon" /> -->
<svg-icon :icon-class="all" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')"> <div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" /> <svg-icon icon-class="set" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')"> <div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" /> <svg-icon icon-class="double" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
...@@ -56,6 +57,12 @@ export default { ...@@ -56,6 +57,12 @@ export default {
tableData: [], tableData: [],
}; };
}, },
props:{
all: {
type: String,
default: 'all'
}
},
created() { created() {
this.getTotalStatsFun(); this.getTotalStatsFun();
......
src/views/dashboard/PanelGroupEtl.vue 0 → 100644
<template>
<el-row :gutter="40" class="panel-group">
<el-col v-for="(item,index) in panelArr" :key="index" :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" :style="{'background':item.bgColor}">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon :icon-class="item.leftIcon" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
{{item.panelName}}
</div>
<count-to :start-val="0" :end-val="item.num" :duration="2600" class="card-panel-num" />
</div>
</div>
</el-col>
<!-- <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" :style="{'background':tableObj.bgcolorSecond}">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon :icon-class="tableObj.iconSeocnd" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
监控作业数
</div>
<count-to :start-val="0" :end-val="this.tableData.totalArticle" :duration="3000" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
<div class="card-panel" :style="{'background':tableObj.bgcolorThird}">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon :icon-class="tableObj.iconThird" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
监控转换数
</div>
<count-to :start-val="0" :end-val="this.tableData.totalIncome" :duration="3200" class="card-panel-num" />
</div>
</div>
</el-col> -->
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
import {getTotalStats} from "@/api/Statistics";
export default {
components: {
CountTo
},
data() {
return {
// tableData: [],
};
},
props:{
all: {
type: String,
default: 'all'
},
backgroundColor: {
type: String,
default: '#f8ac59'
},
panelArr:{
type: Array,
default:[
{
leftIcon:'all',
bgColor:'',
panelName:'总监控任务数',
num:0,
},
{
leftIcon:'all',
bgColor:'',
panelName:'监控作业数',
num:0,
},
{
leftIcon:'all',
bgColor:'',
panelName:'监控转换数',
num:0,
},
]
}
// #1ab394
// #f8ac59
},
created() {
// this.getTotalStatsFun();
},
methods: {
// 总数统计
// getTotalStatsFun(){
// getTotalStats({}).then(res=>{
// this.tableData = res.data
// console.log(res);
// })
// },
// handleSetLineChartData(type) {
// this.$emit('handleSetLineChartData', type)
// console.log(type);
// }
}
}
</script>
<style lang="scss" scoped>
.panel-group {
margin-top: 18px;
// .card-panel-col {
// margin-bottom: 32px;
// }
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #ffffff;
// background: #fff;
background-color: #1ab394;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
border-radius: 5px;
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
text-align: right !important;
.card-panel-text {
line-height: 18px;
color: #ffffff;
font-size: 20px;
margin-bottom: 12px;
font-weight:normal !important;
}
.card-panel-num {
font-size: 30px;
font-weight: 600;
}
}
}
}
@media (max-width:550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>
src/views/home.vue
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<!-- <panelGroupETL /> --> <panelGroupEtl :panelArr="panelArr"/>
<el-row :gutter="20"> <!-- <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<i class="el-icon-s-tools grid-icon"></i> <i class="el-icon-s-tools grid-icon"></i>
<div class="num-content"> <div class="num-content">
<div class="num-title">总监控任务数</div> <div class="num-title">总监控任务数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allRunningMonitorNum}} -->
<count-to :start-val="0" :end-val="allRunningMonitorNum" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="allRunningMonitorNum" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -22,7 +21,6 @@ ...@@ -22,7 +21,6 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">监控作业数</div> <div class="num-title">监控作业数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allRunningJobNum}} -->
<count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -34,13 +32,12 @@ ...@@ -34,13 +32,12 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">监控转换数</div> <div class="num-title">监控转换数</div>
<span class="show-num"> <span class="show-num">
<!-- {{alRunningTransNum}} -->
<count-to :start-val="0" :end-val="alRunningTransNum" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="alRunningTransNum" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row> -->
...@@ -157,7 +154,7 @@ ...@@ -157,7 +154,7 @@
import GithubCorner from "@/components/GithubCorner"; import GithubCorner from "@/components/GithubCorner";
import PanelGroup from "./dashboard/PanelGroup"; import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart"; import LineChart from "./dashboard/LineChart";
// import panelGroupETL from "./dashboard/panelGroupETL"; import panelGroupEtl from "./dashboard/PanelGroupEtl";
// import RadarChart from "@/components/Echarts/RadarChart"; // import RadarChart from "@/components/Echarts/RadarChart";
// import PieChart from "@/components/Echarts/PieChart"; // import PieChart from "@/components/Echarts/PieChart";
// import BarChart from "@/components/Echarts/BarChart"; // import BarChart from "@/components/Echarts/BarChart";
...@@ -182,7 +179,7 @@ export default { ...@@ -182,7 +179,7 @@ export default {
GithubCorner, GithubCorner,
PanelGroup, PanelGroup,
LineChart, LineChart,
// panelGroupETL panelGroupEtl,
CountTo CountTo
}, },
...@@ -214,6 +211,26 @@ export default { ...@@ -214,6 +211,26 @@ export default {
kettleLineData:{},//获取7天内作业和转换的折线图 kettleLineData:{},//获取7天内作业和转换的折线图
jobLoading:true, jobLoading:true,
transLoading:true, transLoading:true,
panelArr:[
{
leftIcon:'all',
bgColor:'#1ab394',
panelName:'总监控任务数',
num:0,
},
{
leftIcon:'set',
bgColor:'#1ab394',
panelName:'监控作业数',
num:0,
},
{
leftIcon:'double',
bgColor:'#1ab394',
panelName:'监控转换数',
num:0,
},
],//头部模板数据统计
}; };
}, },
...@@ -261,6 +278,7 @@ export default { ...@@ -261,6 +278,7 @@ export default {
console.log('获取被监控中的总数',res); console.log('获取被监控中的总数',res);
if(res.success){ if(res.success){
this.allRunningMonitorNum = res.data; this.allRunningMonitorNum = res.data;
this.panelArr[0].num=this.allRunningMonitorNum;//
} }
}); });
}, },
...@@ -270,6 +288,7 @@ export default { ...@@ -270,6 +288,7 @@ export default {
console.log('获取所有的监控作业数',res); console.log('获取所有的监控作业数',res);
if(res.success){ if(res.success){
this.allRunningJobNum = res.data; this.allRunningJobNum = res.data;
this.panelArr[1].num=this.allRunningJobNum;//
} }
}); });
...@@ -280,6 +299,7 @@ export default { ...@@ -280,6 +299,7 @@ export default {
console.log('获取所有的监控转换数',res); console.log('获取所有的监控转换数',res);
if(res.success){ if(res.success){
this.alRunningTransNum = res.data; this.alRunningTransNum = res.data;
this.panelArr[2].num=this.alRunningTransNum;//
} }
}); });
......
src/views/watch/homework.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <panelGroupEtl :panelArr="panelArr"/>
<!-- <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<i class="el-icon-setting grid-icon"></i> <i class="el-icon-setting grid-icon"></i>
<div class="num-content"> <div class="num-content">
<div class="num-title">总作业任务数</div> <div class="num-title">总作业任务数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allRunningJobNum}} -->
<count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="allRunningJobNum" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">总成功次数</div> <div class="num-title">总成功次数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allSuccessCount}} -->
<count-to :start-val="0" :end-val="allSuccessCount" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="allSuccessCount" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -31,13 +30,12 @@ ...@@ -31,13 +30,12 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">总失败次数</div> <div class="num-title">总失败次数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allFailCount}} -->
<count-to :start-val="0" :end-val="allFailCount" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="allFailCount" :duration="3000" class="card-panel-num" />
</span> </span>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row> -->
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
...@@ -222,8 +220,9 @@ import { getToken } from "@/utils/auth"; ...@@ -222,8 +220,9 @@ import { getToken } from "@/utils/auth";
import { import {
getAllMonitorJob,//获取所有的监控作业数 getAllMonitorJob,//获取所有的监控作业数
} from "@/api/Statistics"; } from "@/api/Statistics";
import panelGroupEtl from "../dashboard/PanelGroupEtl";
import CountTo from 'vue-count-to' // import CountTo from 'vue-count-to'
export default { export default {
// filters: { // filters: {
...@@ -243,7 +242,8 @@ export default { ...@@ -243,7 +242,8 @@ export default {
// } // }
// }, // },
components: { components: {
CountTo // CountTo,
panelGroupEtl
}, },
data() { data() {
return { return {
...@@ -281,6 +281,26 @@ export default { ...@@ -281,6 +281,26 @@ export default {
jobStatusList:['','成功', '失败'], jobStatusList:['','成功', '失败'],
simpleList:[],//搜索下拉框我添加的作业列表 simpleList:[],//搜索下拉框我添加的作业列表
logContent:'',//日志内容 logContent:'',//日志内容
panelArr:[
{
leftIcon:'all',
bgColor:'#1ab394',
panelName:'总作业任务数',
num:0,
},
{
leftIcon:'correct',
bgColor:'#1ab394',
panelName:'总成功次数',
num:0,
},
{
leftIcon:'wrong',
bgColor:'#f8ac59',
panelName:'总失败次数',
num:0,
},
],//头部模板数据统计
}; };
}, },
created() { created() {
...@@ -319,6 +339,7 @@ export default { ...@@ -319,6 +339,7 @@ export default {
console.log('获取列表',res); console.log('获取列表',res);
if(res.success){ if(res.success){
this.allSuccessCount = res.data; this.allSuccessCount = res.data;
this.panelArr[1].num=this.allSuccessCount;
} }
}); });
...@@ -329,6 +350,7 @@ export default { ...@@ -329,6 +350,7 @@ export default {
console.log('获取列表',res); console.log('获取列表',res);
if(res.success){ if(res.success){
this.allFailCount = res.data; this.allFailCount = res.data;
this.panelArr[2].num=this.allFailCount;
} }
}); });
...@@ -339,6 +361,7 @@ export default { ...@@ -339,6 +361,7 @@ export default {
console.log('获取所有的监控作业数',res); console.log('获取所有的监控作业数',res);
if(res.success){ if(res.success){
this.allRunningJobNum = res.data; this.allRunningJobNum = res.data;
this.panelArr[0].num=this.allRunningJobNum;
} }
}); });
...@@ -698,4 +721,7 @@ export default { ...@@ -698,4 +721,7 @@ export default {
background: #ffffff !important; background: #ffffff !important;
height: 400px !important; height: 400px !important;
} }
.el-row {
margin-bottom: 20px;
}
</style> </style>
src/views/watch/transform.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <panelGroupEtl :panelArr="panelArr"/>
<!-- <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
<i class="el-icon-refresh grid-icon"></i> <i class="el-icon-refresh grid-icon"></i>
<div class="num-content"> <div class="num-content">
<div class="num-title">总转换任务数</div> <div class="num-title">总转换任务数</div>
<span class="show-num"> <span class="show-num">
<!-- {{alRunningTransNum}} -->
<count-to :start-val="0" :end-val="alRunningTransNum" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="alRunningTransNum" :duration="3200" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">总成功次数</div> <div class="num-title">总成功次数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allSuccessCount}} -->
<count-to :start-val="0" :end-val="allSuccessCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="allSuccessCount" :duration="3200" class="card-panel-num" />
</span> </span>
</div> </div>
...@@ -31,13 +30,12 @@ ...@@ -31,13 +30,12 @@
<div class="num-content"> <div class="num-content">
<div class="num-title">总失败次数</div> <div class="num-title">总失败次数</div>
<span class="show-num"> <span class="show-num">
<!-- {{allFailCount}} -->
<count-to :start-val="0" :end-val="allFailCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="allFailCount" :duration="3200" class="card-panel-num" />
</span> </span>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row> -->
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
...@@ -219,6 +217,7 @@ import CountTo from 'vue-count-to' ...@@ -219,6 +217,7 @@ import CountTo from 'vue-count-to'
import { import {
getAllMonitorTrans,//获取所有的监控作业数 getAllMonitorTrans,//获取所有的监控作业数
} from "@/api/Statistics"; } from "@/api/Statistics";
import panelGroupEtl from "../dashboard/PanelGroupEtl";
export default { export default {
// filters: { // filters: {
...@@ -239,7 +238,8 @@ export default { ...@@ -239,7 +238,8 @@ export default {
// }, // },
components: { components: {
CountTo // CountTo
panelGroupEtl
}, },
data() { data() {
...@@ -286,6 +286,26 @@ export default { ...@@ -286,6 +286,26 @@ export default {
transId:0 transId:0
}, },
simpleList:[],//搜索下拉框我添加的作业列表 simpleList:[],//搜索下拉框我添加的作业列表
panelArr:[
{
leftIcon:'all',
bgColor:'#1ab394',
panelName:'总作业任务数',
num:0,
},
{
leftIcon:'correct',
bgColor:'#1ab394',
panelName:'总成功次数',
num:0,
},
{
leftIcon:'wrong',
bgColor:'#f8ac59',
panelName:'总失败次数',
num:0,
},
],//头部模板数据统计
}; };
...@@ -350,6 +370,7 @@ export default { ...@@ -350,6 +370,7 @@ export default {
console.log('获取所有的监控转换数',res); console.log('获取所有的监控转换数',res);
if(res.success){ if(res.success){
this.alRunningTransNum = res.data; this.alRunningTransNum = res.data;
this.panelArr[0].num=this.alRunningTransNum;
} }
}); });
...@@ -361,6 +382,7 @@ export default { ...@@ -361,6 +382,7 @@ export default {
console.log('获取成功总数',res); console.log('获取成功总数',res);
if(res.success){ if(res.success){
this.allSuccessCount = res.data; this.allSuccessCount = res.data;
this.panelArr[1].num=this.allSuccessCount;
} }
}); });
...@@ -371,6 +393,7 @@ export default { ...@@ -371,6 +393,7 @@ export default {
console.log('获取失败总数',res); console.log('获取失败总数',res);
if(res.success){ if(res.success){
this.allFailCount = res.data; this.allFailCount = res.data;
this.panelArr[2].num=this.allFailCount;
} }
}); });
...@@ -639,5 +662,8 @@ export default { ...@@ -639,5 +662,8 @@ export default {
background: #ffffff !important; background: #ffffff !important;
height: 400px !important; height: 400px !important;
} }
.el-row {
margin-bottom: 20px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment