fix：大屏联调接口，待验证完善

src/api/xj/screen/disease-screen.js

@@ -35,7 +35,7 @@ export function roadToday(query) {
   });
 }
 
-// 今日巡查弹窗
+// 今日巡查病害弹窗
 export function roadTodayDetail(query) {
   return request({
     url: "/bigscreen/v2/getInspectionDetailInfo",
@@ -90,6 +90,15 @@ export function getMileage(query) {
   });
 }
 
+// 获取巡查里程弹窗数据
+export function getMileageDetail(query) {
+  return request({
+    url: "/bigscreen/v2/getTaskDetailInfo",
+    method: "get",
+    params: query,
+  });
+}
+
 // 获取巡检车辆数据
 export function getCarList(query) {
   return request({

src/api/xj/screen/index.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-24 15:03:28
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 16:13:41
+ * @LastEditTime: 2024-11-18 10:09:30
  * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
  * @Description: 大屏首页接口 
  */
@@ -113,3 +113,11 @@ export function getRoadListTypes() {
     method: "post",
   });
 }
+
+// 获取病害类型筛选级联下拉
+export function getDefectTypes() {
+  return request({
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
+    method: "get",
+  });
+}

src/views/big-screen/disease-components/traffic-safety.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-13 13:39:33
+ * @LastEditTime: 2024-11-18 13:37:03
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
@@ -10,10 +10,10 @@
 <template>
   <div class="content">
     <div class="traffic-left">
-      <span>{{ today }}</span>
+      <span @click="showDialog('today')">{{ today }}</span>
     </div>
     <div class="traffic-right">
-      <div class="right-sum" @click="showDialog">
+      <div class="right-sum" @click="showDialog('')">
         <span>{{ all }}</span
         >个
       </div>
@@ -33,9 +33,45 @@
       @close="screenCancel"
     >
       <div class="today-content">
+        <div class="today-select">
+          <div>
+            <el-select
+              :popper-append-to-body="false"
+              v-model="roadSelect"
+              @change="changeRoad"
+              clearable
+              placeholder="请选择路段"
+            >
+              <el-option
+                v-for="item in roadList"
+                :key="`${item.name}-${item.index}`"
+                :label="item.name"
+                :value="item.name"
+              />
+            </el-select>
+          </div>
+          <div>
+            <el-select
+              :popper-append-to-body="false"
+              v-model="companySelect"
+              clearable
+              @change="changeCompany"
+              placeholder="请选择分公司"
+            >
+              <el-option
+                v-for="item in companyList"
+                :key="`${item.name}-${item.index}`"
+                :label="item.name"
+                :value="item.name"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div class="today-bottom">
           <div ref="leftChart" class="dialog-div"></div>
           <div ref="rightChart" class="dialog-div"></div>
         </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -62,8 +98,20 @@ export default {
       scale: 0,
       // 弹窗显隐控制
       showDialogVisible: false,
+      // 左侧路段选择绑定
+      roadSelect: "",
+      // 左侧路段下拉数据
+      roadList: [],
+      // 左侧图表总数据
+      leftChartList: [],
       // 左侧图表数据
       leftChartData: [],
+      // 右侧公司选择绑定
+      companySelect: "",
+      // 右侧公司选择下拉
+      companyList: [],
+      // 右侧图表总数据
+      rightChartList: [],
       // 右侧图表数据
       rightChartData: [],
     };
@@ -91,18 +139,58 @@ export default {
     },
 
     /* 点击打开弹窗 */
-    showDialog() {
+    showDialog(item) {
-      this.getChartData();
+      this.getChartData(item);
       this.showDialogVisible = true;
     },
 
+    /* 弹窗路段修改事件 */
+    changeRoad(value) {
+      this.leftChartData = this.leftChartList.filter((item) => {
+        if (value) {
+          return item.name === value;
+        }
+        return item;
+      });
+      this.$nextTick(() => {
+        this.drawLeftChart();
+      });
+    },
+
+    /* 弹窗公司修改事件 */
+    changeCompany(value) {
+      this.rightChartData = this.rightChartList.filter((item) => {
+        if (value) {
+          return item.name === value;
+        }
+        return item;
+      });
+      this.$nextTick(() => {
+        this.drawRightChart();
+      });
+    },
+
     /* 请求弹窗数据 */
-    getChartData() {
+    getChartData(item) {
-      roadTodayDetail({ classType: this.bottomTipClick }).then(
+      roadTodayDetail({ classType: this.bottomTipClick, type: item }).then(
         ({ code, data }) => {
           if (code === 200) {
+            this.leftChartList = data[0];
             this.leftChartData = data[0];
+            this.roadList = data[0].map((item, index) => {
+              return {
+                ...item,
+                index: index,
+              };
+            });
+            this.rightChartList = data[1];
             this.rightChartData = data[1];
+            this.companyList = data[1].map((item, index) => {
+              return {
+                ...item,
+                index: index,
+              };
+            });
             this.$nextTick(() => {
               this.drawLeftChart();
               this.drawRightChart();
@@ -268,6 +356,51 @@ export default {
               data: y4Data,
             },
           ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
         });
         window.addEventListener("resize", () => {
           chart.resize();
@@ -424,6 +557,51 @@ export default {
               data: y4Data,
             },
           ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
         });
         window.addEventListener("resize", () => {
           chart.resize();
@@ -461,6 +639,7 @@ export default {
     background-position: 100% 60%;
 
     span {
+      cursor: pointer;
       font-family: "DouYu";
       background: linear-gradient(
         to bottom,
@@ -555,6 +734,81 @@ export default {
   }
 }
 
+// 弹窗内容样式
+.today-content {
+  height: 30rem;
+  display: flex;
+  flex-direction: column;
+
+  .today-select {
+    width: 100%;
+    // height: 10%;
+    display: flex;
+
+    > div {
+      width: 50%;
+      padding: 0 2rem;
+
+      ::v-deep .el-select {
+        width: 12rem;
+
+        .el-input .el-select__caret {
+          line-height: 1.5rem;
+        }
+
+        .el-input--medium .el-input__inner {
+          height: 1.5rem;
+          background-color: transparent;
+          color: #89c5e8;
+          border-color: #6991cd;
+        }
+
+        .el-select-dropdown {
+          background-color: #102649;
+          border-color: #08204f;
+          .el-scrollbar {
+            .el-select-dropdown__wrap {
+              .el-scrollbar__view {
+                .el-select-dropdown__item {
+                  color: #aaabb8;
+                }
+
+                .el-select-dropdown__item:hover {
+                  background-color: #2b4c7e;
+                }
+
+                .el-select-dropdown__item.selected {
+                  background-color: #2b4c7e;
+                }
+
+                .el-select-dropdown__item.hover {
+                  background-color: #2b4c7e;
+                }
+              }
+
+              .el-select-dropdown__list {
+                background-color: #102649;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .today-bottom {
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    .dialog-div {
+      width: 50%;
+      height: 90%;
+      margin: 0 1rem;
+    }
+  }
+}
+
 /* 修改弹窗样式 */
 ::v-deep .el-dialog__header {
   padding: 10px;

src/views/big-screen/disease-components/traffic-statistic.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:06:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-13 13:57:00
+ * @LastEditTime: 2024-11-18 13:47:54
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
  * @Description: 病害巡检大屏-病害统计
 -->
@@ -24,16 +24,21 @@
     </div>
     <div ref="statisticChart" class="statistic-chart"></div>
     <div class="statistic-lenged">
+      <fssm-scroll>
         <div
           class="lenged-item"
           v-for="(item, index) in echartList"
           :key="`static-${index}`"
         >
-        <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
+          <div
+            class="index"
+            :style="{ backgroundColor: colorList[index] }"
+          ></div>
           <div class="name">{{ item.name }}</div>
           <div class="rate">{{ item.rate }}</div>
           <div class="value">{{ item.value }}</div>
         </div>
+      </fssm-scroll>
     </div>
   </div>
 </template>
@@ -42,8 +47,10 @@
 import * as echarts from "echarts";
 import { getDropList } from "@/api/xj/screen/disease-screen";
 import { roadCurrent } from "@/api/xj/screen/traffic-screen";
+import fssmScroll from "@/components/scroll/fssm-scroll.vue";
 export default {
   name: "TrafficStatistic",
+  components: { fssmScroll },
   props: {
     select: {
       type: String,
@@ -72,6 +79,15 @@ export default {
         "#AE74F3",
         "#4C21D5",
         "#6669DB",
+        "#18F7FF",
+        "#6FC36F",
+        "#4C83FF",
+        "#FFEA68",
+        "#FF8F5F",
+        "#FC5976",
+        "#AE74F3",
+        "#4C21D5",
+        "#6669DB",
       ],
       // echart图数据
       echartList: [],
@@ -278,9 +294,11 @@ export default {
   .statistic-lenged {
     width: 50%;
     height: 100%;
+    padding: 2rem 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    overflow: hidden;
     z-index: 0;
 
     .lenged-item {

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 17:40:06
+ * @LastEditTime: 2024-11-18 11:18:49
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -110,25 +110,11 @@
           <!-- 图背景下选择框 -->
           <div class="map-image-select">
             病害类型筛选：
-            <!-- <el-select
-              :popper-append-to-body="false"
-              v-model="mapCareSelect"
-              placeholder="请选择"
-              @change="getMapCare"
-              clearable
-            >
-              <el-option
-                v-for="item in dieaseTypeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select> -->
             <el-cascader
               v-model="mapCareSelect"
               popper-class="screen-index-cascader"
               :options="dieaseOptions"
-              :props="{ checkStrictly: true, emitPath: false }"
+              :props="{checkStrictly:true, emitPath: true, children: 'subTypes' }"
               @change="getMapCare"
               clearable
             ></el-cascader>
@@ -274,6 +260,7 @@ import {
   comppanyImg,
   getItemTypes,
   getRoadListTypes,
+  getDefectTypes,
 } from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
@@ -368,7 +355,6 @@ export default {
       // 图片背景下病害类型下拉选择绑定
       mapCareSelect: "",
       // 图片背景下病害类型下拉选择数据
-      dieaseTypeList: [],
       dieaseOptions: [
         {
           value: "zhinan",
@@ -703,21 +689,26 @@ export default {
 
     /* 获取图片背景左上角病害类型下拉 */
     getDieaseTypeList() {
-      getItemTypes().then(({ code, data }) => {
+      getDefectTypes().then(({ code, data }) => {
         if (code === 200) {
-          this.dieaseTypeList = data;
+          this.dieaseOptions = data;
         }
       });
     },
 
     /* 获取图片背景下坐标数据 */
     getMapCare(value) {
-      console.log(value,this.mapCareSelect, "获取图片背景下坐标数据");
+      const data = {
-      comppanyImg({ type: value }).then(({ code, data }) => {
+        classType: value ? value[0] : "",
+        type: value ? (value.length > 1 ? value[1] : "") : "",
+      };
+      comppanyImg(data).then(
+        ({ code, data }) => {
           if (code === 200) {
             this.mapCareList = data;
           }
-      });
+        }
+      );
     },
 
     /* 点击病害日志详情打开弹窗进行地图打点 */
@@ -986,7 +977,10 @@ export default {
     /* 获取icon多选数据 */
     getIconType() {
       this.mapLogeList = {};
-      getItemTypes({ classType: this.bottomTipClick,type:this.elementDiv }).then(({ code, data }) => {
+      getItemTypes({
+        classType: this.bottomTipClick,
+        type: this.elementDiv,
+      }).then(({ code, data }) => {
         if (code === 200) {
           this.iconTypeList = data;
           this.iconType = data.map((item) => {

src/views/big-screen/overview-components/patrol-order.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:25:29
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-14 16:16:56
+ * @LastEditTime: 2024-11-18 11:44:52
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
  * @Description: 总览大屏-巡查里程
 -->
@@ -35,13 +35,15 @@
         <el-select
           :popper-append-to-body="false"
           v-model="companySelect"
+          @change="changeSelect"
+          clearable
           placeholder="请选择分公司"
         >
           <el-option
             v-for="item in companyList"
-            :key="item.value"
+            :key="`${item.name}-${item.index}`"
-            :label="item.label"
+            :label="item.name"
-            :value="item.value"
+            :value="item.name"
           />
         </el-select>
         <div ref="patrolChart" class="dialog-div"></div>
@@ -52,7 +54,7 @@
   
   <script>
 import * as echarts from "echarts";
-import { getMileage } from "@/api/xj/screen/disease-screen";
+import { getMileage, getMileageDetail } from "@/api/xj/screen/disease-screen";
 export default {
   name: "PatrolOrder",
   data() {
@@ -65,6 +67,8 @@ export default {
       companySelect: "",
       // 公司下拉绑定
       companyList: [],
+      // echart图数据
+      echartData: [],
     };
   },
   created() {
@@ -114,16 +118,50 @@ export default {
       this.getChartData();
     },
 
-    /* 请求弹窗数据 */
+    /* 选择框绑定值修改 */
-    getChartData() {
+    changeSelect(value) {
+      this.echartData = this.echartList.filter((item) => {
+        if (value) {
+          return item.name === value;
+        }
+        return item;
+      });
       this.$nextTick(() => {
         this.drawChart();
       });
     },
 
+    /* 请求弹窗数据 */
+    getChartData() {
+      getMileageDetail().then(({ code, data }) => {
+        if (code === 200) {
+          this.companyList = data.map((item, index) => {
+            return {
+              ...item,
+              index,
+            };
+          });
+          this.echartList = data;
+          this.echartData = data;
+          this.$nextTick(() => {
+            this.drawChart();
+          });
+        }
+      });
+    },
+
     /* 绘制echart图 */
     drawChart() {
       if (this.$refs.patrolChart) {
+        const xData = this.echartData.map((item) => {
+          return item.name;
+        });
+        const y1Data = this.echartData.map((item) => {
+          return item.len;
+        });
+        const y2Data = this.echartData.map((item) => {
+          return item.time;
+        });
         const chart = echarts.init(this.$refs.patrolChart);
         chart.setOption({
           color: [
@@ -219,9 +257,11 @@ export default {
             axisLine: {
               show: false,
             },
-            data: ["dsds", "4ds", "5454", "sff"],
+            data: xData,
           },
-          yAxis: {
+          yAxis: [
+            {
+              name: "单位：km",
               type: "value",
               axisLabel: {
                 color: "rgba(255,255,255,0.65)",
@@ -231,23 +271,39 @@ export default {
                   color: "rgba(255,255,255,0.2)",
                 },
               },
-            name: "单位：个",
               nameTextStyle: {
                 color: "rgba(255,255,255,0.65)",
               },
             },
+            {
+              name: "单位：h",
+              type: "value",
+              axisLabel: {
+                color: "rgba(255,255,255,0.65)",
+              },
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,0.2)",
+                },
+              },
+              nameTextStyle: {
+                color: "rgba(255,255,255,0.65)",
+              },
+            },
+          ],
           series: [
             {
               barWidth: 10,
               name: "巡查里程",
               type: "bar",
-              data: [10, 25, 23, 58],
+              data: y1Data,
             },
             {
               barWidth: 10,
               name: "巡查时长",
               type: "bar",
-              data: [10, 25, 23, 58],
+              data: y2Data,
+              yAxisIndex: 1,
             },
           ],
         });

src/views/big-screen/overview-components/today-inspection.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:42:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-14 15:48:21
+ * @LastEditTime: 2024-11-18 13:36:55
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -10,10 +10,10 @@
 <template>
   <div class="content">
     <div class="today-left">
-      <span @click="showDialog('1')">{{ today }}</span>
+      <span @click="showDialog('today')">{{ today }}</span>
     </div>
     <div class="today-right">
-      <div class="right-sum" @click="showDialog('2')">
+      <div class="right-sum" @click="showDialog('')">
         <span>{{ all }}</span
         >个
       </div>
@@ -38,13 +38,15 @@
             <el-select
               :popper-append-to-body="false"
               v-model="roadSelect"
+              @change="changeRoad"
+              clearable
               placeholder="请选择路段"
             >
               <el-option
                 v-for="item in roadList"
-                :key="item.value"
+                :key="`${item.name}-${item.index}`"
-                :label="item.label"
+                :label="item.name"
-                :value="item.value"
+                :value="item.name"
               />
             </el-select>
           </div>
@@ -52,13 +54,15 @@
             <el-select
               :popper-append-to-body="false"
               v-model="companySelect"
+              clearable
+              @change="changeCompany"
               placeholder="请选择分公司"
             >
               <el-option
                 v-for="item in companyList"
-                :key="item.value"
+                :key="`${item.name}-${item.index}`"
-                :label="item.label"
+                :label="item.name"
-                :value="item.value"
+                :value="item.name"
               />
             </el-select>
           </div>
@@ -85,20 +89,22 @@ export default {
       all: "0",
       // 增长率
       scale: "0",
-      // 新增/当前总数区分
-      clickTip: "",
       // 弹窗显隐控制
       showDialogVisible: false,
       // 左侧路段选择绑定
       roadSelect: "",
       // 左侧路段下拉数据
       roadList: [],
+      // 左侧图表总数据
+      leftChartList: [],
       // 左侧图表数据
       leftChartData: [],
       // 右侧公司选择绑定
       companySelect: "",
       // 右侧公司选择下拉
       companyList: [],
+      // 右侧图表总数据
+      rightChartList: [],
       // 右侧图表数据
       rightChartData: [],
     };
@@ -120,17 +126,56 @@ export default {
 
     /* 点击打开弹窗 */
     showDialog(item) {
-      this.clickTip = item;
+      this.getChartData(item);
-      this.getChartData();
       this.showDialogVisible = true;
     },
 
-    /* 请求弹窗数据 */
+    /* 弹窗路段修改事件 */
-    getChartData() {
+    changeRoad(value) {
-      roadTodayDetail().then(({ code, data }) => {
+      this.leftChartData = this.leftChartList.filter((item) => {
+        if (value) {
+          return item.name === value;
+        }
+        return item;
+      });
+      this.$nextTick(() => {
+        this.drawLeftChart();
+      });
+    },
+
+    /* 弹窗公司修改事件 */
+    changeCompany(value) {
+      this.rightChartData = this.rightChartList.filter((item) => {
+        if (value) {
+          return item.name === value;
+        }
+        return item;
+      });
+      this.$nextTick(() => {
+        this.drawRightChart();
+      });
+    },
+
+    /* 请求病害弹窗数据 */
+    getChartData(item) {
+      roadTodayDetail({ type: item }).then(({ code, data }) => {
         if (code === 200) {
+          this.leftChartList = data[0];
           this.leftChartData = data[0];
+          this.roadList = data[0].map((item, index) => {
+            return {
+              ...item,
+              index: index,
+            };
+          });
+          this.rightChartList = data[1];
           this.rightChartData = data[1];
+          this.companyList = data[1].map((item, index) => {
+            return {
+              ...item,
+              index: index,
+            };
+          });
           this.$nextTick(() => {
             this.drawLeftChart();
             this.drawRightChart();
@@ -295,6 +340,51 @@ export default {
               data: y4Data,
             },
           ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
         });
         window.addEventListener("resize", () => {
           chart.resize();
@@ -443,6 +533,51 @@ export default {
               data: y4Data,
             },
           ],
+          dataZoom: [
+            {
+              // 设置滚动条的隐藏与显示
+              show: false,
+              // 设置滚动条类型
+              type: "slider",
+              // 设置背景颜色
+              backgroundColor: "rgba(225,225,225,0.2)",
+              // 设置选中范围的填充颜色
+              fillerColor: "#ccc",
+              // 设置边框颜色
+              borderColor: "rgba(225,225,225,0.2)",
+              // 是否显示detail，即拖拽时候显示详细数值信息
+              showDetail: false,
+              // 数据窗口范围的起始数值
+              startValue: 0,
+              // 数据窗口范围的结束数值（一页显示多少条数据）
+              endValue: 6,
+              // empty：当前数据窗口外的数据，被设置为空。
+              // 即不会影响其他轴的数据范围
+              filterMode: "empty",
+              // 设置滚动条宽度，相对于盒子宽度
+              width: "80%",
+              // 设置滚动条高度
+              height: 5,
+              // 设置滚动条显示位置
+              left: "center",
+              // 是否锁定选择区域（或叫做数据窗口）的大小
+              zoomLoxk: true,
+              // 控制手柄的尺寸
+              handleSize: 10,
+              // dataZoom-slider组件离容器下侧的距离
+              bottom: 0,
+            },
+            {
+              // 没有下面这块的话，只能拖动滚动条，
+              // 鼠标滚轮在区域内不能控制外部滚动条
+              type: "inside",
+              // 滚轮是否触发缩放
+              zoomOnMouseWheel: false,
+              // 鼠标滚轮触发滚动
+              moveOnMouseMove: true,
+              moveOnMouseWheel: true,
+            },
+          ],
         });
         window.addEventListener("resize", () => {
           chart.resize();
@@ -452,7 +587,10 @@ export default {
 
     /* 关闭 弹窗事件 */
     screenCancel() {
-      this.clickTip = "";
+      this.leftChartList = [];
+      this.leftChartData = [];
+      this.rightChartList = [];
+      this.rightChartData = [];
       this.showDialogVisible = false;
     },
   },