wj-smartcity 集中处理bug提交 信号评价-子页面样式完善优化

wj-smartcity/public/index.html

@@ -191,6 +191,12 @@
         .vjs-modal-dialog {
             display: none !important;
         }
+
+        .el-picker-panel__footer{
+            button:first-child{
+                display: none;
+            }
+        }
     </style>
 </head>
 

wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue

@@ -233,16 +233,16 @@ export default {
     },
     filterTable1() {
       if (this.locationType1 === 'laneSort') {
-        // this.listDataCopy = this.tableData.filter(item => {
-        //   return this.value1.includes(item.laneSort)
-        // })
-        this.listDataCopy = this.tableData
+        this.listDataCopy = this.tableData.filter(item => {
+          return this.value1.includes(item.laneSort)
+        })
+        // this.listDataCopy = this.tableData
         this.renderFilterData1()
       } else {
-        // this.listDataCopy = this.tableData.filter(item => {
-        //   return this.value1.includes(item.fRidDirTranslate)
-        // })
-        this.listDataCopy = this.tableData
+        this.listDataCopy = this.tableData.filter(item => {
+          return this.value1.includes(item.fRidDirTranslate)
+        })
+        // this.listDataCopy = this.tableData
         this.renderFilterData2()
       }
     },

wj-smartcity/src/views/signal/msgs/bottomComponents/eventComp.vue

@@ -36,11 +36,14 @@
         :row-class-name="getRowClassName"
         style="width: 100%;flex:1"
         height="100%">
-      <el-table-column
-          show-overflow-tooltip
-          align="center"
-          label="事件编号">
-        <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>
+<!--      <el-table-column-->
+<!--          show-overflow-tooltip-->
+<!--          align="center"-->
+<!--          label="事件编号">-->
+<!--        <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>-->
+<!--      </el-table-column>-->
+      <el-table-column width="100" align="center" label="事件编号"
+          type="index">
       </el-table-column>
       <el-table-column
           prop="eventType"

wj-smartcity/src/views/signal/msgs/left/cross.vue

@@ -59,7 +59,7 @@
               style="width: 100%"
               height="100%">
             <el-table-column
-                width="60"
+                width="50"
                 align="center"
                 prop="index"
                 label="排名">
@@ -67,6 +67,7 @@
             <el-table-column
                 align="center"
                 prop="name"
+                show-overflow-tooltip
                 label="路口名称">
             </el-table-column>
             <el-table-column
@@ -77,19 +78,19 @@
             </el-table-column>
             <el-table-column
                 align="center"
-                width="80"
+                width="70"
                 label="同比">
               <template slot-scope="scope">
