monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c935427ec68976c25ec1aaeb34be4c16290c670f 2 parents 8a0a7267 38af7231

Merge branch 'master-500-dev-ztq1' into 'master-500-dev' 

快照概览页面优化，快照管理接口调用



See merge request !740
Inline Side-by-side
Showing 4 changed files with 316 additions and 156 deletions
@@ -4,30 +4,53 @@ @@ -4,30 +4,53 @@
4 <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;"> 4 <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
5 <el-form :inline="true"> 5 <el-form :inline="true">
6 <el-form-item> 6 <el-form-item>
7 - <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyword" placeholder="关键字检索" /> 7 + <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
8 </el-form-item> 8 </el-form-item>
9 <el-form-item> 9 <el-form-item>
10 - <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.bizType" placeholder="资源类型">  
11 - <el-option label="Zone one" value="shanghai" />  
12 - <el-option label="Zone two" value="beijing" />  
13 - </el-select> 10 + <el-dropdown>
  11 + <cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
  12 + </el-dropdown>
  13 +<!-- <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.resType" placeholder="资源类型">-->
  14 +<!-- <el-option label="Zone one" value="shanghai" />-->
  15 +<!-- <el-option label="Zone two" value="beijing" />-->
  16 +<!-- </el-select>-->
14 </el-form-item> 17 </el-form-item>
15 <el-form-item> 18 <el-form-item>
16 - <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.devType" placeholder="业务类型">  
17 - <el-option label="Zone one" value="shanghai" />  
18 - <el-option label="Zone two" value="beijing" />  
19 - </el-select> 19 + <el-dropdown>
  20 + <cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
  21 + </el-dropdown>
  22 +<!-- <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.busId" placeholder="业务类型">-->
  23 +<!-- <el-option label="Zone one" value="shanghai" />-->
  24 +<!-- <el-option label="Zone two" value="beijing" />-->
  25 +<!-- </el-select>-->
20 </el-form-item> 26 </el-form-item>
21 <el-form-item> 27 <el-form-item>
22 - <el-button :size="$global.elementConfig.size.button" type="primary">查询</el-button> 28 + <el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
23 </el-form-item> 29 </el-form-item>
24 </el-form> 30 </el-form>
25 <el-button-group> 31 <el-button-group>
26 - <el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>  
27 - <el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>  
28 - <el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>  
29 - <el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>  
30 - <el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button> 32 + <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
  33 + <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近七日</el-button>
  34 + <el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
  35 + <el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
  36 + <el-popover
  37 + v-model:visible="visiblePopover"
  38 + :width="420"
  39 + placement="bottom-end">
  40 + <template #reference>
  41 + <el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
  42 + </template>
  43 + <el-date-picker
  44 + format="YYYY-MM-DD HH:mm:ss"
  45 + value-format="YYYY-MM-DD HH:mm:ss"
  46 + @change="handleChangeDatetime"
  47 + v-model="datetimerange"
  48 + type="datetimerange"
  49 + range-separator="-"
  50 + start-placeholder="开始时间"
  51 + end-placeholder="结束时间"
  52 + />
  53 + </el-popover>
