fix：首页联调，更换logo

public/index.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/api/xj/index/index.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-15 11:05:34
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 11:18:36
+ * @LastEditTime: 2024-11-18 17:36:08
  * @FilePath: \znxjxt-ui\src\api\xj\index\index.js
  * @Description: 内部首页接口
  */
@@ -26,3 +26,50 @@ export function getTaskToday(query) {
     params: query,
   });
 }
+
+// 获取病害识别数据
+export function getDefectLog(query) {
+  return request({
+    url: "/xj/home/getDefectLog",
+    method: "get",
+    params: query,
+  });
+}
+
+
+// 获取公路资产数据
+export function getEquipment(query) {
+  return request({
+    url: "/xj/home/getEquipment",
+    method: "get",
+    params: query,
+  });
+}
+
+// 获取公路资产常数统计数据
+export function getEquipmentLog(query) {
+  return request({
+    url: "/xj/home/getEquipmentAnomalyLog",
+    method: "get",
+    params: query,
+  });
+}
+
+// 获取路况评定数据
+export function getRoadCondition(query) {
+  return request({
+    url: "/xj/home/getRoadConditionAssessment",
+    method: "get",
+    params: query,
+  });
+}
+
+
+// 获取数据栏右上角选择数据接口
+export function selectTypeList(query) {
+  return request({
+    url: "/bigscreen/getSwitch",
+    method: "get",
+    params: query,
+  });
+}

src/views/index-components/daily-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:12:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 11:37:11
+ * @LastEditTime: 2024-11-18 16:53:33
  * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
  * @Description: 首页-日常巡查
 -->
@@ -30,7 +30,7 @@
       </div>
       <div class="right">
         <div ref="trendChart"></div>
-        <div ref="distributionChart">图表2</div>
+        <div ref="distributionChart"></div>
       </div>
     </div>
   </div>