-                {{ Math.abs(scope.row.lastPeriodIndex) }}% <img :src="getDownUpImg(scope.row.lastPeriodIndex)" alt=""/>
+                {{ Math.abs(scope.row.lastPeriodIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastPeriodIndex)" alt=""/>
               </template>
             </el-table-column>
             <el-table-column
                 label="环比"
-                width="80"
+                width="70"
                 align="center"
             >
               <template slot-scope="scope">
-                {{ Math.abs(scope.row.lastWeekIndex) }}% <img :src="getDownUpImg(scope.row.lastWeekIndex)" alt=""/>
+                {{ Math.abs(scope.row.lastWeekIndex) }}% <img style="padding-bottom: 5px;" :src="getDownUpImg(scope.row.lastWeekIndex)" alt=""/>
               </template>
             </el-table-column>
           </el-table>
@@ -295,7 +296,7 @@ export default {
           this.listData = data.abnormalCrossList.sort((a, b) => {
             return Number(b.congestionIndex) - Number(a.congestionIndex)
           }).map((item, index) => {
-            return {index: index + 1, ...item}
+            return {index: index + 1, ...item,}
           }).sort((a, b) => {
             return Number(b.congestionIndex) - Number(a.congestionIndex)
           });

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/evaluationIndicators.vue

@@ -51,18 +51,18 @@
             </el-option>
           </el-select>
         </div>
-        <div class="option"><label class="custom-form-label">当前时段：</label>
-          <el-date-picker class="form3" :clearable="false"
-                          v-model="currentTimes" @change="currentChange"
-                          value-format="yyyy-MM-dd HH:mm:ss"
-                          type="datetimerange">
-          </el-date-picker>
-        </div>
+<!--        <div class="option"><label class="custom-form-label">当前时段：</label>-->
+<!--          <el-date-picker class="form3" :clearable="false"-->
+<!--                          v-model="currentTimes" @change="currentChange"-->
+<!--                          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--                          type="datetimerange">-->
+<!--          </el-date-picker>-->
+<!--        </div>-->
         <div class="option"><label class="custom-form-label">对比时段：</label>
           <el-radio-group @input="compareTimeTypeChange" v-model="compareTimeType">
-            <el-radio :label="1">同比</el-radio>
-            <el-radio :label="2">环比</el-radio>
-            <el-radio :label="3">自定义</el-radio>
+            <el-radio class="custom-radio" :label="1">同比</el-radio>
+            <el-radio class="custom-radio" :label="2">环比</el-radio>
+            <el-radio class="custom-radio" :label="3">自定义</el-radio>
           </el-radio-group>
         </div>
         <div class="option" v-if="compareTimeType===3">
@@ -148,7 +148,7 @@ import {bottomCurve, bottomMenu, crossEvaluate} from "@/common/api/signalEvaluat
 export default {
   name: 'evaluationIndicators',
   components: {TimeConfigProgress, CrossHint},
-  props: ['cross'],
+  props: ['cross','currentTimes'],
   data() {
     return {
       overflowData: [],
@@ -170,7 +170,6 @@ export default {
         {label: '1h', value: 60},
       ],
       timeGranularity: 5, //时间粒度
-      currentTimes: ['', ''],//当前时段
       // 同比 1 环比 2 自定义 3
       compareTimeType: 1,
       compareTimes: ['', ''],//对比时段
@@ -770,43 +769,46 @@ export default {
     },
 
     currentTimeStart() {
-      return this.currentTimes[0]
+      return this.currentTimes[0] || ''
     },
     currentTimeEnd() {
-      return this.currentTimes[1]
+      return this.currentTimes[1] ||''
     },
     compareTimeStart() {
-      if (this.compareTimeType === 3) {
-        return this.compareTimes[0]
-      }
-      // 同比
-      if (this.compareTimeType === 1) {
-        return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
-      }
-      // 环比
-      if (this.compareTimeType === 2) {
-        let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
-        return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
+      if(this.currentTimes[0]){
+        if (this.compareTimeType === 3) {
+          return this.compareTimes[0]
+        }
+        // 同比
+        if (this.compareTimeType === 1) {
+          return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
+        }
+        // 环比
+        if (this.compareTimeType === 2) {
+          let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
+          return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
+        }
       }
+      return ''
     },
     compareTimeEnd() {
-      if (this.compareTimeType === 3) {
-        return this.compareTimes[1]
-      }
-      // 同比
-      if (this.compareTimeType === 1) {
-        return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
-      }
-      // 环比
-      if (this.compareTimeType === 2) {
-        return this.currentTimes[0]
+      if(this.currentTimes[0]){
+        if (this.compareTimeType === 3) {
+          return this.compareTimes[1]
+        }
+        // 同比
+        if (this.compareTimeType === 1) {
+          return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
+        }
+        // 环比
+        if (this.compareTimeType === 2) {
+          return this.currentTimes[0]
+        }
       }
+      return ''
     },
   },
   mounted() {
-    let cur1 = new Date().toLocaleString().replaceAll('/', '-')
-    let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
-    this.$set(this, 'currentTimes', [cur0, cur1])
     this.getSchemeData()
     this.getOverflowEmpty()
     this.getLines()
@@ -1031,6 +1033,10 @@ export default {
   color: rgba(255, 255, 255, 0.8);
 }
 
+::v-deep .custom-radio{
+  margin-right: 15px;
+}
+
 .leftPies {
   width: 250px;
   height: 100%;
@@ -1182,7 +1188,7 @@ export default {
   .option {
     white-space: nowrap;
     overflow: hidden;
-    margin-right: 15px;
+    margin-right: 10px;
   }
 
   .form1 {

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/mutLineChart.vue

@@ -2,14 +2,13 @@
 <template>
   <div class="content-bottom mutLineChart">
     <div class="head">
-      <div class="second-title">
-        <img src="../../../../../assets/images/signal/echarts-title-icon.png" />
-        <span class="title-txt">详细指标查询</span>
+      <div class="second-title">详细指标查询
       </div>
-      <div style="display: flex;">
+      <div class="form-line">
         <div class="select-box">
           <label>范围：</label>
           <el-cascader
+              size="mini"
             v-model="treeModel"
             :options="treeData"
             :props="defaultProps"
@@ -34,7 +33,7 @@
         </div>
         <div class="select-box">
           <label>指标选择：</label>
-          <el-select
+          <el-select size="mini"
             style="width: 280px;"
             v-model="indexModel"
             multiple
@@ -286,10 +285,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
+::v-deep{
+  .el-input__inner{
+    background-color: transparent;
+    border: 1px solid rgba(90,144,238,0.34);
+    color: white;
+  }
+}
 .mutLineChart {
   display: flex;
   flex-direction: column;
   padding: 0 10px 10px 10px;
+  .second-title{
+    height: 36px;
+    width: 100%;
+    background: linear-gradient( 90deg, rgba(17,88,158,0.45) 0%, rgba(17,88,158,0) 100%);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    padding-left: 18px;
+  }
+  .form-line{
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding-left: 50px;
+    .select-box{
+      margin-right: 16px;
+    }
+  }
   .line-chart {
     flex: 1;
     width: 100%;

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/sceneDetail.vue

 <template>
   <div class="scene-detail">
     <div class="head-title">
-      <span class="title">异常事件详情</span>
-      <div>
-        <el-button @click="$emit('update:detailShow', false)">返回</el-button>
+      <span class="title">{{activeObj.crossName}}</span>
+      <div class="el-icon-close" style="color: white" @click="$emit('update:detailShow', false)">
       </div>
     </div>
     <div class="scene-content">
@@ -13,48 +12,33 @@
           <span class="date">{{ detailApiData.startTime }}</span>
         </div>
         <div class="kip-detail">
-          <ul>
-            <li v-if="type === 2">
-              <label>等级：</label
-              ><span class="value">{{ levelObj[detailApiData.level] }}</span>
-            </li>
-            <li>
-              <label>持续时长：</label
-              ><span class="value">{{ detailApiData.duration }}min</span>
-            </li>
-            <li>
-              <label>方向：</label
-              ><span
-                class="value"
-                v-if="detailApiData.dirsName && detailApiData.dirsName.length"
-                >{{ detailApiData.dirsName.join("、") }}</span
-              >
-            </li>
-            <li>
-              <label>配时方案：</label
-              ><span
-                class="value"
-                v-if="
+          <div v-if="type === 2" class="kip-detail-item">
+            <div class="item-name">等级：</div>
+            <div class="item-value">{{ levelObj[detailApiData.level] }}</div>
+          </div>
+          <div class="kip-detail-item">
+            <div class="item-name">持续时长：</div>
+            <div class="item-value">{{ detailApiData.duration }}min</div>
+          </div>
+          <div class="kip-detail-item">
+            <div class="item-name">方向：</div>
+            <div class="item-value" v-if="detailApiData.dirsName && detailApiData.dirsName.length">{{ detailApiData.dirsName.join("、") }}</div>
+          </div>
+          <div class="kip-detail-item">
+            <div class="item-name">配时方案：</div>
+            <div class="item-value" v-if="
                   detailApiData.patternNames &&
                     detailApiData.patternNames.length
-                "
-                >{{ detailApiData.patternNames.join("、") }}</span
-              >
-            </li>
-            <li>
-              <label>路口服务水平：</label
-              ><span class="value">{{ detailApiData.serviceLevel }}</span>
-            </li>
-            <li
-              v-for="(item, index) in detailApiData.overallMetricsList"
-              :key="index"
-            >
-              <label>{{ item.metricName }}：</label
-              ><span class="value"
-                >{{ item.metricValue }}{{ item.metricUnit }}</span
-              >
-            </li>
-          </ul>
+                ">{{ detailApiData.patternNames.join("、") }}</div>
+          </div>
+          <div class="kip-detail-item">
+            <div class="item-name">路口服务水平：</div>
+            <div class="item-value">{{ detailApiData.serviceLevel }}</div>
+          </div>
+          <div class="kip-detail-item" v-for="(item, index) in detailApiData.overallMetricsList" :key="index">
+            <div class="item-name">{{ item.metricName }}：</div>
+            <div class="item-value">{{ item.metricValue }}{{ item.metricUnit }}</div>
+          </div>
         </div>
       </div>
       <div class="right-box">
@@ -255,6 +239,7 @@ export default {
   computed:{
   },
   mounted() {
+    console.log('this.activeObj',this.activeObj)
     if (this.type === 2) {
       this.dateModel = this.detailData.name.split("isCongestion")[0];
     } else if (this.type === 1) {
@@ -267,6 +252,7 @@ export default {
   },
   methods: {
     getDetailKip() {
+      console.log('getDetailKip hourMinute',this.detailData.xName)
       abnormalDetail({
         crossId: this.activeObj.crossId,
         hourMinute: this.detailData.xName,
@@ -285,6 +271,16 @@ export default {
           // 获取日期部分
           this.dayModel = formatDate(dateTime);
           // this.dayModel = dateTime.toISOString().split("T")[0];
+          this.detailApiData.overallMetricsList = this.detailApiData.overallMetricsList.map(item => {
+            // todo 绿灯有效利用率如果为负值 设置为 ‘--’
+            if(item.metricCode === '7'){
+              if(item.metricValue < 0){
+                item.metricValue = ''
+                item.metricUnit = '--'
+              }
+            }
+            return item
+          })
           this.tbodyData = this.detailApiData.overallMetricsList.map((item) => {
             return {
               name: item.metricName,
@@ -326,6 +322,7 @@ export default {
       } else if (type === "lane") {
         api = metricsLane;
       }
+      console.log('api hourMinute',this.timeModel)
       api({
         crossId: this.activeObj.crossId,
         day: this.dayModel,
@@ -438,8 +435,13 @@ export default {
 <style lang="less" scoped>
 .scene-detail {
   height: 100%;
-  border: 1px solid #ccc;
+  width: 100%;
+  z-index: 999;
   color: white;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: #0f2645;
   .time-line {
     margin-top: 10px;
     height: 20px;
@@ -454,14 +456,19 @@ export default {
   .head-title {
     display: flex;
     align-items: center;
-    height:50px;
+    height:43px;
     padding: 0 20px;
     justify-content: space-between;
+    background: linear-gradient( 59deg, #0E8DED 0%, #044D85 100%);
+    border-image: linear-gradient(140deg, rgba(64, 191, 255, 1), rgba(166, 221, 255, 1), rgba(0, 157, 255, 1), rgba(0, 146, 237, 1)) 1 1;
     color: white;
-    border-bottom: 1px solid #ccc;
     width: 100%;
-    .el-button {
-      margin-right: 20px;
+    .el-icon-close{
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .el-icon-close:hover{
+      color:rgba(255,255,255,0.7)
     }
     .title {
       font-size: 20px;
@@ -480,7 +487,7 @@ export default {
       margin: 0 auto;
       width: 400px;
       height: calc(100% - 30px);
-      background: #fff !important;
+      background: transparent !important;
       /deep/.type-box {
         display: none;
       }
@@ -491,14 +498,14 @@ export default {
       width: 100%;
       height: calc(100% - 30px);
       .cross-detail {
-        width: 220px;
-        height: 120px;
+        width: 228px;
+        height: 48%;
         overflow: auto;
         // width: 128px;
         position: absolute;
         border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        background: #eaf1ff;
+        border: 1px solid rgba(31,147,255,0.16);
+        background: #0c3257;
         table {
           width: 100%;
           height: calc(100% - 25px);
@@ -508,10 +515,11 @@ export default {
             text-align: center;
             th,
             td {
+              text-align: center;
               min-width: 30px;
               // padding-left: 10px;
               font-size: 12px;
-              color: black;
+              //color: black;
             }
             th:nth-child(1) {
               width: 110px;
@@ -538,16 +546,21 @@ export default {
         .title {
           display: flex;
           background: rgba(46, 119, 255, 0.1);
-          font-size: 16px;
+          font-size: 14px;
           text-align: center;
-          color: #333;
-          font-weight: bold;
+          height: 24px;
+          //color: #333;
+
           .title-item {
             cursor: pointer;
-            flex: 1;
-            background: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50%;
+            background: #114e89;
             &.active {
-              background: #eaf1ff;
+              background: #1f93ff;
+              font-weight: bold;
             }
           }
         }
@@ -559,21 +572,20 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: calc(100% - 50px - 200px);
-    padding: 10px;
+    height: calc(100% - 43px - 300px);
+    padding: 20px;
 
     .left-box {
       height: 100%;
-      width: 500px;
+      width: 373px;
+      margin-right: 10px;
       .kip-bg {
-        height: 60px;
+        height: 72px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        background: rgba(46, 119, 255, 0.15);
-        border: 1px solid rgba(24, 144, 255, 1);
-        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+        background: linear-gradient( 180deg, #0E8DED 0%, #044D85 100%);
         .name {
           margin-bottom: 5px;
           font-weight: bold;
@@ -581,12 +593,34 @@ export default {
           color: white;
         }
         .date {
-          font-size: 16px;
-          color: white;
+          font-size: 14px;
+          color: rgba(255,255,255,0.7);
         }
       }
       .kip-detail {
-        height: calc(100% - 60px);
+        height: calc(100% - 72px);
+        overflow: auto;
+        padding: 10px;
+        background-color: #0d2d51;
+
+        .kip-detail-item{
+          height: 36px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          .item-name{
+            width: 50%;
+            color: rgba(255,255,255,0.7);
+            text-align: right;
+          }
+          .item-value{
+            width: 50%;
+            color: white;
+          }
+        }
+        .kip-detail-item:nth-child(odd){
+          background-color: #0c375d;
+        }
         //margin: 30px 0 10px 30px;
         .select-box,
         p,
@@ -616,7 +650,7 @@ export default {
       }
     }
     .right-box {
-      width: 900px;
+      flex: 1;
       height: 100%;
       .number-data {
         font-size: 16px;
@@ -638,7 +672,8 @@ export default {
     }
   }
   .content-bottom{
-    height: 200px;
+    height: 300px;
+    padding: 0 20px 20px 20px;
   }
 }
 </style>

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/signalControl.vue

@@ -133,12 +133,12 @@ export default {
             fontSize: getFontSize(16),
             color: "#999999",
           },
-          splitArea: {
-            show: true,
-            areaStyle:{
-              color:['rgba(4, 32, 61,0.5)','rgba(12,64,116,0.5)'],
-            }
-          },
+          // splitArea: {
+          //   show: true,
+          //   areaStyle:{
+          //     color:['rgba(4, 32, 61,0.5)','rgba(12,64,116,0.5)'],
+          //   }
+          // },
         },
         visualMap: {
           show: false,
@@ -151,7 +151,7 @@ export default {
           calculable: true,
           right: "7%",
           top: "0",
-          color: ["gray", "#d43030", "#ff9121"],
+          color: ["#0084ff", "#d43030", "#ff9121"],
         },
         series: [
           {

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/sceComponents/timeline.vue

@@ -91,6 +91,7 @@ export default {
       }
       this.currentTimeIndex = index;
       const timeStamp = this.timeList[index].timeStamp;
+      const time = this.timeList[index].time;
       // const time = new Date(
       //   new Date().getTime() -
       //     (this.timeList.length - index - 1) * 5 * 60 * 1000
@@ -98,7 +99,7 @@ export default {
       if (this.timeData.length) {
         this.$emit("time-selected", this.timeList[index].time);
       } else {
-        this.$emit("time-selected", timeStamp);
+        this.$emit("time-selected", time);
       }
     },
   },
@@ -109,11 +110,12 @@ export default {
 .time-axis-container {
   position: relative;
   height: 50px;
-  border-top: 1px solid #ccc;
+  border-top: 1px dashed rgba(118, 203, 255, 1);
   i {
     position: absolute;
     right: -8px;
-    top: -6px;
+    top: -7px;
+    color: rgba(118, 203, 255, 1);
   }
 }
 

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/scenarioEvaluation.vue

 <!-- 场景评价 -->
 <template>
   <div class="sceneOp">
-    <template v-if="!detailShow">
+    <template >
       <div class="sceneOp-content" :key="refresh">
         <div class="leftChart" >
 <!--          <div class="second-title">-->
@@ -40,7 +40,7 @@
         :type="type"
         :detailShow.sync="detailShow"
         :detailData="detailData"
-        v-else
+        v-if="detailShow"
     ></sceneDetail>
   </div>
 </template>
@@ -82,19 +82,19 @@ export default {
     signalControl: (resolve) => require(["./sceComponents/signalControl.vue"], resolve), // 路口,
   },
   mounted() {
-    // if (signalEvaluationStartTime && signalEvaluationEndTime) {
-    //   this.dateModel = [
-    //     new Date(signalEvaluationStartTime),
-    //     new Date(signalEvaluationEndTime),
-    //   ];
-    // } else {
-    this.dateModel = [
-      new Date(
-          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
-      ),
-      new Date(),
-    ];
-    // }
+    if (time_config.signalEvaluation_crossSceneTime) {
+      this.dateModel = [
+        new Date(time_config.signalEvaluation_crossSceneTime[0]),
+        new Date(time_config.signalEvaluation_crossSceneTime[1])
+      ];
+    } else {
+      this.dateModel = [
+        new Date(
+            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
+        ),
+        new Date()
+      ];
+    }
     this.init();
   },
   methods: {

wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/topIndexes.vue

@@ -69,7 +69,7 @@ import {crossEvaluate} from "@/common/api/signalEvaluation";
 
 export default {
   name: 'topIndexes',
-  props:['cross'],
+  props:['cross','currentTimes'],
   data(){
     return {
       indexes: {}
@@ -91,8 +91,8 @@ export default {
       let date = new Date().toLocaleDateString().replaceAll('/','-')
       crossEvaluate({
         crossId: this.cross.crossId,
-        startDate: date,
-        endDate: date
+        startDate: this.currentTimes[0],
+        endDate: this.currentTimes[1]
       }).then(res=>{
         this.indexes = res.data.content
       })

wj-smartcity/src/views/signalEvaluation/rightIndex/crossIndexes.vue

 <template>
-  <msg-card long :title="cross.crossName">
-    <top-indexes :cross="cross" class="full-w topIndex"/>
+  <msg-card style="position: relative" long :title="cross.crossName">
+    <div class="option"><label class="custom-form-label">当前时段：</label>
+      <el-date-picker class="form3" :clearable="false"
+                      v-model="currentTimes" @change="currentChange"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      type="datetimerange">
+      </el-date-picker>
+    </div>
+    <top-indexes v-if="currentTimes[0]" :currentTimes="currentTimes" :cross="cross" class="full-w topIndex"/>
     <div class="full-w bottomTab">
       <div class="tabTitle">
         <div :class="{'active':activeTab==='1'}" @click="activeTab='1'">评价指标</div>
         <div :class="{'active':activeTab==='2'}" @click="activeTab='2'">场景评价</div>
       </div>
       <div class="tabContent">
-        <evaluation-indicators :cross="cross" v-if="activeTab==='1'"/>
+        <evaluation-indicators :key="refreshComp" :currentTimes="currentTimes" :cross="cross" v-if="activeTab==='1' && currentTimes[0]"/>
         <scenario-evaluation :cross="cross" v-else/>
       </div>
     </div>
@@ -24,22 +31,68 @@ export default {
   name: 'crossIndexes',
   components: {ScenarioEvaluation, EvaluationIndicators, TopIndexes, MsgCard},
   props: ['cross'],
+  computed:{
+    refreshComp(){
+      return `${this.currentTimes[0]}-${this.currentTimes[1]}`
+    }
+  },
   data(){
     return{
-      activeTab: '1'
+      activeTab: '1',
+      currentTimes: ['', ''],//当前时段
     }
+  },
+  mounted() {
+    let cur1 = new Date().toLocaleString().replaceAll('/', '-')
+    let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
+    this.$set(this, 'currentTimes', [cur0, cur1])
+  },
+  methods:{
+    // 当前时间变化
+    currentChange(e) {
+      let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth() + 1}${new Date(this.currentTimes[0]).getDate()}`
+      let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth() + 1}${new Date(this.currentTimes[1]).getDate()}`
+      if (start !== end) {
+        this.$message.warning('不允许跨天查询，请重新选择时间！')
+      } else {
+        // this.getLines()
+        // this.getOverflowEmpty()
+      }
+    },
   }
 
 }
 </script>
 
 <style lang="less" scoped>
+.option{
+  padding-left: 10px;
+  height: 30px;
+}
+::v-deep .el-radio__inner {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+::v-deep .el-radio__label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+::v-deep .el-input__inner {
+  background-color: transparent;
+  border: 1px solid #04376a;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+::v-deep .el-range-input {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.8);
+}
 .topIndex{
   height: 130px;
   margin-bottom: 10px;
 }
 .bottomTab{
-  height: calc(100% - 140px);
+  height: calc(100% - 140px - 30px);
   .tabTitle{
     display: flex;
     height: 30px;