31 </el-button-group> 54 </el-button-group>
32 </div> 55 </div>
33 </div> 56 </div>
@@ -52,22 +75,31 @@ @@ -52,22 +75,31 @@
52 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" 75 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
53 :height="height - 110" 76 :height="height - 110"
54 :loading="false" 77 :loading="false"
55 - :pageSize="search.pageSize" 78 + :pageSize="queryParams.pageSize"
56 :showBorder="true" 79 :showBorder="true"
57 :showIndex="true" 80 :showIndex="true"
58 :showPage="true" 81 :showPage="true"
59 :showSelection="false" 82 :showSelection="false"
60 :showTools="true" 83 :showTools="true"
61 - :total="tableData.count" 84 + :total="queryParams.count"
62 @loaddata="loaddata"> 85 @loaddata="loaddata">
63 <template #tools="{scope}"> 86 <template #tools="{scope}">
64 <div class="list-handle"> 87 <div class="list-handle">
65 - <span class="icon-bg" style="color: #69a1f6">  
66 - <i class="el-icon-document"></i>  
67 - </span>  
68 - <span class="icon-bg" style="color:#dd3532">  
69 - <i class="el-icon-delete"></i>  
70 - </span> 88 + <el-tootip effect="dark"
  89 + content="详情"
  90 + placement="top">
  91 + <span class="icon-bg" style="color: #69a1f6">
  92 + <i class="el-icon-document"></i>
  93 + </span>
  94 + </el-tootip>
  95 +
  96 + <el-tootip effect="dark"
  97 + content="删除"
  98 + placement="top">
  99 + <span class="icon-bg" style="color:#dd3532" @click="handleDel(scope.row)">
  100 + <i class="el-icon-delete"></i>
  101 + </span>
  102 + </el-tootip>