@@ -76,6 +76,7 @@ export default {
           this.mileage = data.xclc;
           this.roadNum = data.fgdlts;
           this.diseaseChart = data.xclcbhqs;
+          this.roadChart = data.dlxzbhfb;
           this.$nextTick(() => {
             // this.drawLeftChart();
             this.drawTrendChart();
@@ -90,9 +91,12 @@ export default {
       const xData = this.diseaseChart.map((item) => {
         return item.label;
       });
-      const yData = this.diseaseChart.map((item) => {
+      const y1Data = this.diseaseChart.map((item) => {
         return item.value;
       });
+      const y2Data = this.diseaseChart.map((item) => {
+        return item.long;
+      });
       if (this.$refs.trendChart) {
         const chart = echarts.init(this.$refs.trendChart);
         chart.setOption({
@@ -179,14 +183,14 @@ export default {
               type: "bar",
               barWidth: 10,
               name: "累计病害",
-              data: yData,
+              data: y1Data,
             },
             {
               type: "line",
               symbolSize: 5,
               name: "巡查里程",
               smooth: 1,
-              data: [10, 40, 50, 90, 10, 20, 23, 54, 65, 86, 54, 48, 95],
+              data: y2Data,
               yAxisIndex: 1,
             },
           ],
@@ -244,26 +248,10 @@ export default {
 
     /* 绘制病害分布柱状图 */
     drawDistributionChart() {
-      const xData = [
+      const xData = this.roadChart.map((item) => {
-        { name: "G1", value: 10 },
+        return item.label;
-        { name: "G11", value: 12 },
-        { name: "G25", value: 10 },
-        { name: "G91", value: 30 },
-        { name: "G1113", value: 20 },
-        { name: "S2", value: 50 },
-        { name: "S20", value: 30 },
-      ].map((item) => {
-        return item.name;
       });
-      const yData = [
+      const yData = this.roadChart.map((item, index) => {
-        { name: "G1", value: 10 },
-        { name: "G11", value: 12 },
-        { name: "G25", value: 10 },
-        { name: "G91", value: 30 },
-        { name: "G1113", value: 20 },
-        { name: "S2", value: 50 },
-        { name: "S20", value: 30 },
-      ].map((item, index) => {
         if (index % 2 == 0) {
           return {
             ...item,
@@ -286,13 +274,6 @@ export default {
       if (this.$refs.distributionChart) {
         const chart = echarts.init(this.$refs.distributionChart);
         chart.setOption({
-          dataZoom: [
-            {
-              type: "inside",
-              start: 0,
-              end: 100,
-            },
-          ],
           title: [
             // 中心比例
             {
@@ -321,7 +302,16 @@ export default {
               axisTick: {
                 show: false, //隐藏X轴刻度
               },
-              axisLabel: { color: "#A2B0B8" },
+              axisLabel: {
+                interval: 0,
+                color: "#A2B0B8",
+                formatter: (params) => {
+                  if (params.length > 5) {
+                    return `${params.slice(0, 5)}...`;
+                  }
+                  return params;
+                },
+              },
               axisLine: {
                 lineStyle: {
                   color: "#3C6579",
@@ -361,6 +351,51 @@ export default {
               data: yData,
             },
           ],
+          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();
@@ -491,7 +526,10 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        border-bottom: 1px #adc6e5 solid;
+
+        &:nth-child(1) {
+          border-bottom: 1px #adc6e5 solid;
+        }
 
         .name {
           font-size: 0.8rem;

src/views/index-components/disease-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:17:58
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-07 11:35:42
+ * @LastEditTime: 2024-11-18 17:04:51
  * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
  * @Description: 首页-病害识别
 -->
@@ -52,6 +52,8 @@
   <script>
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 import * as echarts from "echarts";
+// 接口
+import { getDefectLog } from "@/api/xj/index/index";
 export default {
   name: "DiseaseIndex",
   components: {
@@ -63,6 +65,8 @@ export default {
       diseaseType: "",
       // 下拉框数据
       diseaseOptions: [],
+      // 新增病害统计数据
+      statisticsData: [],
       // 病害类型颜色盘
       distributionColor: [
         "#3678FF",
@@ -86,6 +90,15 @@ export default {
   methods: {
     /* 获取echart图数据 */
     getChartData() {
+      getDefectLog().then(({ code, data }) => {
+        if (code === 200) {
+          this.statisticsData = data;
+          this.$nextTick(() => {
+            this.drawStatisticsChart();
+            this.drawDistributionChart();
+          });
+        }
+      });
       this.distributionList = [
         {
           value: 15461,
@@ -118,14 +131,16 @@ export default {
           rate: "10%",
         },
       ];
-      this.$nextTick(() => {
-        this.drawStatisticsChart();
-        this.drawDistributionChart();
-      });
     },
     /* 绘制新增病害统计echart图 */
     drawStatisticsChart() {
       if (this.$refs.statisticsChart) {
+        const xData = this.statisticsData.map((item) => {
+          return item.label;
+        });
+        const yData = this.statisticsData.map((item) => {
+          return item.value;
+        });
         const chart = echarts.init(this.$refs.statisticsChart);
         chart.setOption({
           color: ["#388BD8", "#FFC400"],
@@ -156,7 +171,7 @@ export default {
           xAxis: [
             {
               type: "category",
-              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              data: xData,
               axisTick: {
                 show: false, //隐藏X轴刻度
               },
@@ -196,7 +211,52 @@ export default {
               type: "line",
               symbolSize: 5,
               smooth: 1,
-              data: [400, 600, 1400, 1700],
+              data: yData,
+            },
+          ],
+          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,
             },
           ],
         });

src/views/index-components/road-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:23:44
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-06 10:48:26
+ * @LastEditTime: 2024-11-18 17:45:39
  * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
  * @Description: 首页-公路资产
 -->
@@ -19,15 +19,17 @@
       >个
     </div>
     <div class="middle-div">
-      <div
+      <fssm-scroll class="scroll-div">
-        class="middle-item"
+        <div
-        :class="`middle-item-${index}`"
+          class="middle-item"
-        v-for="(item, index) in middleList"
+          :class="`middle-item-${index}`"
-        :key="`middle-item-${index}`"
+          v-for="(item, index) in middleList"
-      >
+          :key="`middle-item-${index}`"
-        <span>{{ item.name }}</span>
+        >
-        <span>{{ item.value }}</span>
+          <span>{{ item.label }}</span>
-      </div>
+          <span>{{ item.value }}</span>
+        </div>
+      </fssm-scroll>
     </div>
     <div class="road-chart" ref="roadChart"></div>
   </div>
@@ -35,7 +37,11 @@
   
   <script>
 import * as echarts from "echarts";
+// 接口
+import { getEquipment, getEquipmentLog } from "@/api/xj/index/index";
+import fssmScroll from "../../components/scroll/fssm-scroll.vue";
 export default {
+  components: { fssmScroll },
   name: "RoadIndex",
   data() {
     return {
@@ -43,39 +49,53 @@ export default {
       roadNum: [],
       // 中间循环数据
       middleList: [],
+      // 下方echart图数据
+      roadChartData: [],
     };
   },
   created() {
-    this.getData();
+    this.getTopData();
+    this.getBottomData();
   },
   methods: {
-    /* 获取数据 */
+    /* 获取顶端数据 */
-    getData() {
+    getTopData() {
-      this.roadNum = ["0", "0", "6", "7"];
+      getEquipment().then(({ code, data }) => {
-      this.middleList = [
+        if (code === 200) {
-        // { name: "信号灯", value: 5002 },
+          this.roadNum = String(data.count).split("");
-        { name: "路锥", value: 5002 },
+          this.middleList = data.sacle;
-        { name: "警示杆", value: 5002 },
+        }
-        { name: "防撞桶", value: 5002 },
-        // { name: "斑马线", value: 5002 },
-        { name: "里程碑", value: 5002 },
-        { name: "交通杆件", value: 5002 },
-        { name: "龙门架", value: 5002 },
-      ];
-      this.$nextTick(() => {
-        this.drawRoadChart();
       });
     },
+
+    /* 获取底部echart数据 */
+    getBottomData() {
+      getEquipmentLog().then(({ code, data }) => {
+        if (code === 200) {
+          this.roadChartData = data;
+          this.$nextTick(() => {
+            this.drawRoadChart();
+          });
+        }
+      });
+    },
+
     /* 绘制echart图 */
     drawRoadChart() {
       if (this.$refs.roadChart) {
+        const xData = this.roadChartData.map((item) => {
+          return item.label;
+        });
+        const y1Data = this.roadChartData.map((item) => {
+          return item.value;
+        });
         const chart = echarts.init(this.$refs.roadChart);
         chart.setOption({
           color: ["#388BD8", "#04DAD7"],
           title: [
             // 中心比例
             {
-              text: "常数统计",
+              text: "路产趋势",
               x: "1%",
               y: "1%",
               textStyle: {
@@ -99,7 +119,7 @@ export default {
           xAxis: [
             {
               type: "category",
-              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              data: xData,
               axisTick: {
                 show: false, //隐藏X轴刻度
               },
@@ -113,7 +133,6 @@ export default {
               splitLine: {
                 show: true,
               },
-              boundaryGap: false,
             },
           ],
           yAxis: [
@@ -137,41 +156,70 @@ export default {
           series: [
             {
               name: "路产总数",
-              type: "line",
+              type: "bar",
-              showSymbol: false,
+              barWidth: 20,
-              smooth: true,
+              itemStyle: {
-              areaStyle: {
+                borderWidth: 1,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                borderRadius: [3, 3, 0, 0],
-                  {
+                color: "#388BD8",
-                    offset: 0,
-                    color: "#388BD8",
-                  },
-                  {
-                    offset: 1,
-                    color: "#ffffff",
-                  },
-                ]),
               },
-              data: [400, 600, 1400, 1700],
+              data: y1Data,
             },
             {
               name: "异常设施数量",
-              type: "line",
+              type: "bar",
-              showSymbol: false,
+              barWidth: 20,
-              smooth: true,
+              itemStyle: {
-              areaStyle: {
+                borderWidth: 1,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                borderRadius: [3, 3, 0, 0],
-                  {
+                color: "#38C8D8",
-                    offset: 0,
-                    color: "#04DAD7",
-                  },
-                  {
-                    offset: 1,
-                    color: "#ffffff",
-                  },
-                ]),
               },
-              data: [40, 500, 1500, 700],
+              data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
+            },
+          ],
+          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,
             },
           ],
         });
@@ -230,17 +278,21 @@ export default {
   .middle-div {
     width: 100%;
     height: 30%;
-    display: flex;
+
-    flex-direction: row;
+    .scroll-div {
-    flex-wrap: wrap;
+      display: flex;
-    justify-content: space-around;
+      flex-direction: row;
-    align-items: flex-end;
+      flex-wrap: wrap;
+      justify-content: space-around;
+      align-items: flex-end;
+    }
 
     .middle-item {
       // width: 24%;
       width: 28%;
       height: 40%;
       padding: 0 0.5rem 0 3.5rem;
+      margin: 0.4rem 0;
       display: flex;
       align-items: center;
       justify-content: space-between;

src/views/index-components/traffic-index.vue

@@ -2,22 +2,39 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:30:35
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-07 11:29:32
+ * @LastEditTime: 2024-11-18 17:16:45
  * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
  * @Description: 首页-路况评定
 -->
 
 <template>
   <div class="content">
-    <div class="title">路况评定</div>
+    <div class="title">
+      <span>路况评定</span>
+      <div class="title-select">
+        <el-radio-group v-model="itemSelect" size="mini" @change="changeRadio">
+          <el-radio-button
+            v-for="(item, index) in selectTypeArr"
+            :label="item.value"
+            :key="`left-screen-${index}`"
+            >{{ item.label }}</el-radio-button
+          >
+        </el-radio-group>
+      </div>
+    </div>
     <div class="traffic-table">
       <el-table :data="trafficTableData" style="width: 100%" height="180">
         <el-table-column type="index" label="序号"></el-table-column>
-        <el-table-column prop="date" label="路线名称"> </el-table-column>
+        <el-table-column prop="name" show-overflow-tooltip label="名称">
-        <el-table-column prop="name" label="路面病害数"> </el-table-column>
+        </el-table-column>
-        <el-table-column prop="pci" label="交安病害数"> </el-table-column>
+        <el-table-column prop="roadPerKm" label="路面病害数(个/km)">
-        <el-table-column prop="name" label="桥隧病害数"> </el-table-column>
+        </el-table-column>
-        <el-table-column prop="name" label="绿化病害数" > </el-table-column>
+        <el-table-column prop="eventPerKm" label="交安病害数(个/km)">
+        </el-table-column>
+        <el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
+        </el-table-column>
+        <el-table-column prop="greenPerKm" label="绿化病害数(个/km)">
+        </el-table-column>
       </el-table>
     </div>
     <div class="traffic-chart" ref="trafficChart"></div>
@@ -26,39 +43,49 @@
   
 <script>
 import * as echarts from "echarts";
+// 接口
+import { getRoadCondition, selectTypeList } from "@/api/xj/index/index";
 export default {
   name: "TrafficIndex",
   data() {
     return {
+      // 右上角单选择框
+      selectTypeArr: [],
+      // 右上角选择框绑定
+      itemSelect: "",
       // 路况表格数据
       trafficTableData: [],
     };
   },
   created() {
     this.getTableData();
+    this.getSelect();
   },
   methods: {
+    /* 获取数据栏右上角选项数据 */
+    getSelect() {
+      selectTypeList().then(({ code, data }) => {
+        if (code === 200) {
+          this.selectTypeArr = data;
+        }
+      });
+    },
+
+    /* 右上角单选改变事件 */
+    changeRadio(){
+      this.getTableData()
+    },
+
     /* 获取表格数据 */
     getTableData() {
-      this.trafficTableData = [
+      getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
-        {
+        if (code === 200) {
-          date: "S225",
+          console.log(data, "ggg");
-          name: "99.52",
+          this.trafficTableData = data;
-          pci: "优",
+          this.$nextTick(() => {
-        },
+            this.drawTrafficChart();
-        {
+          });
-          date: "G107",
+        }
-          name: "98.6",
-          pci: "优",
-        },
-        {
-          date: "G105",
-          name: "100",
-          pci: "优",
-        },
-      ];
-      this.$nextTick(() => {
-        this.drawTrafficChart();
       });
     },
     /* 绘制柱状图 */
@@ -66,6 +93,7 @@ export default {
       if (this.$refs.trafficChart) {
         const chart = echarts.init(this.$refs.trafficChart);
         chart.setOption({
+          color: ["#388BD8", "#04DAD7"],
           dataZoom: [
             {
               type: "inside",
@@ -76,7 +104,7 @@ export default {
           title: [
             // 中心比例
             {
-              text: "路产趋势",
+              text: "病害趋势",
               x: "1%",
               y: "1%",
               textStyle: {
@@ -126,6 +154,7 @@ export default {
               splitLine: {
                 show: false,
               },
+              boundaryGap: false,
             },
           ],
           yAxis: [
@@ -147,25 +176,41 @@ export default {
           series: [
             {
               name: "路产总数",
-              type: "bar",
+              type: "line",
-              barWidth: 20,
+              showSymbol: false,
-              itemStyle: {
+              smooth: true,
-                borderWidth: 1,
+              areaStyle: {
-                borderRadius: [3, 3, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                color: "#388BD8",
+                  {
+                    offset: 0,
+                    color: "#388BD8",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
               },
-              data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
+              data: [400, 600, 1400, 1700, 400, 600, 400, 600, 1400, 1700],
             },
             {
               name: "异常设施数量",
-              type: "bar",
+              type: "line",
-              barWidth: 20,
+              showSymbol: false,
-              itemStyle: {
+              smooth: true,
-                borderWidth: 1,
+              areaStyle: {
-                borderRadius: [3, 3, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                color: "#38C8D8",
+                  {
+                    offset: 0,
+                    color: "#04DAD7",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
               },
-              data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
+              data: [40, 500, 1500, 700, 40, 500, 40, 500, 1500, 700],
             },
           ],
         });
@@ -189,11 +234,15 @@ export default {
     height: 10%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding-left: 3rem;
-    font-family: "DouYu";
     background: url("../../assets/index/div-title.png") no-repeat;
     background-size: 5%;
     background-position: 0 30%;
+
+    > span {
+      font-family: "DouYu";
+    }
   }
 
   .traffic-table {

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 17:06:46
+ * @LastEditTime: 2024-11-18 15:06:35
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
@@ -43,11 +43,13 @@
   </div>
 </template>
 <script>
+// 组件
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 import DailyIndex from "./index-components/daily-index.vue";
 import DiseaseIndex from "./index-components/disease-index.vue";
 import RoadIndex from "./index-components/road-index.vue";
 import TrafficIndex from "./index-components/traffic-index.vue";
+// 接口
 import { getTotalCount } from "@/api/xj/index/index";
 export default {
   name: "Index",
@@ -98,7 +100,7 @@ export default {
   align-items: center;
   justify-content: space-around;
   background: url("../assets/index/top-content.png") no-repeat;
-  background-size: 100%;
+  background-size: 100% 100%;
 
   .top-div {
     width: 22%;
@@ -154,12 +156,12 @@ export default {
 
   .daily-content {
     background: url("../assets/index/daily-content.png") no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
   }
 
   .disease-content {
     background: url("../assets/index/disease-content.png") no-repeat;
-    background-size: 107% 100%;
+    background-size: 100% 100%;
   }
 }
 
@@ -175,7 +177,7 @@ export default {
     height: calc(100% - 1rem);
     margin-top: 1rem;
     background: url("../assets/index/road-content.png") no-repeat;
-    background-size: 112% 100%;
+    background-size: 100% 100%;
   }
 }
 </style>

src/views/xj/inspection/disease-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 15:05:42
+ * @LastEditTime: 2024-11-18 16:36:05
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -197,7 +197,7 @@
           >删除
         </el-button>
       </el-col>
-      <!-- <el-col :span="1.5">
+      <el-col :span="1.5">
         <el-button
           type="warning"
           plain
@@ -205,9 +205,31 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:defect:export']"
-          >导出
+          >导出日常监测报告
         </el-button>
-      </el-col> -->
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:defect:export']"
+          >导出特殊事件报告
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:defect:export']"
+          >导出养护评估报告
+        </el-button>
+      </el-col>
       <!-- <el-col :span="1.5">
         <el-button
           type="success"
@@ -1214,11 +1236,11 @@ export default {
 
     /* 查看弹窗选择改变触发事件 */
     changeView(val) {
-      getDetailsBySnapShotId(val).then(({code,data})=>{
+      getDetailsBySnapShotId(val).then(({ code, data }) => {
-        if(code===200){
+        if (code === 200) {
           console.log(data, "fff");
         }
-      })
+      });
     },
 
     /* 初始化天地图 */