monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit 4d7c74c9d9e08c97ba8f62a89f735c080838507d 1 parent eba36693

快照概览页面开发

Inline Side-by-side
Showing 6 changed files with 402 additions and 0 deletions
  1 +<title>快照概览</title>
  2 +<iframe src="/vue3/index.html#/vue3/snapshotOverview" frameborder="0" class="layadmin-iframe" style="height: 99.5%!important;"/>
@@ -161,6 +161,12 @@ const routes = [{ @@ -161,6 +161,12 @@ const routes = [{
161 name: 'snapshotHistory', 161 name: 'snapshotHistory',
162 component: () => myImport('views/snapshot/history/index') 162 component: () => myImport('views/snapshot/history/index')
163 }, 163 },
  164 + //快照概览
  165 + {
  166 + path: '/vue3/snapshotOverview',
  167 + name: 'snapshotOverview',
  168 + component: () => myImport('views/snapshotOverview/index')
  169 + },
164 ]; 170 ];
165 171
166 // hash模式： createWebHashHistory 172 // hash模式： createWebHashHistory
@@ -138,6 +138,9 @@ export default { @@ -138,6 +138,9 @@ export default {
138 top:"14%", 138 top:"14%",
139 bottom:"8%" 139 bottom:"8%"
140 }, 140 },
  141 + tooltip: {
  142 + trigger: 'item'
  143 + },
