图片优化

src/views/components/carouselChart.vue

@@ -8,12 +8,12 @@
           bigPicPath.indexOf('nopic') == -1 &&
           bigPicPath.indexOf('videos') == -1
         "
-        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
+        :style="bigPicPath ? 'backgroundImage:url(' + bgbigPath + ')' : ''"
       >
         <!--  @click="handleBigPicbox(bigPicPath)"  -->
         <div
           class="nosee"
-          :style="'backgroundImage:url(' + bigPicPath + ')'"
+          :style="'backgroundImage:url(' + bgbigPath + ')'"
         ></div>
         <div class="bigimgView" v-viewer="OptionssalseImg">
           <img
@@ -234,6 +234,7 @@ export default {
     console.log(this.terminalPhoto);
     this.mediaType = this.terminalPhoto[0].mediaType;
     this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+    this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
     // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
@@ -260,6 +261,7 @@ export default {
   watch: {
     terminalPhoto: function (newVal, oldVal) {
       this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
       this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
       this.total = this.terminalPhoto.length / this.pagesize;
     },
@@ -272,6 +274,7 @@ export default {
         this.bigPicPath = data.substring(0, data.length - 9);
       } else {
         this.bigPicPath = data;
+        this.bgbigPath = data;
       }
 
       console.log(this.bigPicPath);
@@ -344,6 +347,7 @@ export default {
       );
 
       this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
+      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
       this.videopath = this.fiveList[this.activeSmall].thumb;
     },
     //大图点击左侧切换图片
@@ -351,6 +355,7 @@ export default {
       this.bigNum--; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       console.log(this.page);
@@ -378,6 +383,7 @@ export default {
       this.bigNum++; //执行下一张
       this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+      this.bgbigPath = this.terminalPhoto[0].path + "!1366x768";
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       if (this.activeSmall > 4) {
@@ -406,6 +412,7 @@ export default {
       this.activeSmall = index;
       this.mediaType = row.mediaType;
       this.bigPicPath = row.path + "!1366x768";
+      this.bgbigPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
         needPic: "1",
@@ -570,6 +577,9 @@ export default {
         position: absolute;
         z-index: 3;
         opacity: 0;
+        .animImg {
+          opacity: 0;
+        }
       }
       .mark {
         position: absolute;

src/views/realTimeMonitor/index.vue

@@ -466,41 +466,46 @@ export default {
         .then((res) => {
           console.log(res);
           this.channelList = res.data.list;
-          console.log(this.channelList);
-          this.channelOption = [];
-          this.channelList.forEach((item) => {
-            this.channelOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
-            });
-          }); // 选择通道一通道二select框
-          console.log(this.channelOption);
-          this.channelListOption = [];
-          this.channelListOption.push({
-            label: "全部",
-            value: -1,
-            termid: "",
-            alias: "",
-          });
-          this.channelList.forEach((item) => {
+          if (this.channelList.length == 0) {
+            console.log("没有通道");
+            this.getTerminalPhotoList(-1, this.dateValue, this.zztermId); //获取图片列表是传当前设备的 id 和termid
+          } else {
+            console.log(this.channelList);
+            this.channelOption = [];
+            this.channelList.forEach((item) => {
+              this.channelOption.push({
+                label: item.channelname,
+                value: item.channelid,
+                termid: item.termId,
+                alias: item.alias,
+              });
+            }); // 选择通道一通道二select框
+            console.log(this.channelOption);
+            this.channelListOption = [];
             this.channelListOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
+              label: "全部",
+              value: -1,
+              termid: "",
+              alias: "",
             });
-          });
-          this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道
-          this.getTerminalPhotoList(
-            this.selectChannelValue,
-            this.dateValue,
-            this.channelList[0].termId
-          ); //获取图片列表是传当前设备的 id 和termid
-          this.selectDyId = res.data.dyId;
-          this.selectLineId = res.data.lineId;
-          this.selectTowerId = res.data.towerId;
+            this.channelList.forEach((item) => {
+              this.channelListOption.push({
+                label: item.channelname,
+                value: item.channelid,
+                termid: item.termId,
+                alias: item.alias,
+              });
+            });
+            this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道
+            this.getTerminalPhotoList(
+              this.selectChannelValue,
+              this.dateValue,
+              this.channelList[0].termId
+            ); //获取图片列表是传当前设备的 id 和termid
+            this.selectDyId = res.data.dyId;
+            this.selectLineId = res.data.lineId;
+            this.selectTowerId = res.data.towerId;
+          }
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获

src/views/stritl/index.vue

@@ -3,12 +3,12 @@
     <div class="echart-top">
       <el-card class="box-card" v-loading="numloading">
         <h3>装置数量统计</h3>
-        <el-button class="lookBtn" type="primary" @click="handleLook"
+        <!-- <el-button class="lookBtn" type="primary" @click="handleLook"
           >查看</el-button
-        >
+        > -->
         <div class="bottomM">
           <div class="infoBox">
-            <p>
+            <p @click="handleLook">
               <span>装置总数</span>
               <span>{{ termDataNum.totalNum }}</span>
             </p>
@@ -47,11 +47,7 @@
           >
           </el-date-picker>
         </div>
-        <div
-          id="echart3"
-          class="chartClass"
-          :style="`zoom:${zoom};transform:scale(${1});transform-origin:0 0`"
-        ></div>
+        <div id="echart3" class="chartClass"></div>
       </el-card>
       <el-card class="box-card" v-loading="pie2loading">
         <h3>告警类型统计</h3>
@@ -66,11 +62,7 @@
           >
           </el-date-picker>
         </div>
-        <div
-          id="echart4"
-          class="chartClass"
-          :style="`zoom:${zoom};transform:scale(${1});transform-origin:0 0`"
-        ></div>
+        <div id="echart4" class="chartClass"></div>
       </el-card>
     </div>
     <el-dialog
@@ -253,8 +245,11 @@ export default {
             trigger: "item",
           },
           legend: {
-            top: "5%",
-            left: "left",
+            type: "scroll",
+            orient: "vertical",
+            right: 10,
+            top: 20,
+            bottom: 20,
           },
           series: [
             {
@@ -313,10 +308,17 @@ export default {
               type: "shadow",
             },
           },
+          grid: {
+            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
+            top: "10%",
+            left: "10%",
+            right: "10%",
+            bottom: "10%",
+          },
           xAxis: {
             type: "category",
             data: this.weekData.map((x) => {
-              return this.$moment(x.date).format("yy-MM-DD");
+              return this.$moment(x.date).format("MM-DD");
             }),
             axisTick: {
               alignWithLabel: true,
@@ -489,6 +491,12 @@ export default {
             flex-direction: column;
             justify-content: space-around;
             box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            &:first-child {
+              &:hover {
+                cursor: pointer;
+              }
+            }
+
             span {
               color: #333;
               font-size: 16px;