fix：首页页面

src/layout/components/Navbar.vue

@@ -169,7 +169,8 @@ export default {
 
       i {
         cursor: pointer;
-        font-size: 1.3rem;
+        font-size: 1.4rem;
+        line-height: 3.1rem;
         font-weight: bold;
       }
     }

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

@@ -0,0 +1,440 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-29 15:12:20
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-30 13:10:04
+ * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
+ * @Description: 首页-日常巡查
+-->
+
+<template>
+  <div class="content">
+    <div class="title">日常巡查</div>
+    <div class="daily-content">
+      <div class="left">
+        <div class="left-div">
+          <div class="name">巡查里程</div>
+          <div class="value"><span>15.16</span>km</div>
+        </div>
+        <div class="left-div">
+          <div class="name">覆盖道路数</div>
+          <div class="value"><span>352</span>条</div>
+        </div>
+        <div class="left-chart" ref="rateChart"></div>
+      </div>
+      <div class="right">
+        <div ref="trendChart"></div>
+        <div ref="distributionChart">图表2</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "DailyIndex",
+  data() {
+    return {};
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取数据 */
+    getData() {
+      this.$nextTick(() => {
+        this.drawLeftChart();
+        this.drawTrendChart();
+        this.drawDistributionChart();
+      });
+    },
+    /* 绘制覆盖率饼图 */
+    drawLeftChart() {
+      if (this.$refs.rateChart) {
+        const chart = echarts.init(this.$refs.rateChart);
+        const current = 45;
+        chart.setOption({
+          // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
+          title: [
+            // 中心比例
+            {
+              text: "80%",
+              x: "center",
+              y: "52%",
+              textStyle: {
+                fontSize: 20,
+                color: "#444",
+                fontWeight: "bold",
+              },
+            },
+            {
+              text: "覆盖率",
+              x: "center",
+              y: "10%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          polar: {
+            center: ["50%", "60%"],
+            radius: ["40%", "58%"],
+          },
+          angleAxis: {
+            max: 100,
+            show: false,
+          },
+          radiusAxis: {
+            type: "category",
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              data: [80],
+              name: "",
+              type: "bar",
+              roundCap: true,
+              showBackground: true,
+              backgroundStyle: {
+                color: "#BDD5F4",
+              },
+              coordinateSystem: "polar",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+    /* 绘制病害趋势柱状图 */
+    drawTrendChart() {
+      if (this.$refs.trendChart) {
+        const chart = echarts.init(this.$refs.trendChart);
+        chart.setOption({
+          color: ["#388BD8", "#FFC400"],
+          title: [
+            // 中心比例
+            {
+              text: "巡查里程-病害趋势",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            right: "5%",
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/h"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/W㎡"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: false,
+              },
+            },
+          ],
+          series: [
+            {
+              type: "bar",
+              barWidth: 10,
+              name: "架梁完成量",
+              data: [400, 600, 1400, 1700],
+            },
+            {
+              type: "line",
+              symbolSize: 5,
+              name: "墩身完成率",
+              smooth: 1,
+              data: [10, 40, 50, 90],
+              yAxisIndex: 1,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+    /* 绘制病害分布柱状图 */
+    drawDistributionChart() {
+      const xData = [
+        { name: "1月", value: 10 },
+        { name: "2月", value: 12 },
+        { name: "3月", value: 10 },
+        { name: "4月", value: 30 },
+        { name: "5月", value: 20 },
+        { name: "6月", value: 50 },
+        { name: "7月", value: 30 },
+        { name: "8月", value: 40 },
+        { name: "9月", value: 40 },
+        { name: "10月", value: 15 },
+      ].map((item) => {
+        return item.name;
+      });
+      const yData = [
+        { name: "1月", value: 10 },
+        { name: "2月", value: 12 },
+        { name: "3月", value: 10 },
+        { name: "4月", value: 30 },
+        { name: "5月", value: 20 },
+        { name: "6月", value: 50 },
+        { name: "7月", value: 30 },
+        { name: "8月", value: 40 },
+        { name: "9月", value: 40 },
+        { name: "10月", value: 15 },
+      ].map((item, index) => {
+        if (index % 2 == 0) {
+          return {
+            ...item,
+            itemStyle: {
+              borderWidth: 1,
+              borderRadius: [3, 3, 0, 0],
+              color: "#388BD8",
+            },
+          };
+        }
+        return {
+          ...item,
+          itemStyle: {
+            borderWidth: 1,
+            borderRadius: [3, 3, 0, 0],
+            color: "#38C8D8",
+          },
+        };
+      });
+      if (this.$refs.distributionChart) {
+        const chart = echarts.init(this.$refs.distributionChart);
+        chart.setOption({
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          title: [
+            // 中心比例
+            {
+              text: "道路新增病害分布",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+            padding: [5, 10, 5, 10],
+          },
+          grid: {
+            top: "20%",
+            left: "7%",
+            right: "4%",
+            bottom: "12%",
+          },
+          xAxis: [
+            {
+              data: xData,
+              type: "category",
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: false,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              nameTextStyle: {
+                color: "#fff",
+                fontSize: 12,
+              },
+              name: "",
+              type: "value",
+              axisLabel: {
+                show: true,
+                color: "#9eaaba",
+              },
+              axisLine: { show: false },
+              splitLine: { show: true },
+            },
+          ],
+          series: [
+            {
+              name: "新增病害数",
+              type: "bar",
+              barWidth: 20,
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(105,160,231,0.1)",
+              },
+              data: yData,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    padding-left: 3rem;
+    font-family: "DouYu";
+  }
+
+  .daily-content {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      width: 20%;
+      height: 100%;
+
+      .left-div {
+        height: 27.5%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border: 1px red solid;
+
+        .name {
+          font-size: 0.8rem;
+        }
+
+        .value {
+          line-height: 2rem;
+
+          span {
+            margin-right: 0.3rem;
+            font-weight: 600;
+            font-size: 1.5rem;
+          }
+        }
+      }
+
+      .left-chart {
+        height: 45%;
+        width: 100%;
+        text-align: center;
+        line-height: 3rem;
+        border: 1px red solid;
+      }
+    }
+
+    .right {
+      width: 78%;
+      height: 100%;
+
+      > div {
+        height: 50%;
+        width: 100%;
+        border: 1px red solid;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,470 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-29 15:17:58
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-30 13:55:08
+ * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
+ * @Description: 首页-病害识别
+-->
+
+<template>
+  <div class="content">
+    <div class="title">病害识别</div>
+    <div class="disease-content">
+      <div class="left">
+        <div>
+          <div class="name">病害识别总数</div>
+          <div class="value"><span>57875</span>个</div>
+        </div>
+        <div>
+          <div class="name">新增病害数</div>
+          <div class="value"><span>57875</span>个</div>
+        </div>
+      </div>
+      <div class="right">
+        <div ref="statisticsChart"></div>
+        <div>
+          <el-select
+            v-model="diseaseType"
+            @change="getChartData"
+            placeholder="请选择"
+            size="mini"
+          >
+            <el-option
+              v-for="item in diseaseOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <div class="distribution-div" ref="distributionChart"></div>
+          <div class="distribution-legnd">
+            <fssm-scroll>
+              <div
+                class="legnd-div"
+                v-for="(item, index) in distributionList"
+                :key="`distribution-${index}`"
+              >
+                <div class="name">
+                  <span
+                    class="index"
+                    :style="{ backgroundColor: distributionColor[index] }"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                </div>
+                <div class="rate">{{ item.rate }}</div>
+              </div>
+            </fssm-scroll>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+import * as echarts from "echarts";
+export default {
+  name: "DiseaseIndex",
+  components: {
+    FssmScroll,
+  },
+  data() {
+    return {
+      // 下拉框数据绑定
+      diseaseType: "",
+      // 下拉框数据
+      diseaseOptions: [],
+      // 病害类型颜色盘
+      distributionColor: [
+        "#3678FF",
+        "#F8A74E",
+        "#04DAD7",
+        "#00D669",
+        "#8448FF",
+        "#F6D566",
+        "#00B1FF",
+        "#62CFFF",
+        "#6A9BFF",
+        "#B38EFF",
+      ],
+      // 病害类型分布数据
+      distributionList: [],
+    };
+  },
+  created() {
+    this.getOptions();
+    this.getChartData();
+  },
+  methods: {
+    /* 获取病害类别下拉 */
+    getOptions() {
+      this.diseaseOptions = [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ];
+    },
+    /* 获取echart图数据 */
+    getChartData() {
+      this.distributionList = [
+        {
+          value: 15461,
+          name: "一类",
+          rate: "10%",
+        },
+        {
+          value: 1,
+          name: "二类",
+          rate: "10%",
+        },
+        {
+          value: 6546,
+          name: "三类",
+          rate: "10%",
+        },
+        {
+          value: 2718,
+          name: "四类",
+          rate: "10%",
+        },
+        {
+          value: 1704,
+          name: "五类",
+          rate: "10%",
+        },
+        {
+          value: 1,
+          name: "二类",
+          rate: "10%",
+        },
+        {
+          value: 6546,
+          name: "三类",
+          rate: "10%",
+        },
+        {
+          value: 2718,
+          name: "四类",
+          rate: "10%",
+        },
+        {
+          value: 1704,
+          name: "五类",
+          rate: "10%",
+        },
+      ];
+      this.$nextTick(() => {
+        this.drawStatisticsChart();
+        this.drawDistributionChart();
+      });
+    },
+    /* 绘制新增病害统计echart图 */
+    drawStatisticsChart() {
+      if (this.$refs.statisticsChart) {
+        const chart = echarts.init(this.$refs.statisticsChart);
+        chart.setOption({
+          color: ["#388BD8", "#FFC400"],
+          title: [
+            // 中心比例
+            {
+              text: "新增病害统计",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            right: "5%",
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/h"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          series: [
+            {
+              name: "新增病害数",
+              type: "line",
+              symbolSize: 5,
+              smooth: 1,
+              data: [400, 600, 1400, 1700],
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+    /* 绘制病害类型分布图 */
+    drawDistributionChart() {
+      if (this.$refs.distributionChart) {
+        const chart = echarts.init(this.$refs.distributionChart);
+        chart.setOption({
+          color: this.distributionColor,
+          title: [
+            // 中心比例
+            {
+              text: "新增病害类型分布",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          series: [
+            {
+              type: "pie",
+              //   hoverAnimation: true,
+              minAngle: 1,
+              padAngle: 4,
+              hoverOffset: 0,
+              startAngle: 0, //起始角度
+              clockwise: false, //是否顺时针
+              radius: ["55%", "70%"],
+              center: ["50%", "56%"],
+              avoidLabelOverlap: false,
+              animationDuration: 3000,
+              emphasis: {
+                label: {
+                  formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
+                  show: true,
+                  fontSize: "30",
+                  fontWeight: "bold",
+                  rich: {
+                    a: {
+                      fontSize: 40,
+                      lineHeight: 50,
+                      color: "#000",
+                    },
+                    b: {
+                      color: "#000",
+                      fontSize: 30,
+                      lineHeight: 30,
+                    },
+                  },
+                },
+              },
+              label: {
+                show: false,
+                position: "center",
+                color: "rgba(13, 17, 29,0)",
+              },
+              labelLine: {
+                show: false,
+              },
+              data: this.distributionList,
+              zlevel: 30,
+            },
+            {
+              type: "pie",
+              radius: ["35%", "55%"],
+              center: ["50%", "56%"],
+              //   hoverAnimation: true,
+              hoverOffset: 0,
+              startAngle: 0, //起始角度
+              clockwise: false, //是否顺时针
+              padAngle: 4,
+              minAngle: 1,
+              animationDuration: 3000,
+              emphasis: { scale: false },
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: "#E4EDFD",
+              },
+              data: this.distributionList,
+              z: 1,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    padding-left: 3rem;
+    font-family: "DouYu";
+  }
+
+  .disease-content {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      width: 20%;
+      height: 100%;
+
+      > div {
+        height: 50%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border: 1px red solid;
+
+        .name {
+          font-size: 0.8rem;
+        }
+
+        .value {
+          line-height: 4rem;
+
+          span {
+            margin-right: 0.3rem;
+            font-weight: 600;
+            font-size: 1.5rem;
+          }
+        }
+      }
+    }
+
+    .right {
+      width: 78%;
+      height: 100%;
+      position: relative;
+
+      .el-select {
+        width: 8rem;
+        position: absolute;
+        right: 2%;
+        top: 5%;
+        z-index: 1;
+      }
+
+      > div {
+        height: 50%;
+        width: 100%;
+        display: flex;
+
+        position: relative;
+        border: 1px red solid;
+
+        .distribution-div {
+          width: 30%;
+          height: 100%;
+        }
+
+        .distribution-legnd {
+          width: 70%;
+          height: 100%;
+          padding: 2.6rem 2rem 2rem 2rem;
+
+          .scroll-box {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+          }
+
+          .legnd-div {
+            width: 47%;
+            height: 2rem;
+            padding: 0 1rem;
+            margin: 0.2rem 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #f6f6fa;
+            border-radius: 0.2rem;
+
+            .name {
+              display: flex;
+              align-items: center;
+
+              .index {
+                width: 0.7rem;
+                height: 0.7rem;
+                display: inline-block;
+                margin-right: 0.5rem;
+                border-radius: 0.3rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,248 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-29 15:23:44
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-30 14:15:44
+ * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
+ * @Description: 首页-公路资产
+-->
+
+
+<template>
+  <div class="content">
+    <div class="title">公路资产</div>
+    <div class="top-div">
+      <a>累计公路资产总数</a>
+      <span v-for="(item, index) in roadNum" :key="`top-span-${index}`">{{
+        item
+      }}</span
+      >个
+    </div>
+    <div class="middle-div">
+      <div
+        class="middle-item"
+        :class="`middle-item-${index}`"
+        v-for="(item, index) in middleList"
+        :key="`middle-item-${index}`"
+      >
+        <span>{{ item.name }}</span>
+        <span>{{ item.value }}</span>
+      </div>
+    </div>
+    <div class="road-chart" ref="roadChart"></div>
+  </div>
+</template>
+  
+  <script>
+import * as echarts from "echarts";
+export default {
+  name: "RoadIndex",
+  data() {
+    return {
+      // 累计公路资产总数
+      roadNum: [],
+      // 中间循环数据
+      middleList: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取数据 */
+    getData() {
+      this.roadNum = ["0", "0", "6", "7"];
+      this.middleList = [
+        { name: "信号灯", value: 5002 },
+        { name: "路锥", value: 5002 },
+        { name: "警示杆", value: 5002 },
+        { name: "防撞桶", value: 5002 },
+        { name: "斑马线", value: 5002 },
+        { name: "里程碑", value: 5002 },
+        { name: "交通杆件", value: 5002 },
+        { name: "龙门架", value: 5002 },
+      ];
+      this.$nextTick(() => {
+        this.drawRoadChart();
+      });
+    },
+    /* 绘制echart图 */
+    drawRoadChart() {
+      if (this.$refs.roadChart) {
+        const chart = echarts.init(this.$refs.roadChart);
+        chart.setOption({
+          color: ["#388BD8", "#04DAD7"],
+          title: [
+            // 中心比例
+            {
+              text: "常数统计",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            right: "5%",
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: true,
+              },
+              boundaryGap: false,
+            },
+          ],
+          yAxis: [
+            {
+              name: "",
+              type: "value",
+              axisLine: {
+                lineStyle: {
+                  color: "#A2B0B8",
+                },
+              },
+              axisLabel: {
+                // "formatter": "{value} T/h"
+                // formatter: "{value}",
+              },
+              splitLine: {
+                show: true,
+              },
+            },
+          ],
+          series: [
+            {
+              name: "路产总数",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#388BD8",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: [400, 600, 1400, 1700],
+            },
+            {
+              name: "异常设施数量",
+              type: "line",
+              showSymbol: false,
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#04DAD7",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ]),
+              },
+              data: [40, 500, 1500, 700],
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    padding-left: 3rem;
+    font-family: "DouYu";
+  }
+
+  .top-div {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+
+    a {
+      margin-top: 0.4rem;
+      font-family: "DouYu";
+    }
+
+    span {
+      width: 1.2rem;
+      margin: 0 0.1rem;
+      font-size: 1.5rem;
+      background: #ffffff;
+      box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
+      border-radius: 3px 3px 3px 3px;
+    }
+  }
+
+  .middle-div {
+    width: 100%;
+    height: 30%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: flex-end;
+    border: 1px solid red;
+
+    .middle-item {
+      width: 21%;
+      height: 40%;
+      padding: 0 0.5rem 0 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #f2f9fe;
+      border-radius: 0.2rem;
+    }
+  }
+
+  .road-chart {
+    width: 100%;
+    height: 50%;
+  }
+}
+</style>

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

@@ -0,0 +1,246 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-29 15:30:35
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-30 14:42:47
+ * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
+ * @Description: 首页-路况评定
+-->
+
+<template>
+  <div class="content">
+    <div class="title">路况评定</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="日期" width="180">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="180">
+        </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+      </el-table>
+    </div>
+    <div class="traffic-chart" ref="trafficChart"></div>
+  </div>
+</template>
+  
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "TrafficIndex",
+  data() {
+    return {
+      // 路况表格数据
+      trafficTableData: [],
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    /* 获取表格数据 */
+    getTableData() {
+      this.trafficTableData = [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ];
+      this.$nextTick(() => {
+        this.drawTrafficChart();
+      });
+    },
+    /* 绘制柱状图 */
+    drawTrafficChart() {
+      if (this.$refs.trafficChart) {
+        const chart = echarts.init(this.$refs.trafficChart);
+        chart.setOption({
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          title: [
+            // 中心比例
+            {
+              text: "道路新增病害分布",
+              x: "1%",
+              y: "1%",
+              textStyle: {
+                fontSize: 14,
+              },
+            },
+          ],
+          legend: {
+            show: true,
+            right:"3%"
+          },
+          tooltip: {
+            trigger: "axis",
+            padding: [5, 10, 5, 10],
+          },
+          grid: {
+            top: "20%",
+            left: "7%",
+            right: "4%",
+            bottom: "12%",
+          },
+          xAxis: [
+            {
+              data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"],
+              type: "category",
+              axisTick: {
+                show: false, //隐藏X轴刻度
+              },
+              axisLabel: { color: "#A2B0B8" },
+              axisLine: {
+                lineStyle: {
+                  color: "#3C6579",
+                  width: 1,
+                },
+              },
+              splitLine: {
+                show: false,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              nameTextStyle: {
+                color: "#fff",
+                fontSize: 12,
+              },
+              name: "",
+              type: "value",
+              axisLabel: {
+                show: true,
+                color: "#9eaaba",
+              },
+              axisLine: { show: false },
+              splitLine: { show: true },
+            },
+          ],
+          series: [
+            {
+              name: "路产总数",
+              type: "bar",
+              barWidth: 20,
+              itemStyle: {
+                borderWidth: 1,
+                borderRadius: [3, 3, 0, 0],
+                color: "#388BD8",
+              },
+              data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
+            },
+            {
+              name: "异常设施数量",
+              type: "bar",
+              barWidth: 20,
+              itemStyle: {
+                borderWidth: 1,
+                borderRadius: [3, 3, 0, 0],
+                color: "#38C8D8",
+              },
+              data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+  },
+};
+</script>
+  
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+
+  .title {
+    width: 100%;
+    height: 10%;
+    padding-left: 3rem;
+    font-family: "DouYu";
+  }
+
+  .traffic-table {
+    width: 100%;
+    height: 45%;
+
+    ::v-deep .el-table tr {
+      background-color: #f6f7fa;
+    }
+    ::v-deep .el-table .el-table__header-wrapper th,
+    .el-table .el-table__fixed-header-wrapper th {
+      background-color: #f6f7fa;
+    }
+  }
+
+  .traffic-chart {
+    width: 100%;
+    height: 45%;
+  }
+}
+</style>

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-10-29 13:07:17
+ * @LastEditTime: 2024-10-29 15:30:19
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
@@ -24,22 +24,38 @@
         </div>
       </div>
       <div class="middle-content">
-        <div>日常巡查</div>
-        <div>病害识别</div>
+        <div class="daily-content">
+          <daily-index></daily-index>
+        </div>
+        <div class="disease-content">
+          <disease-index></disease-index>
+        </div>
       </div>
       <div class="bottom-content">
-        <div>公路资产</div>
-        <div>路况评定</div>
+        <div class="road-content">
+          <road-index></road-index>
+        </div>
+        <div class="traffic-content">
+          <traffic-index></traffic-index>
+        </div>
       </div>
     </fssm-scroll>
   </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";
 export default {
   name: "Index",
   components: {
     FssmScroll,
+    DailyIndex,
+    DiseaseIndex,
+    RoadIndex,
+    TrafficIndex,
   },
   data() {
     return {
@@ -91,7 +107,7 @@ export default {
     .value {
       line-height: 4rem;
 
-      span{
+      span {
         font-size: 1.8rem;
       }
     }
@@ -101,11 +117,33 @@ export default {
 .middle-content {
   width: 100%;
   height: 60%;
+  display: flex;
+  justify-content: space-between;
+  border: 1px red solid;
+
+  .daily-content,
+  .disease-content {
+    width: 49.5%;
+    height: calc(100% - 1rem);
+    margin-top: 1rem;
+    border: 1px blue solid;
+  }
 }
 
 .bottom-content {
   width: 100%;
   height: 60%;
+  display: flex;
+  justify-content: space-between;
+  border: 1px red solid;
+
+  .road-content,
+  .traffic-content {
+    width: 49.5%;
+    height: calc(100% - 1rem);
+    margin-top: 1rem;
+    border: 1px blue solid;
+  }
 }
 </style>