141 color:"#60a0f7", 144 color:"#60a0f7",
142 xAxis: { 145 xAxis: {
143 type: 'category', 146 type: 'category',
@@ -176,6 +179,9 @@ export default { @@ -176,6 +179,9 @@ export default {
176 top:"14%", 179 top:"14%",
177 bottom:"8%" 180 bottom:"8%"
178 }, 181 },
  182 + tooltip: {
  183 + trigger: 'item'
  184 + },
179 color:"#60a0f7", 185 color:"#60a0f7",
180 xAxis: { 186 xAxis: {
181 type: 'category', 187 type: 'category',
@@ -214,6 +220,9 @@ export default { @@ -214,6 +220,9 @@ export default {
214 top:"14%", 220 top:"14%",
215 bottom:"8%" 221 bottom:"8%"
216 }, 222 },
  223 + tooltip: {
  224 + trigger: 'item'
  225 + },
217 color:"#60a0f7", 226 color:"#60a0f7",
218 xAxis: { 227 xAxis: {
219 type: 'category', 228 type: 'category',
  1 +<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
  2 + <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
  3 + <div class="search">
  4 + <div class="condition esData-conditon" style="justify-content: end;width: 100%;">
  5 + <el-button-group>
  6 + <el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>
  7 + <el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>
  8 + <el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>
  9 + <el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>
  10 + <el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button>
  11 + </el-button-group>
  12 + </div>
  13 + </div>
  14 +
  15 + <el-row :gutter="20" style="padding: 3px 10px;">
  16 + <el-col :span="12">
  17 + <h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3>
  18 + <div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
  19 + </el-col>
  20 + <el-col :span="12">
  21 + <h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3>
  22 + <div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
  23 + </el-col>
  24 + <el-col :span="12">
  25 + <h3 style="text-align: left;color:#2b9eef;">人员快照量</h3>
  26 + <div ref="peopleSSChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
  27 + </el-col>
  28 + <el-col :span="12">
  29 + <h3 style="text-align: left;color:#2b9eef;">快照量</h3>
  30 + <div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
  31 + </el-col>
  32 + </el-row>
  33 +
  34 +
  35 + <div class="search-table">
  36 + <h3 style="text-align: left;color:#2b9eef;">快照信息</h3>
  37 + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
  38 + :height="height - 110"
  39 + :loading="false"
  40 + :pageSize="search.pageSize"
  41 + :showBorder="true"
  42 + :showIndex="true"
  43 + :showPage="true"
  44 + :showSelection="false"
  45 + :showTools="true"
  46 + :total="tableData.count"
  47 + @loaddata="loaddata">
  48 + <template #tools="{scope}">
  49 + <div class="list-handle">
  50 + <span class="icon-bg" style="color: #69a1f6">
  51 + <i class="el-icon-document"></i>
  52 + </span>
  53 + <span class="icon-bg" style="color:#dd3532">
  54 + <i class="el-icon-delete"></i>
  55 + </span>
  56 + </div>
  57 + </template>
  58 + </cm-table-page>
  59 + </div>
  60 + </div>
  61 +</div>
  1 +export default {
  2 + name:"snapshotOverview",
  3 + template:"",
  4 + setup(props,{attrs,slots,emit}){
  5 + const {proxy} = Vue.getCurrentInstance();
  6 + let height = Vue.ref(window.innerHeight);
  7 + let btnGroupType = Vue.ref(0);
  8 + let search = Vue.ref({
  9 + program: '',
  10 + sortBy: 'dbTime',
  11 + scopeBy: 'dbTimeStr.keyword',
  12 + keyword: '',
  13 + type: 'syslog',
  14 + pageNum: 1,
  15 + pageSize: 10,
  16 + dateTime: [],
  17 + resType: '',
  18 + });
  19 + //表格字段
  20 + let tableData = Vue.ref({
  21 + count: 0,
  22 + dataList: [
  23 + {
  24 + logDate:"PC服务器",
  25 + resName:"稽核服务器jhxc1",
  26 + resTypeName:"95.16.16.93",
  27 + host:"陈婷婷",
  28 + type:"",
  29 + program:"高鹏",
  30 + message:"刘文",
  31 + }, {
  32 + logDate:"",
  33 + resName:"",
  34 + resTypeName:"",
  35 + host:"",
  36 + type:"",
  37 + program:"",
  38 + message:"",
  39 + },{
  40 + logDate:"",
  41 + resName:"",
  42 + resTypeName:"",
  43 + host:"",
  44 + type:"",
  45 + program:"",
  46 + message:"",
  47 + },
  48 + ],
  49 + columns: [
  50 + {
  51 + prop: 'logDate',
  52 + label: '资源类型',
  53 + sortable: true,
  54 + align: 'center',
  55 + width: '250',
  56 + },
  57 + {
  58 + prop: 'resName',
  59 + label: '资源名称',
  60 + sortable: true,
  61 + align: 'center',
  62 + width: '250'
  63 + },
  64 + {
  65 + prop: 'resTypeName',
  66 + label: 'IP地址',
  67 + sortable: true,
  68 + align: 'center',
  69 + width: '200'
  70 + }, {
  71 + prop: 'host',
  72 + label: '负责人',
  73 + sortable: true,
  74 + align: 'center',
  75 + width: '200'
  76 + }, {
  77 + prop: 'type',
  78 + label: '所属业务系统',
  79 + sortable: true,
  80 + align: 'center',
  81 + width: '200'
  82 + },
  83 + {
  84 + prop: 'program',
  85 + label: '业务系统负责人',
  86 + sortable: true,
  87 + align: 'center',
  88 + width: '200'
  89 + },
  90 + {
  91 + prop: 'message',
  92 + label: '快照负责人',
  93 + sortable: true,
  94 + align: 'center',
  95 + width: '200'
  96 + },
  97 + {
  98 + prop: 'message',
  99 + label: '快照创建时间',
  100 + sortable: true,
  101 + align: 'center',
  102 + width: '200'
  103 + },
  104 + ]
  105 + })
  106 +
  107 + let loaddata = ({page, limit}) => {
  108 + search.value.pageNum = page;
  109 + search.value.pageSize = limit;
  110 + getDataList();
  111 + }
  112 + // 获取列表
  113 + let getDataList = () => {
  114 +
  115 + };
  116 +
  117 + // 按钮组点击事件
  118 + let handleBtnGroup = (val)=>{
  119 + btnGroupType.value = val;
  120 + };
  121 +
  122 + // echarts
  123 + let bizChartsRefs = Vue.ref(null);
  124 + let devChartsRefs = Vue.ref(null);
  125 + let snapshotChartsRefs = Vue.ref(null);
  126 + let peopleSSChartsRefs = Vue.ref(null);
  127 + let getEcharts = ()=>{
  128 + let bizCharts = echarts.init(bizChartsRefs.value);
  129 + let bizOption = {
  130 + grid:{
  131 + top:"14%",
  132 + bottom:"8%"
  133 + },
  134 + tooltip: {
  135 + trigger: 'item'
  136 + },
  137 + color:"#60a0f7",
  138 + xAxis: {
  139 + type: 'category',
  140 + data: ['PC服务器', '虚拟化', '共享存储', '路由器', '数据库'],
  141 + axisTick:false,
  142 + },
  143 + yAxis: {
  144 + type: 'value',
  145 + axisLine:{
  146 + show:true,
  147 + },
  148 + //分隔线样式
  149 + splitLine:{
  150 + show:true,
  151 + lineStyle:{
  152 + type:'dashed'
  153 + }
  154 + }
  155 + },
  156 + series: [
  157 + {
  158 + data: [120, 200, 150, 80, 70,],
  159 + type: 'bar',
  160 + barWidth: 26,//设置柱状图大小
  161 + itemStyle:{
  162 + borderRadius:[20,20,0,0]
  163 + }
  164 + }
  165 + ]
  166 + }
  167 + bizCharts.setOption(bizOption);
  168 +
  169 + let devCharts = echarts.init(devChartsRefs.value);
  170 + let devOption = {
  171 + grid:{
  172 + top:"14%",
  173 + bottom:"8%"
  174 + },
  175 + tooltip: {
  176 + trigger: 'item'
  177 + },
  178 + color:"#60a0f7",
  179 + xAxis: {
  180 + type: 'category',
  181 + data: ['电子税务局', '税库银系统', '电子底账', '出口退税', '数字人事'],
  182 + axisTick:false,
  183 + },
  184 + yAxis: {
  185 + type: 'value',
  186 + axisLine:{
  187 + show:true,
  188 + },
  189 + //分隔线样式
  190 + splitLine:{
  191 + show:true,
  192 + lineStyle:{
  193 + type:'dashed'
  194 + }
  195 + }
  196 + },
  197 + series: [
  198 + {
  199 + data: [120, 200, 150, 80, 70,],
  200 + type: 'bar',
  201 + barWidth: 26,//设置柱状图大小
  202 + itemStyle:{
  203 + borderRadius:[20,20,0,0]
  204 + }
  205 + }
  206 + ]
  207 + }
  208 + devCharts.setOption(devOption);
  209 +
  210 + let snapshotCharts = echarts.init(snapshotChartsRefs.value);
  211 + let shapshotOption = {
  212 + grid:{
  213 + top:"14%",
  214 + bottom:"8%"
  215 + },
  216 + tooltip: {
  217 + trigger: 'item'
  218 + },
  219 + color:"#EF8166",
  220 + xAxis: {
  221 + type: 'value',
  222 + axisLine:{
  223 + show:true,
  224 + },
  225 + //分隔线样式
  226 + splitLine:{
  227 + show:true,
  228 + lineStyle:{
  229 + type:'dashed'
  230 + }
  231 + }
  232 + },
  233 + yAxis: {
  234 + type: 'category',
  235 + data: ['07-06', '07-05', '07-04', '07-03', '07-02'],
  236 + axisTick:false,
  237 + },
  238 + series: [
  239 + {
  240 + data: [120, 200, 150, 80, 70,],
  241 + type: 'bar',
  242 + barWidth: 26,//设置柱状图大小
  243 + itemStyle:{
  244 + borderRadius:[0,20,20,0]
  245 + }
  246 + }
  247 + ]
  248 + }
  249 + snapshotCharts.setOption(shapshotOption);
  250 +
  251 + let peopleSSCharts = echarts.init(peopleSSChartsRefs.value);
  252 + let peopleOption = {
  253 + grid:{
  254 + top:"14%",
  255 + bottom:"8%"
  256 + },
  257 + //color:"#60a0f7",
  258 + tooltip: {
  259 + trigger: 'item'
  260 + },
  261 + legend: {
  262 + orient: 'vertical',
  263 + top:"middle",
  264 + right:"10%",
  265 + itemWidth:35,
  266 + icon:"rect",
  267 + },
  268 + series: [
  269 + {
  270 + data: [
  271 + { value: 1048, name: '张三' },
  272 + { value: 735, name: '李四' },
  273 + { value: 580, name: '赵二' },
  274 + { value: 484, name: '王五' },
  275 + { value: 300, name: '赵六' }
  276 + ],
  277 + center: ['40%', '50%'],
  278 + type: 'pie',
  279 + //高亮状态的扇区和标签样式。
  280 + emphasis: {
  281 + label: {
  282 + show: true
  283 + },
  284 + itemStyle: {
  285 + shadowBlur: 10,
  286 + shadowOffsetX: 0,
  287 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  288 + }
  289 + },
  290 + label: {
  291 + show: false
  292 + },
  293 + }
  294 + ]
  295 + }
  296 + peopleSSCharts.setOption(peopleOption);
  297 + }
  298 +
  299 + Vue.onMounted(()=>{
  300 + getEcharts();
  301 + })
  302 +
  303 + Vue.onMounted(()=>{
  304 +
  305 + })
  306 + return {
  307 + height,
  308 + search,
  309 + tableData,
  310 + btnGroupType,
  311 + handleBtnGroup,
  312 + bizChartsRefs,
  313 + devChartsRefs,
  314 + snapshotChartsRefs,
  315 + peopleSSChartsRefs,
  316 + }
  317 + }
  318 +}
@@ -256,6 +256,12 @@ const routes = [{ @@ -256,6 +256,12 @@ const routes = [{
256 name: 'snapshotHistory', 256 name: 'snapshotHistory',
257 component: () => myImport('views/snapshot/history/index') 257 component: () => myImport('views/snapshot/history/index')
258 }, 258 },
  259 + //快照概览
  260 + {
  261 + path: '/vue3/snapshotOverview',
  262 + name: 'snapshotOverview',
  263 + component: () => myImport('views/snapshotOverview/index')
  264 + },
259 ]; 265 ];
260 266
261 // hash模式： createWebHashHistory 267 // hash模式： createWebHashHistory