71 </div> 103 </div>
72 </template> 104 </template>
73 </cm-table-page> 105 </cm-table-page>
@@ -5,56 +5,25 @@ export default { @@ -5,56 +5,25 @@ export default {
5 const {proxy} = Vue.getCurrentInstance(); 5 const {proxy} = Vue.getCurrentInstance();
6 let height = Vue.ref(window.innerHeight); 6 let height = Vue.ref(window.innerHeight);
7 let formSize = Vue.ref('default'); 7 let formSize = Vue.ref('default');
  8 + let datetimerange = Vue.ref([]);
  9 + let visiblePopover = Vue.ref(false);
8 let queryParams = Vue.ref({ 10 let queryParams = Vue.ref({
9 - keyword:undefined,  
10 - bizType:undefined,  
11 - devType:undefined,  
12 - })  
13 - let btnGroupType = Vue.ref(0);  
14 - let search = Vue.ref({  
15 - program: '',  
16 - sortBy: 'dbTime',  
17 - scopeBy: 'dbTimeStr.keyword',  
18 - keyword: '',  
19 - type: 'syslog', 11 + keyWord:'',
  12 + resType:'',
  13 + busId:'',
  14 + time:"today",
20 pageNum: 1, 15 pageNum: 1,
21 pageSize: 10, 16 pageSize: 10,
22 - dateTime: [],  
23 - resType: '',  
24 - }); 17 + count:0,
  18 + })
  19 + let btnGroupType = Vue.ref(0);
25 //表格字段 20 //表格字段
26 let tableData = Vue.ref({ 21 let tableData = Vue.ref({
27 count: 0, 22 count: 0,
28 - dataList: [  
29 - {  
30 - logDate:"PC服务器",  
31 - resName:"稽核服务器jhxc1",  
32 - resTypeName:"95.16.16.93",  
33 - host:"陈婷婷",  
34 - type:"",  
35 - program:"高鹏",  
36 - message:"刘文",  
37 - }, {  
38 - logDate:"",  
39 - resName:"",  
40 - resTypeName:"",  
41 - host:"",  
42 - type:"",  
43 - program:"",  
44 - message:"",  
45 - },{  
46 - logDate:"",  
47 - resName:"",  
48 - resTypeName:"",  
49 - host:"",  
50 - type:"",  
51 - program:"",  
52 - message:"",  
53 - },  
54 - ], 23 + dataList: [],
55 columns: [ 24 columns: [
56 { 25 {
57 - prop: 'logDate', 26 + prop: 'resTypeName',
58 label: '资源类型', 27 label: '资源类型',
59 sortable: true, 28 sortable: true,
60 align: 'center', 29 align: 'center',
@@ -68,40 +37,40 @@ export default { @@ -68,40 +37,40 @@ export default {
68 width: '250' 37 width: '250'
69 }, 38 },
70 { 39 {
71 - prop: 'resTypeName', 40 + prop: 'ip',
72 label: 'IP地址', 41 label: 'IP地址',
73 sortable: true, 42 sortable: true,
74 align: 'center', 43 align: 'center',
75 width: '200' 44 width: '200'
76 }, { 45 }, {
77 - prop: 'host', 46 + prop: 'admin',
78 label: '负责人', 47 label: '负责人',
79 sortable: true, 48 sortable: true,
80 align: 'center', 49 align: 'center',
81 width: '200' 50 width: '200'
82 }, { 51 }, {
83 - prop: 'type', 52 + prop: 'busTypeName',
84 label: '所属业务系统', 53 label: '所属业务系统',
85 sortable: true, 54 sortable: true,
86 align: 'center', 55 align: 'center',
87 width: '200' 56 width: '200'
88 }, 57 },
89 { 58 {
90 - prop: 'program', 59 + prop: 'nickname',
91 label: '业务系统负责人', 60 label: '业务系统负责人',
92 sortable: true, 61 sortable: true,
93 align: 'center', 62 align: 'center',
94 width: '200' 63 width: '200'
95 }, 64 },
96 { 65 {
97 - prop: 'message', 66 + prop: 'createUser',
98 label: '快照负责人', 67 label: '快照负责人',
99 sortable: true, 68 sortable: true,
100 align: 'center', 69 align: 'center',
101 width: '200' 70 width: '200'
102 }, 71 },
103 { 72 {
104 - prop: 'message', 73 + prop: 'createTime',
105 label: '快照创建时间', 74 label: '快照创建时间',
106 sortable: true, 75 sortable: true,
107 align: 'center', 76 align: 'center',
@@ -111,32 +80,67 @@ export default { @@ -111,32 +80,67 @@ export default {
111 }) 80 })
112 81
113 let loaddata = ({page, limit}) => { 82 let loaddata = ({page, limit}) => {
114 - search.value.pageNum = page;  
115 - search.value.pageSize = limit; 83 + queryParams.value.pageNum = page;
  84 + queryParams.value.pageSize = limit;
116 getDataList(); 85 getDataList();
117 } 86 }
  87 +
  88 + let getResType = (arr) => {
  89 + let types = arr.map(function (v) {
  90 + return v.id;
  91 + });
  92 + queryParams.value.resType = types.join(',');
  93 + }
  94 + let getBizType = (arr) => {
  95 + let types = arr.map(function (v) {
  96 + return v.busId;
  97 + });
  98 + queryParams.value.busId = types.join(',');
  99 + }
  100 +
118 // 获取列表 101 // 获取列表
119 let getDataList = () => { 102 let getDataList = () => {
120 - 103 + // console.log(queryParams.value);
  104 + proxy.$http.get(`/api-web/snapshot/manage/getList`,queryParams.value,(res)=>{
  105 + // console.log(res.data);
  106 + tableData.value.dataList = res.data;
  107 + queryParams.value.count = res.count;
  108 + },(err)=>{
  109 + console.log(err);
  110 + })
121 }; 111 };
122 - 112 + // 查询事件
  113 + let handleQuery = ()=> {
  114 + queryParams.value.pageSize=10;
  115 + queryParams.value.pageNum=1;
  116 + getDataList();
  117 + }
123 // 按钮组点击事件 118 // 按钮组点击事件
124 let handleBtnGroup = (val)=>{ 119 let handleBtnGroup = (val)=>{
125 - console.log(btnGroupType.value);  
126 - btnGroupType.value = val;  
127 - console.log(val); 120 + queryParams.value.time = val;
  121 + if (val == 4){
  122 + visiblePopover.value = !visiblePopover.value;
  123 + }else{
  124 + getDataList();
  125 + getEchartsData();
  126 + }
128 }; 127 };
129 128
130 // echarts 129 // echarts
131 let bizChartsRefs = Vue.ref(null); 130 let bizChartsRefs = Vue.ref(null);
132 let devChartsRefs = Vue.ref(null); 131 let devChartsRefs = Vue.ref(null);
133 - let snapshotChartsRefs = Vue.ref(null) 132 + let snapshotChartsRefs = Vue.ref(null);
  133 + let bizCharts = Vue.ref('')
  134 + let devCharts = Vue.ref('')
  135 + let snapshotCharts = Vue.ref('')
134 let getEcharts = ()=>{ 136 let getEcharts = ()=>{
135 - let bizCharts = echarts.init(bizChartsRefs.value); 137 + bizCharts = echarts.init(bizChartsRefs.value);
136 let bizOption = { 138 let bizOption = {
137 grid:{ 139 grid:{
138 - top:"14%",  
139 - bottom:"8%" 140 + top:"8%",
  141 + bottom:"8%",
  142 + left:"4%",
  143 + containLabel:true,
140 }, 144 },
141 tooltip: { 145 tooltip: {
142 trigger: 'item' 146 trigger: 'item'
@@ -144,7 +148,7 @@ export default { @@ -144,7 +148,7 @@ export default {
144 color:"#60a0f7", 148 color:"#60a0f7",
145 xAxis: { 149 xAxis: {
146 type: 'category', 150 type: 'category',
147 - data: ['PC服务器', '虚拟化', '共享存储', '路由器', '数据库'], 151 + data: [],
148 axisTick:false, 152 axisTick:false,
149 }, 153 },
150 yAxis: { 154 yAxis: {
@@ -162,7 +166,7 @@ export default { @@ -162,7 +166,7 @@ export default {
162 }, 166 },
163 series: [ 167 series: [
164 { 168 {
165 - data: [120, 200, 150, 80, 70,], 169 + data: [],
166 type: 'bar', 170 type: 'bar',
167 barWidth: 26,//设置柱状图大小 171 barWidth: 26,//设置柱状图大小
168 itemStyle:{ 172 itemStyle:{
@@ -173,11 +177,13 @@ export default { @@ -173,11 +177,13 @@ export default {
173 } 177 }
174 bizCharts.setOption(bizOption); 178 bizCharts.setOption(bizOption);
175 179
176 - let devCharts = echarts.init(devChartsRefs.value); 180 + devCharts = echarts.init(devChartsRefs.value);
177 let devOption = { 181 let devOption = {
178 grid:{ 182 grid:{
179 - top:"14%",  
180 - bottom:"8%" 183 + top:"8%",
  184 + bottom:"8%",
  185 + left:"4%",
  186 + containLabel:true,
181 }, 187 },
182 tooltip: { 188 tooltip: {
183 trigger: 'item' 189 trigger: 'item'
@@ -185,7 +191,7 @@ export default { @@ -185,7 +191,7 @@ export default {
185 color:"#60a0f7", 191 color:"#60a0f7",
186 xAxis: { 192 xAxis: {
187 type: 'category', 193 type: 'category',
188 - data: ['电子税务局', '税库银系统', '电子底账', '出口退税', '数字人事'], 194 + data: [],
189 axisTick:false, 195 axisTick:false,
190 }, 196 },
191 yAxis: { 197 yAxis: {
@@ -203,7 +209,7 @@ export default { @@ -203,7 +209,7 @@ export default {
203 }, 209 },
204 series: [ 210 series: [
205 { 211 {
206 - data: [120, 200, 150, 80, 70,], 212 + data: [],
207 type: 'bar', 213 type: 'bar',
208 barWidth: 26,//设置柱状图大小 214 barWidth: 26,//设置柱状图大小
209 itemStyle:{ 215 itemStyle:{
@@ -214,11 +220,13 @@ export default { @@ -214,11 +220,13 @@ export default {
214 } 220 }
215 devCharts.setOption(devOption); 221 devCharts.setOption(devOption);
216 222
217 - let snapshotCharts = echarts.init(snapshotChartsRefs.value); 223 + snapshotCharts = echarts.init(snapshotChartsRefs.value);
218 let shapshotOption = { 224 let shapshotOption = {
219 grid:{ 225 grid:{
220 - top:"14%",  
221 - bottom:"8%" 226 + top:"8%",
  227 + bottom:"8%",
  228 + left:"4%",
  229 + containLabel:true,
222 }, 230 },
223 tooltip: { 231 tooltip: {
224 trigger: 'item' 232 trigger: 'item'
@@ -226,7 +234,7 @@ export default { @@ -226,7 +234,7 @@ export default {
226 color:"#60a0f7", 234 color:"#60a0f7",
227 xAxis: { 235 xAxis: {
228 type: 'category', 236 type: 'category',
229 - data: ['07-06', '07-05', '07-04', '07-03', '07-02'], 237 + data: [],
230 axisTick:false, 238 axisTick:false,
231 }, 239 },
232 yAxis: { 240 yAxis: {
@@ -244,7 +252,7 @@ export default { @@ -244,7 +252,7 @@ export default {
244 }, 252 },
245 series: [ 253 series: [
246 { 254 {
247 - data: [120, 200, 150, 80, 70,], 255 + data: [],
248 type: 'bar', 256 type: 'bar',
249 barWidth: 26,//设置柱状图大小 257 barWidth: 26,//设置柱状图大小
250 itemStyle:{ 258 itemStyle:{
@@ -256,8 +264,116 @@ export default { @@ -256,8 +264,116 @@ export default {
256 snapshotCharts.setOption(shapshotOption); 264 snapshotCharts.setOption(shapshotOption);
257 } 265 }
258 266
  267 + let getEchartsData = ()=>{
  268 + let obj = {
  269 + time:queryParams.value.time,
  270 + }
  271 + let resTypeData = {
  272 + xaxis:[],
  273 + yaxis:[],
  274 + }
  275 + proxy.$http.get(`/api-web/snapshot/manage/resTypeTop`,obj,(res)=>{
  276 + // console.log(res.object);
  277 + res.object.forEach(item=>{
  278 + resTypeData.xaxis.push(item.xaxis);
  279 + resTypeData.yaxis.push(item.yaxis)
  280 + })
  281 + bizCharts.setOption({
  282 + xAxis:{
  283 + data:resTypeData.xaxis,
  284 + },
  285 + series:[
  286 + {
  287 + data:resTypeData.yaxis
  288 + }
  289 + ]
  290 + });
  291 + },(err)=>{
  292 + console.log(err);
  293 + })
  294 +
  295 + let busTypeData = {
  296 + xaxis:[],
  297 + yaxis:[],
  298 + }
  299 + proxy.$http.get(`/api-web/snapshot/manage/busTop`,obj,(res)=>{
  300 + // console.log(res.object);
  301 + res.object.forEach(item=>{
  302 + busTypeData.xaxis.push(item.xaxis);
  303 + busTypeData.yaxis.push(item.yaxis)
  304 + })
  305 + devCharts.setOption({
  306 + xAxis:{
  307 + data:busTypeData.xaxis,
  308 + },
  309 + series:[
  310 + {
  311 + data:busTypeData.yaxis
  312 + }
  313 + ]
  314 + });
  315 + },(err)=>{
  316 + console.log(err);
  317 + })
  318 +
  319 + let snapshotNumData = {
  320 + xaxis:[],
  321 + yaxis:[],
  322 + }
  323 + proxy.$http.get(`/api-web/snapshot/manage/snapshotNum`,obj,(res)=>{
  324 + // console.log(res.object);
  325 + res.object.forEach(item=>{
  326 + snapshotNumData.xaxis.push(item.xaxis);
  327 + snapshotNumData.yaxis.push(item.yaxis)
  328 + })
  329 + snapshotCharts.setOption({
  330 + xAxis:{
  331 + data:snapshotNumData.xaxis,
  332 + },
  333 + series:[
  334 + {
  335 + data:snapshotNumData.yaxis
  336 + }
  337 + ]
  338 + });
  339 + },(err)=>{
  340 + console.log(err);
  341 + })
  342 + }
  343 +
  344 + // 时间范围快捷键 修改事件
  345 + let handleChangeDatetime = (value)=>{
  346 + visiblePopover.value = false;
  347 + queryParams.value.time = value.join(',');
  348 + getDataList();
  349 + getEchartsData();
  350 + }
  351 +
  352 + // 表格删除事件
  353 + let handleDel = (row)=>{
  354 + // console.log(row);
  355 + proxy.$global.confirm("确认删除吗？", function () {
  356 + deleteItems([row.resId],[row.batchNo]);
  357 + })
  358 + }
  359 + //删除
  360 + let deleteItems = (ids,nos) => {
  361 + let params = {
  362 + resId: ids.toString(),
  363 + batchNo:nos.toString(),
  364 + }
  365 + proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
  366 + if (res && res.success) {
  367 + proxy.$global.showMsg('删除成功');
  368 + handleQuery()
  369 + }
  370 + })
  371 + }
  372 +
259 Vue.onMounted(()=>{ 373 Vue.onMounted(()=>{
260 getEcharts(); 374 getEcharts();
  375 + getDataList();
  376 + getEchartsData();
261 }) 377 })
262 378
263 return{ 379 return{
@@ -265,12 +381,19 @@ export default { @@ -265,12 +381,19 @@ export default {
265 formSize, 381 formSize,
266 queryParams, 382 queryParams,
267 tableData, 383 tableData,
268 - search,  
269 btnGroupType, 384 btnGroupType,
270 bizChartsRefs, 385 bizChartsRefs,
271 devChartsRefs, 386 devChartsRefs,
272 snapshotChartsRefs, 387 snapshotChartsRefs,
273 handleBtnGroup, 388 handleBtnGroup,
  389 + datetimerange,
  390 + visiblePopover,
  391 + handleChangeDatetime,
  392 + getResType,
  393 + getBizType,
  394 + handleQuery,
  395 + loaddata,
  396 + handleDel,
274 } 397 }
275 } 398 }
276 } 399 }
@@ -3,11 +3,28 @@ @@ -3,11 +3,28 @@
3 <div class="search"> 3 <div class="search">
4 <div class="condition esData-conditon" style="justify-content: end;width: 100%;"> 4 <div class="condition esData-conditon" style="justify-content: end;width: 100%;">
5 <el-button-group> 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> 6 + <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
  7 + <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近七日</el-button>
  8 + <el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
  9 + <el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
  10 + <el-popover
  11 + v-model:visible="visiblePopover"
  12 + :width="420"
  13 + placement="bottom-end">
  14 + <template #reference>
  15 + <el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
  16 + </template>
  17 + <el-date-picker
  18 + format="YYYY-MM-DD HH:mm:ss"
  19 + value-format="YYYY-MM-DD HH:mm:ss"
  20 + @change="handleChangeDatetime"
  21 + v-model="datetimerange"
  22 + type="datetimerange"
  23 + range-separator="-"
  24 + start-placeholder="开始时间"
  25 + end-placeholder="结束时间"
  26 + />
  27 + </el-popover>
11 </el-button-group> 28 </el-button-group>
12 </div> 29 </div>
13 </div> 30 </div>
@@ -37,13 +54,13 @@ @@ -37,13 +54,13 @@
37 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" 54 <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
38 :height="height - 110" 55 :height="height - 110"
39 :loading="false" 56 :loading="false"
40 - :pageSize="search.pageSize" 57 + :pageSize="queryParams.pageSize"
41 :showBorder="true" 58 :showBorder="true"
42 :showIndex="true" 59 :showIndex="true"
43 :showPage="true" 60 :showPage="true"
44 :showSelection="false" 61 :showSelection="false"
45 :showTools="true" 62 :showTools="true"
46 - :total="tableData.count" 63 + :total="queryParams.count"
47 @loaddata="loaddata"> 64 @loaddata="loaddata">
48 <template #tools="{scope}"> 65 <template #tools="{scope}">
49 <div class="list-handle"> 66 <div class="list-handle">
@@ -5,50 +5,23 @@ export default { @@ -5,50 +5,23 @@ export default {
5 const {proxy} = Vue.getCurrentInstance(); 5 const {proxy} = Vue.getCurrentInstance();
6 let height = Vue.ref(window.innerHeight); 6 let height = Vue.ref(window.innerHeight);
7 let btnGroupType = Vue.ref(0); 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', 8 + let datetimerange = Vue.ref([]);
  9 + let visiblePopover = Vue.ref(false);
  10 + let queryParams = Vue.ref({
  11 + keyWord:'',
  12 + resType:'',
  13 + busId:'',
  14 + time:"today",
14 pageNum: 1, 15 pageNum: 1,
15 pageSize: 10, 16 pageSize: 10,
16 - dateTime: [],  
17 - resType: '',  
18 - }); 17 + count:0,
  18 + })
19 //表格字段 19 //表格字段
20 let tableData = Vue.ref({ 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 - ], 21 + dataList: [],
49 columns: [ 22 columns: [
50 { 23 {
51 - prop: 'logDate', 24 + prop: 'resTypeName',
52 label: '资源类型', 25 label: '资源类型',
53 sortable: true, 26 sortable: true,
54 align: 'center', 27 align: 'center',
@@ -62,40 +35,40 @@ export default { @@ -62,40 +35,40 @@ export default {
62 width: '250' 35 width: '250'
63 }, 36 },
64 { 37 {
65 - prop: 'resTypeName', 38 + prop: 'ip',
66 label: 'IP地址', 39 label: 'IP地址',
67 sortable: true, 40 sortable: true,
68 align: 'center', 41 align: 'center',
69 width: '200' 42 width: '200'
70 }, { 43 }, {
71 - prop: 'host', 44 + prop: 'admin',
72 label: '负责人', 45 label: '负责人',
73 sortable: true, 46 sortable: true,
74 align: 'center', 47 align: 'center',
75 width: '200' 48 width: '200'
76 }, { 49 }, {
77 - prop: 'type', 50 + prop: 'busTypeName',
78 label: '所属业务系统', 51 label: '所属业务系统',
79 sortable: true, 52 sortable: true,
80 align: 'center', 53 align: 'center',
81 width: '200' 54 width: '200'
82 }, 55 },
83 { 56 {
84 - prop: 'program', 57 + prop: 'nickname',
85 label: '业务系统负责人', 58 label: '业务系统负责人',
86 sortable: true, 59 sortable: true,
87 align: 'center', 60 align: 'center',
88 width: '200' 61 width: '200'
89 }, 62 },
90 { 63 {
91 - prop: 'message', 64 + prop: 'createUser',
92 label: '快照负责人', 65 label: '快照负责人',
93 sortable: true, 66 sortable: true,
94 align: 'center', 67 align: 'center',
95 width: '200' 68 width: '200'
96 }, 69 },
97 { 70 {
98 - prop: 'message', 71 + prop: 'createTime',
99 label: '快照创建时间', 72 label: '快照创建时间',
100 sortable: true, 73 sortable: true,
101 align: 'center', 74 align: 'center',
@@ -105,8 +78,8 @@ export default { @@ -105,8 +78,8 @@ export default {
105 }) 78 })
106 79
107 let loaddata = ({page, limit}) => { 80 let loaddata = ({page, limit}) => {
108 - search.value.pageNum = page;  
109 - search.value.pageSize = limit; 81 + queryParams.value.pageNum = page;
  82 + queryParams.value.pageSize = limit;
110 getDataList(); 83 getDataList();
111 } 84 }
112 // 获取列表 85 // 获取列表
@@ -116,7 +89,12 @@ export default { @@ -116,7 +89,12 @@ export default {
116 89
117 // 按钮组点击事件 90 // 按钮组点击事件
118 let handleBtnGroup = (val)=>{ 91 let handleBtnGroup = (val)=>{
119 - btnGroupType.value = val; 92 + queryParams.value.time = val;
  93 + if (val == 4){
  94 + visiblePopover.value = !visiblePopover.value;
  95 + }else{
  96 +
  97 + }
120 }; 98 };
121 99
122 // echarts 100 // echarts
@@ -124,8 +102,12 @@ export default { @@ -124,8 +102,12 @@ export default {
124 let devChartsRefs = Vue.ref(null); 102 let devChartsRefs = Vue.ref(null);
125 let snapshotChartsRefs = Vue.ref(null); 103 let snapshotChartsRefs = Vue.ref(null);
126 let peopleSSChartsRefs = Vue.ref(null); 104 let peopleSSChartsRefs = Vue.ref(null);
  105 + let bizCharts = Vue.ref('');
  106 + let devCharts = Vue.ref('');
  107 + let snapshotCharts = Vue.ref('');
  108 + let peopleSSCharts = Vue.ref('');
127 let getEcharts = ()=>{ 109 let getEcharts = ()=>{
128 - let bizCharts = echarts.init(bizChartsRefs.value); 110 + bizCharts = echarts.init(bizChartsRefs.value);
129 let bizOption = { 111 let bizOption = {
130 grid:{ 112 grid:{
131 top:"14%", 113 top:"14%",
@@ -166,7 +148,7 @@ export default { @@ -166,7 +148,7 @@ export default {
166 } 148 }
167 bizCharts.setOption(bizOption); 149 bizCharts.setOption(bizOption);
168 150
169 - let devCharts = echarts.init(devChartsRefs.value); 151 + devCharts = echarts.init(devChartsRefs.value);
170 let devOption = { 152 let devOption = {
171 grid:{ 153 grid:{
172 top:"14%", 154 top:"14%",
@@ -207,7 +189,7 @@ export default { @@ -207,7 +189,7 @@ export default {
207 } 189 }
208 devCharts.setOption(devOption); 190 devCharts.setOption(devOption);
209 191
210 - let snapshotCharts = echarts.init(snapshotChartsRefs.value); 192 + snapshotCharts = echarts.init(snapshotChartsRefs.value);
211 let shapshotOption = { 193 let shapshotOption = {
212 grid:{ 194 grid:{
213 top:"14%", 195 top:"14%",
@@ -296,23 +278,29 @@ export default { @@ -296,23 +278,29 @@ export default {
296 peopleSSCharts.setOption(peopleOption); 278 peopleSSCharts.setOption(peopleOption);
297 } 279 }
298 280
  281 + // 时间范围快捷键 修改事件
  282 + let handleChangeDatetime = (value)=>{
  283 + visiblePopover.value = false;
  284 + queryParams.value.time = value.join(',');
  285 + }
  286 +
299 Vue.onMounted(()=>{ 287 Vue.onMounted(()=>{
300 getEcharts(); 288 getEcharts();
301 }) 289 })
302 290
303 - Vue.onMounted(()=>{  
304 -  
305 - })  
306 return { 291 return {
307 height, 292 height,
308 - search,  
309 tableData, 293 tableData,
  294 + queryParams,
310 btnGroupType, 295 btnGroupType,
311 handleBtnGroup, 296 handleBtnGroup,
312 bizChartsRefs, 297 bizChartsRefs,
313 devChartsRefs, 298 devChartsRefs,
314 snapshotChartsRefs, 299 snapshotChartsRefs,
315 peopleSSChartsRefs, 300 peopleSSChartsRefs,
  301 + datetimerange,
  302 + visiblePopover,
  303 + handleChangeDatetime
316 } 304 }
317 } 305 }
318 } 306 }