Authored by 鲁尚清

【无】操作记录日志页面搭建-按钮组点击高亮 #2

@@ -28,28 +28,28 @@ @@ -28,28 +28,28 @@
28 <div class="search"> 28 <div class="search">
29 <div class="operation-log-search"> 29 <div class="operation-log-search">
30 <el-button-group class="ml-4"> 30 <el-button-group class="ml-4">
31 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 1 ? 'primary' : ''"  
32 - @click="getDataList(1)">昨天 31 + <el-button :size="$global.elementConfig.size.button" :type="search.status == 'yesterday' ? 'primary' : ''"
  32 + @click="getDataList('yesterday')">昨天
33 </el-button> 33 </el-button>
34 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
35 - @click="getDataList(2)">今天 34 + <el-button :size="$global.elementConfig.size.button" :type="search.status == 'today' ? 'primary' : ''"
  35 + @click="getDataList('today')">今天
36 </el-button> 36 </el-button>
37 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
38 - @click="getDataList(2)">上周 37 + <el-button :size="$global.elementConfig.size.button" :type="search.status == 'lastWeek' ? 'primary' : ''"
  38 + @click="getDataList('lastWeek')">上周
39 </el-button> 39 </el-button>
40 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
41 - @click="getDataList(2)">本周 40 + <el-button :size="$global.elementConfig.size.button" :type="search.status == 'thisWeek' ? 'primary' : ''"
  41 + @click="getDataList('thisWeek')">本周
42 </el-button> 42 </el-button>
43 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
44 - @click="getDataList(2)">本月 43 + <el-button :size="$global.elementConfig.size.button" :type="search.status == 'thisMonth' ? 'primary' : ''"
  44 + @click="getDataList('thisMonth')">本月
45 </el-button> 45 </el-button>
46 - <el-button :size="$global.elementConfig.size.button" :type="search.status == 2 ? 'primary' : ''"  
47 - @click="getDataList(2)">全部 46 + <el-button style="border-radius: 0;" :size="$global.elementConfig.size.button" :type="search.status == 'all' ? 'primary' : ''"
  47 + @click="getDataList('all')">全部
48 </el-button> 48 </el-button>
49 </el-button-group> 49 </el-button-group>
50 <el-date-picker 50 <el-date-picker
51 :size="$global.elementConfig.size.input" 51 :size="$global.elementConfig.size.input"
52 - style="width:150px;" 52 + style="width:150px;border-radius: 0 4px 4px 0;"
53 end-placeholder="结束日期" 53 end-placeholder="结束日期"
54 format="YYYY-MM-DD" 54 format="YYYY-MM-DD"
55 range-separator="-" 55 range-separator="-"
@@ -58,6 +58,8 @@ @@ -58,6 +58,8 @@
58 v-model="search.dateTime" 58 v-model="search.dateTime"
59 value-format="YYYY-MM-DD" 59 value-format="YYYY-MM-DD"
60 :prefix-icon="'none'" 60 :prefix-icon="'none'"
  61 + @focus="dateFocus"
  62 + @change="dateChange"
61 /> 63 />
62 </div> 64 </div>
63 </div> 65 </div>
@@ -107,6 +107,7 @@ export default { @@ -107,6 +107,7 @@ export default {
107 yAxis: { 107 yAxis: {
108 type: 'value', 108 type: 'value',
109 scale: true, 109 scale: true,
  110 + min:0,
110 boundaryGap: ['10%', '10%'], 111 boundaryGap: ['10%', '10%'],
111 axisLine: { 112 axisLine: {
112 lineStyle: { 113 lineStyle: {
@@ -284,7 +285,8 @@ export default { @@ -284,7 +285,8 @@ export default {
284 optionDataInit(); 285 optionDataInit();
285 } 286 }
286 let search = Vue.ref({ 287 let search = Vue.ref({
287 - status: 1, 288 + status: 'today',
  289 + dateTime:'',
288 keyword: '', 290 keyword: '',
289 page: 1, 291 page: 1,
290 limit: 10, 292 limit: 10,
@@ -336,23 +338,42 @@ export default { @@ -336,23 +338,42 @@ export default {
336 } 338 }
337 ] 339 ]
338 }) 340 })
339 - 341 + //点击时间选择时,其他按钮不高亮
  342 + let dateFocus=()=>{
  343 + search.value.status = 'dateRange';
  344 + }
  345 + //时间更改事件
  346 + let dateChange=(val)=>{
  347 + console.log(val,search.value.dateTime)
  348 + getDataList('dateRange')
  349 + }
340 350
341 //获取aj配置信息 351 //获取aj配置信息
342 - let statusVal = Vue.ref(0); 352 + let statusVal = Vue.ref('today');
343 let getDataList = (status) => { 353 let getDataList = (status) => {
344 if (status == undefined) { 354 if (status == undefined) {
345 - status = 1 355 + status = 'today'
  356 + }
  357 + if(status != 'dateRange'){
  358 + search.value.dateTime=[];
346 } 359 }
347 statusVal.value = status; 360 statusVal.value = status;
348 search.value.status = status; 361 search.value.status = status;
349 - proxy.$http.get(`/api-web/bAlarmManage/page`, { 362 + let startTime='';
  363 + let endTime=''
  364 + if(search.value.dateTime && search.value.dateTime.length>0){
  365 + startTime=search.value.dateTime[0];
  366 + endTime=search.value.dateTime[1];
  367 + }
  368 + let params={
350 page: search.value.page, 369 page: search.value.page,
351 limit: search.value.limit, 370 limit: search.value.limit,
352 keyword: search.value.keyword, 371 keyword: search.value.keyword,
353 - status: search.value.status  
354 -  
355 - }, function (res) { 372 + status: search.value.status,
  373 + startTime:startTime,
  374 + endTime:endTime
  375 + }
  376 + proxy.$http.get(`/api-web/bAlarmManage/page`, params, function (res) {
356 if (res && res.data) { 377 if (res && res.data) {
357 tableData.value.dataList = res.data; 378 tableData.value.dataList = res.data;
358 tableData.value.count = res.count; 379 tableData.value.count = res.count;
@@ -409,6 +430,8 @@ export default { @@ -409,6 +430,8 @@ export default {
409 namesR, 430 namesR,
410 rateDataR, 431 rateDataR,
411 setSeries, 432 setSeries,
  433 + dateFocus,
  434 + dateChange,
412 dialog, 435 dialog,
413 hideDialog, 436 hideDialog,
414 search, 437 search,