提交修改ui

src/components/Dialog/mapDialog.vue

@@ -71,8 +71,8 @@
                       <ul class="collapse-ul">
                         <li :class="''" v-for="(it, index2) in item.value" :key="it.senid"
                           @click="setTabColor2(it, index, index2)">{{
-        it.sensor_name
-      }}</li>
+                            it.sensor_name
+                          }}</li>
                       </ul>
                     </a-collapse-panel>
                     <!-- <a-collapse-panel key="2" header="4m 灌木层" :style="activeMenu.customStyle">
@@ -119,13 +119,13 @@
                     </div>
                   </div>
                   <div class="tabp-right-query-echarts" id='ebox' v-show="!showNodata" :style="{
-        flex: '1', width: '900px', height: '460px', zoom: `${1 / zooms}`, transform: `scale(${zooms})`, transformOrigin: '0 0'
-      }
-        ">
+                    flex: '1', width: '900px', height: '460px', zoom: `${1 / zooms}`, transform: `scale(${zooms})`, transformOrigin: '0 0'
+                  }
+                    ">
                     <div id="query-echarts" :style="{
-        width: '100%',
-        height: '100%',
-      }">
+                      width: '100%',
+                      height: '100%',
+                    }">
                     </div>
                   </div>
                   <div v-show="showNodata" style="width: 100%; height: 310px; text-align: center">
@@ -154,8 +154,8 @@
                   :style="activeMenu.customStyle">
                   <ul class="collapse-ul">
                     <li v-for="(it, index2) in item" :key="item.id" @click="setTabColor3(it, index, index2)">{{
-        it.img_name
-      }}</li>
+                      it.img_name
+                      }}</li>
                   </ul>
                 </a-collapse-panel>
                 <img v-if="imgtree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
@@ -207,8 +207,8 @@
                   :style="activeMenu.customStyle">
                   <ul class="collapse-ul">
                     <li v-for="(it, index2) in item" :key="item.id" @click="setTabColor4(it, index, index2)">{{
-        it.img_name
-      }}</li>
+                      it.img_name
+                      }}</li>
                   </ul>
                 </a-collapse-panel>
                 <img v-if="videoTree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
@@ -335,7 +335,9 @@ watch(
         // i.type = arr[arr.length - 2]
         let obj = JSON.parse(JSON.stringify(i))
         i.type = obj.img_name
-        i.img_name = arr[arr.length - 1]
+        let urlCopy = arr[arr.length - 1]
+        i.img_name = urlCopy.split('.')[0]
+        console.log(i.img_name)
       })
       imgList.value = arr1
       let obj = {}
@@ -359,7 +361,8 @@ watch(
         // i.type = arr[arr.length - 2]
         let obj = JSON.parse(JSON.stringify(i))
         i.type = obj.img_name
-        i.img_name = arr[arr.length - 1]
+        let urlCopy = arr[arr.length - 1]
+        i.img_name = urlCopy.split('.')[0]
       })
       videoList.value = arr1
       let obj = {}
@@ -654,7 +657,7 @@ function echarts1() {
         for (var i = 0, l = params.length; i < l; i++) {
           console.log('tooltip数据值', params[i].value)
           //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
-          relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
+          relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value
         }
         return relVal;
       },

src/views/meteorological/components/monitorEcharts.vue

@@ -206,7 +206,11 @@ function echarts2() {
         type: 'shadow',
       },
       formatter: function (params) {
+        // console.log('time',params)
         return `<div>
+            <div>
+              时间：${params[0].axisValueLabel}
+            </div>
             <div>
               风速（m/s）：${params[0].data}
             </div>
@@ -236,10 +240,13 @@ function echarts2() {
     legend: {
       // data: ['风速', '风向'],
       data: ['风速'],
+      symbol:'none',
       textStyle: {
         fontSize: 14, //字体大小
         color: '#ffffff', //字体颜色
       },
+      orient:'horizontal',
+      itemHeight:2
       // itemStyle: {
       //   color: '#fff',
       // },
@@ -330,7 +337,34 @@ function echarts2() {
         data: props.windSpeeCharts.data,
         type: 'line',
         smooth: true,
-        symbol: 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z',
+        // symbol: 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z',
+        symbol: function (params) {
+          console.log('params',params)
+          // 设置不同等级的图标
+          let level1 = 'path://M0,0L20,0L20,3L3,3L3,8L3,8L3,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
+          let level2 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
+          let level3 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z'
+          let level4 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z'
+          let level5 = 'path://M0,0L20,0L20,3L3,3L3,8L3,8L3,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
+          let svgData = ''
+          if(params >= 0 && params <=3.3){
+            svgData = level1
+          }
+          if(params >= 3.4 && params <=7.9){
+            svgData = level2
+          }
+          if(params >= 8 && params <=13.8){
+            svgData = level3
+          }
+          if(params >= 13.9 && params <=20.7){
+            svgData = level4
+          }
+          if(params >= 20.8){
+            svgData = level5
+          }
+          return svgData
+          
+        },
         symbolSize: 18,
         symbolRotate: (value, params) => {
           return props.windDirection.data[params.dataIndex] * -1;