fix：道路资产

package.json

@@ -45,6 +45,7 @@
     "core-js": "3.37.1",
     "diagram-js": "^11.4.1",
     "echarts": "^5.4.0",
+    "echarts-gl": "^2.0.9",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
@@ -64,6 +65,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xcrud": "^0.4.19"

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-17 10:33:59
+ * @LastEditTime: 2024-10-17 16:51:32
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -97,6 +97,11 @@ export default {
       type: Array,
       default: () => [],
     },
+    // 接收传过来的底图类型
+    baseMap: {
+      type: String,
+      default: "cva_c",
+    },
   },
   data() {
     return {
@@ -114,6 +119,7 @@ export default {
     };
   },
   watch: {
+    /* 监听传过来的坐标区域 */
     editCoordinates: {
       handler(val) {
         this.$nextTick(() => {
@@ -137,6 +143,14 @@ export default {
       deep: true,
       immediate: true,
     },
+    /* 监听传过来的底图类型 */
+    baseMap: {
+      handler(val) {
+        this.changeImg(val)
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   mounted() {
     this.initMap();

src/router/index.js

@@ -46,6 +46,11 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
+  {
+    path: '/screen',
+    component: () => import('@/views/big-screen/index'),
+    hidden: true
+  },
   {
     path: '/bigscreen',
     component: () => import('@/views/bigscreen'),
@@ -69,7 +74,7 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: 'screen',
     children: [
       {
         path: 'index',

src/views/big-screen/disease-components/disease-current.vue

@@ -0,0 +1,349 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 10:19:56
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 13:15:47
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
+ * @Description: 病害巡检-病害三维饼图
+-->
+
+<template>
+  <div class="content">
+    <div class="content-select">下拉框</div>
+    <div class="echart" ref="currentChart"></div>
+    <div class="food-legend">
+      <div
+        class="legend-div"
+        v-for="(item, index) in dataList"
+        :key="`chart-${index}`"
+      >
+        <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
+        <div class="name">{{ item.name }}</div>
+        <div class="rate">{{ item.value }}</div>
+        <div class="value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  name: "DiseaseCurrent",
+  data() {
+    return {
+      // 配置项数据
+      options: {},
+      colorList: [
+        "#F29C1F",
+        "#E163EF",
+        "#F81F1C",
+        "#1D2AF9",
+        "#03F0EA",
+        "#FFADAF",
+        "#129CFE",
+        "#106B6C",
+        "#96E619",
+      ],
+      // echart数据
+      dataList: [],
+    };
+  },
+  created() {
+    this.getChartList();
+  },
+  methods: {
+    /* 获取echart数据 */
+    getChartList() {
+      this.dataList = [
+        { value: 500, name: "1111" },
+        { value: 600, name: "456" },
+        { value: 400, name: "撒大大大" },
+        { value: 550, name: "的风格" },
+        { value: 200, name: "规范化" },
+        { value: 900, name: "规划" },
+        { value: 100, name: "回家" },
+      ];
+      this.$nextTick(() => {
+        //获取echart图所需的options
+        this.drawChart();
+      });
+    },
+    /* 绘制echart图 */
+    drawChart() {
+      const data = this.dataList;
+      if (this.$refs.currentChart) {
+        const chart = echarts.init(this.$refs.currentChart);
+        chart.setOption({
+          legend: {
+            show: false,
+          },
+          animation: false,
+          tooltip: {
+            show: true,
+            confine: false,
+            backgroundColor: "rgba(9, 24, 48, 0.5)",
+            borderColor: "rgba(75, 253, 238, 0.4)",
+            textStyle: {
+              fontSize: 12,
+              color: "#ffffff",
+            },
+            formatter: (params) => {
+              return `${params.marker}${params.seriesName}：${
+                data[params.seriesIndex].value
+              }张`;
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          label: {
+            show: false,
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            width: "250%",
+            height: "250%",
+            // boxWidth: 100,
+            boxHeight: 2,
+            top: "-75%",
+            left: "-75%",
+            viewControl: {
+              // 是否自动旋转
+              autoRotate: false,
+              // 调节角度
+              alpha: 25,
+              rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
+              zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
+              panSensitivity: 0, //设置平移灵敏度，0无法平移
+            },
+          },
+          //最上方的series
+          series: this.getPie3D(this.dataList, 0.8),
+        });
+        window.addEventListener("resize", chart.resize());
+      }
+    },
+    /* 绘制3d饼图配置项 */
+    getPie3D(pieData, internalDiameterRatio) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio * 1)
+          : 1 / 3;
+
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: 1 / 10,
+          },
+        };
+
+        seriesItem.itemStyle = { color: this.colorList[i] };
+        series.push(seriesItem);
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value * 1;
+
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+
+        //绘制3d饼图
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value / 100
+        );
+
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    /* 配置项参数 */
+    getParametricEquation(
+      startRatio,
+      endRatio,
+      isSelectedValue,
+      isHovered,
+      kk,
+      height
+    ) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      let isSelected = isSelectedValue;
+
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      const k = typeof kk !== "undefined" ? kk : 1 / 3;
+
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // const offsetZ = i == 1 ? 2 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+
+        x: (u, v) => {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        y: (u, v) => {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        z: (u, v) => {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u);
+          }
+          return Math.sin(v) > 0 ? 1 * height : -1;
+        },
+      };
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .content-select {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .echart {
+    width: 100%;
+    height: 70%;
+    z-index: 0;
+  }
+
+  .food-legend {
+    height: 30%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    .legend-div {
+      width: 32%;
+      height: 30%;
+      display: flex;
+      align-items: center;
+
+      .index {
+        width: 0.5rem;
+        height: 0.5rem;
+      }
+
+      .name {
+        width: 3.5rem;
+        padding-left: 0.3rem;
+        color: #AAC6C7;
+        font-size: 0.7rem;
+      }
+
+      .rate {
+        width: 1.5rem;
+        color: #808C9F;
+        font-size: 0.65rem;
+      }
+
+      .value {
+        width: 2rem;
+        color: #808C9F;
+        font-size: 0.65rem;
+      }
+    }
+  }
+}
+</style>
+  

src/views/big-screen/disease-components/disease-trends.vue

@@ -0,0 +1,244 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 10:16:30
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 11:32:35
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
+ * @Description: 病害巡检-病害趋势
+-->
+<template>
+  <div class="content" ref="trendsChart"></div>
+</template>
+  
+  <script>
+import * as echarts from "echarts";
+export default {
+  name: "DiseaseTrends",
+  data() {
+    return {};
+  },
+  created() {
+    this.geteEhartList();
+  },
+  methods: {
+    /* 获取折线图数据 */
+    geteEhartList() {
+      this.$nextTick(() => {
+        this.drawChart();
+      });
+    },
+    /* 绘制折线图 */
+    drawChart() {
+      const chart = echarts.init(this.$refs.trendsChart);
+      chart.setOption({
+        //你的代码
+        title: {
+          text: "",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        legend: {
+          top: "top",
+          icon: "roundRect",
+          itemWidth: 15,
+          itemHeight: 10,
+          textStyle: {
+            color: "#808C9F",
+          },
+        },
+        grid: {
+          top: "15%",
+          left: 0,
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            fontSize: 12,
+            color: "#808C9F",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(60,132,163,0.4)", // x轴线颜色
+            },
+          },
+          axisTick: {
+            show: false, // 是否显示x轴的刻度
+          },
+          axisLabel: {
+            interval: 0,
+            color: "#808C9F",
+            fontSize: 12,
+          },
+          boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#808C9F",
+            fontSize: 12,
+            formatter: function (value) {
+              return value + "";
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "rgba(60,132,163,0.2)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "龟裂",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#FFC100",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(98,74,0,0)",
+                },
+              ]),
+            },
+            lineStyle: {
+              width: 1,
+              color: "#FFC100",
+            },
+            // 设置节点样式
+            showSymbol: false,
+            symbol: "circle", // 可以选择 circle, diamond, pin 等
+            symbolSize: 10, // 节点大小
+            itemStyle: {
+              color: "#FFC100", // 节点颜色
+            },
+            data: [15, 29, 32, 5, 14, 42],
+          },
+          {
+            name: "车辙",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#08B4A6",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(8,180,166,0)",
+                },
+              ]),
+            },
+            lineStyle: {
+              width: 1,
+              color: "#08B4A6",
+            },
+            // 设置节点样式
+            showSymbol: false,
+            symbol: "circle", // 可以选择 circle, diamond, pin 等
+            symbolSize: 10, // 节点大小
+            itemStyle: {
+              color: "#08B4A6",
+            },
+            data: [30, 35, 32, 35, 18, 72],
+          },
+          {
+            name: "坑槽",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#146fd7",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(20, 111, 215,0)",
+                },
+              ]),
+            },
+            lineStyle: {
+              width: 1,
+              color: "#146fd7",
+            },
+            // 设置节点样式
+            showSymbol: false,
+            symbol: "circle", // 可以选择 circle, diamond, pin 等
+            symbolSize: 10, // 节点大小
+            itemStyle: {
+              color: "#146fd7",
+            },
+            data: [20, 25, 12, 25, 8, 62],
+          },
+          {
+            name: "横向裂缝",
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#994EFF",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(153,78,255,0)",
+                },
+              ]),
+            },
+            lineStyle: {
+              width: 1,
+              color: "#994EFF",
+            },
+            // 设置节点样式
+            showSymbol: false,
+            symbol: "circle", // 可以选择 circle, diamond, pin 等
+            symbolSize: 10, // 节点大小
+            itemStyle: {
+              color: "#994EFF",
+            },
+            data: [40, 45, 32, 45, 38, 82],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+</style>
+  

src/views/big-screen/disease-components/pic-rank.vue

@@ -0,0 +1,145 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 10:31:31
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 14:22:33
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
+ * @Description: 病害巡检-pic排名
+-->
+
+<template>
+  <div class="content">
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="picList"
+    >
+      <div
+        class="pic-div"
+        v-for="(item, index) in picList"
+        :key="`pic-${index}`"
+      >
+        <div class="pic-top">
+          <div class="pic-top-name">
+            <a>{{ index + 1 }}</a
+            >{{ item.name }}
+          </div>
+          <div class="pic-top-value">{{ item.value }}</div>
+        </div>
+        <div class="pic-bottom">
+          <div
+            :style="{ width: `${(item.value / 300) * 100}%` }"
+            :class="`pic-bottom-${index}`"
+          ></div>
+        </div>
+      </div>
+    </vue-seamless-scroll>
+  </div>
+</template>
+  
+  <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "PicRank",
+  components: { vueSeamlessScroll },
+  data() {
+    return {
+      // 轮播配置
+      defaultOption: {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 1,
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
+      },
+      // 排名数据
+      picList: [
+        { name: "沈阳绕城高速（G1501）", value: 95 },
+        { name: "沈阳绕城高速（G1501）", value: 75 },
+        { name: "沈阳绕城高速（G1501）", value: 70 },
+        { name: "沈阳绕城高速（G1501）", value: 65 },
+        { name: "沈阳绕城高速（G1501）", value: 55 },
+      ],
+    };
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  color: #c7daf2;
+    overflow: hidden;
+
+  .pic-div {
+    width: calc(100% - 1rem);
+    height: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #2f78aa;
+
+    .pic-top {
+      display: flex;
+      justify-content: space-between;
+
+      .pic-top-name {
+        display: flex;
+        align-items: flex-end;
+        font-size: 0.8rem;
+
+        a {
+          display: flex;
+          width: 1rem;
+          height: 1rem;
+          margin-right: 0.5rem;
+          justify-content: center;
+          align-items: center;
+          border: 1px solid #2f78aa;
+        }
+      }
+
+      .pic-top-value {
+        font-size: 1rem;
+      }
+    }
+
+    .pic-bottom {
+      width: 100%;
+      height: 0.3rem;
+
+      .pic-bottom-0 {
+        height: 0.3rem;
+        background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
+      }
+
+      .pic-bottom-1 {
+        height: 0.3rem;
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .pic-bottom-2 {
+        height: 0.3rem;
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+
+      .pic-bottom-3 {
+        height: 0.3rem;
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .pic-bottom-4 {
+        height: 0.3rem;
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+    }
+  }
+}
+</style>
+  

src/views/big-screen/disease-components/road-rank.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 10:33:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 15:05:44
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
+ * @Description: 病害巡检-路面状况排名
+-->
+
+<template>
+  <div class="content">
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="roadList"
+    >
+      <div
+        class="road-div"
+        v-for="(item, index) in roadList"
+        :key="`road-${index}`"
+      >
+        <div class="index" :class="`road-index-${index}`">TOP</div>
+        <div class="name">{{ item.name }}</div>
+        <div class="value">病害数：{{ item.value }}</div>
+        <div :class="`rate-${item.tip}`" class="rate">
+          环比：<span>{{ item.rate }}</span>
+        </div>
+      </div>
+    </vue-seamless-scroll>
+  </div>
+</template>
+  
+  <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "RoadRank",
+  components: { vueSeamlessScroll },
+  data() {
+    return {
+      // 轮播配置
+      defaultOption: {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 1,
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
+      },
+      // 路面状况排名数据
+      roadList: [
+        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
+        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
+        { name: "G10152", value: 523, rate: 0.23, tip: "down" },
+        { name: "G10152", value: 523, rate: 0.23, tip: "down" },
+        { name: "G10152", value: 523, rate: 0.23, tip: "up" },
+      ],
+    };
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  font-size: 0.8rem;
+  color: #aac6c7;
+  overflow: hidden;
+
+  .road-div {
+    height: 2rem;
+    width: 100%;
+    padding: 0 1.5rem;
+    display: flex;
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    &:nth-child(2n + 1) {
+      background-color: #0c203f;
+    }
+
+    .index {
+      width: 4.5rem;
+    }
+
+    .name {
+      width: 5rem;
+    }
+
+    .value {
+      width: 6.5rem;
+    }
+
+    .rate {
+      width: 7rem;
+    }
+
+    .rate-up {
+      span {
+        color: #fd9604;
+      }
+      background-image: url("../../../assets/screen/disease/rate-up.png");
+      background-repeat: no-repeat;
+      background-size: 20%;
+      background-position: 85% 50%;
+    }
+
+    .rate-down {
+      span {
+        color: #1fa318;
+      }
+      background-image: url("../../../assets/screen/disease/rate-down.png");
+      background-repeat: no-repeat;
+      background-size: 20%;
+      background-position: 85% 50%;
+    }
+
+    .road-index-0 {
+      background-image: url("../../../assets/screen/disease/road-index-0.png");
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 60% 50%;
+    }
+
+    .road-index-1 {
+      background-image: url("../../../assets/screen/disease/road-index-1.png");
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 60% 50%;
+    }
+
+    .road-index-2 {
+      background-image: url("../../../assets/screen/disease/road-index-2.png");
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 60% 50%;
+    }
+
+    .road-index-3 {
+      background-image: url("../../../assets/screen/disease/road-index-3.png");
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 60% 50%;
+    }
+
+    .road-index-4 {
+      background-image: url("../../../assets/screen/disease/road-index-4.png");
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 60% 50%;
+    }
+  }
+}
+</style>
+  

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

@@ -0,0 +1,84 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 09:42:49
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 11:04:18
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
+ * @Description: 病害巡检-今日巡查
+-->
+
+<template>
+  <div class="content">
+    <div class="today-left"><span>87</span></div>
+    <div class="today-right">
+      <div class="right-sum"><span>261</span>个</div>
+      <div class="right-rate"><span> 37 </span>%</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TodayInspection",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .today-left {
+    width: 45%;
+    height: 100%;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 1.5rem;
+    font-size: 3rem;
+    background-image: url("../../../assets/screen/disease/today-left.png");
+    background-repeat: no-repeat;
+    background-size: 85%;
+    background-position: 100% 60%;
+  }
+
+  .today-right {
+    width: 55%;
+    height: 100%;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #ffffff;
+
+    .right-sum {
+      width: 100%;
+      height: 4rem;
+      display: flex;
+      justify-content: center;
+      line-height: 3rem;
+      background-image: url("../../../assets/screen/disease/right-sum.png");
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: 100% 50%;
+    }
+
+    .right-rate {
+      width: 100%;
+      height: 4rem;
+      display: flex;
+      justify-content: center;
+      line-height: 3rem;
+      background-image: url("../../../assets/screen/disease/right-rate.png");
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: 100% 50%;
+    }
+  }
+}
+</style>

src/views/big-screen/disease-components/work-order.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 10:25:29
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 13:34:00
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
+ * @Description: 病害巡检-工单统计
+-->
+
+<template>
+  <div class="content">
+    <div
+      :class="`work-div-${index}`"
+      v-for="(item, index) in workList"
+      :key="`work-${index}`"
+    >
+      {{ item.value }}
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: "WorkOrder",
+  data() {
+    return {
+      // 工单数据
+      workList: [
+        {
+          value: 2565,
+        },
+        {
+          value: 12,
+        },
+        {
+          value: "22%",
+        },
+      ],
+    };
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  color: #ffffff;
+
+  > div {
+    width: 30%;
+    height: 100%;
+    font-size: 1.5rem;
+    line-height: 8rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .work-div-0 {
+    background-image: url("../../../assets/screen/disease/work-div-0.png");
+    background-repeat: no-repeat;
+    background-size: 95%;
+    background-position: 0 50%;
+  }
+
+  .work-div-1 {
+    background-image: url("../../../assets/screen/disease/work-div-1.png");
+    background-repeat: no-repeat;
+    background-size: 95%;
+    background-position: 0 50%;
+  }
+
+  .work-div-2 {
+    background-image: url("../../../assets/screen/disease/work-div-2.png");
+    background-repeat: no-repeat;
+    background-size: 95%;
+    background-position: 0 50%;
+  }
+}
+</style>
+  

src/views/big-screen/disease-screen.vue

@@ -0,0 +1,28 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-17 16:05:15
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-17 16:41:33
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-screen.vue
+ * @Description: 大屏-病害巡检
+-->
+
+<template>
+  <div class="disease-content">病害巡检</div>
+</template>
+
+<script>
+export default {
+  name: "DiseaseScreen",
+};
+</script>
+
+<style lang="scss" scoped>
+.disease-content {
+  width: 100%;
+  height: 100%;
+  background-image: url("../../assets/screen/index/map-liaoning.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/views/big-screen/index.vue

@@ -0,0 +1,562 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-17 11:34:00
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 15:33:00
+ * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
+ * @Description: 大屏首页
+-->
+<template>
+  <div class="screen-content">
+    <div class="screen-header">
+      <div class="header-weather">多云转中雨</div>
+      <div class="header-time">
+        <div class="header-data">{{ dataTime }}</div>
+        <div class="header-week">
+          <span>{{ weekTime }}</span>
+          <span>{{ yearTime }}</span>
+        </div>
+        <div class="header-home">
+          <i class="el-icon-s-home" @click="goIndex"></i>
+        </div>
+      </div>
+    </div>
+    <div class="screen-middle">
+      <div class="screen-left">
+        <module-block
+          v-for="(item, index) in leftModuleList"
+          :key="`left-module-list-${index}`"
+          :width="item.width"
+          :height="item.height"
+          :title="item.title"
+          :class="item.class"
+        >
+          <template><component :is="item.component"></component></template>
+          <!-- <template slot="operation" v-if="item.selectIsShow">
+          <el-select
+            v-model="item.select"
+            popper-class="ioc-el-select"
+            v-if="item.title === '证照临期超期情况'"
+          >
+            <el-option
+              v-for="temp in item.selectCreditList"
+              :key="temp.value"
+              :label="temp.label"
+              :value="temp.value"
+            >
+            </el-option>
+          </el-select>
+        </template> -->
+        </module-block>
+      </div>
+      <div class="screen-right">
+        <module-block
+          v-for="(item, index) in rightModuleList"
+          :key="`right-module-list-${index}`"
+          :width="item.width"
+          :height="item.height"
+          :title="item.title"
+          :class="item.class"
+        >
+          <template><component :is="item.component"></component></template>
+          <!-- <template slot="operation" v-if="item.selectIsShow">
+          <el-select
+            v-model="item.select"
+            popper-class="ioc-el-select"
+            v-if="item.title === '证照临期超期情况'"
+          >
+            <el-option
+              v-for="temp in item.selectCreditList"
+              :key="temp.value"
+              :label="temp.label"
+              :value="temp.value"
+            >
+            </el-option>
+          </el-select>
+        </template> -->
+        </module-block>
+      </div>
+      <!-- 底图切换 -->
+      <disease-screen v-if="elementDiv === 'DiseaseScreen'"></disease-screen>
+      <road-screen v-else></road-screen>
+    </div>
+    <div class="screen-footer">
+      <div class="footer-change-map">
+        <div
+          class="change-map-div"
+          :class="mapClick === item.click ? 'change-map-click' : ''"
+          v-for="(item, index) in changeMapBtn"
+          :key="`btn-${index}`"
+          @click="changeMap(item)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="footer-change-vue">
+        <div
+          :class="
+            elementDiv === item.component
+              ? `change-vue-click-${item.component}`
+              : `change-vue-${item.component}`
+          "
+          v-for="(item, index) in elementList"
+          :key="`footer-${index}`"
+          @click="changeElement(item)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RoadScreen from "./road-screen.vue";
+import DiseaseScreen from "./disease-screen.vue";
+import ModuleBlock from "./module-block.vue";
+import TodayInspection from "./disease-components/today-inspection.vue";
+import DiseaseTrends from "./disease-components/disease-trends.vue";
+import DiseaseCurrent from "./disease-components/disease-current.vue";
+import WorkOrder from "./disease-components/work-order.vue";
+import PicRank from "./disease-components/pic-rank.vue";
+import RoadRank from "./disease-components/road-rank.vue";
+import RoadStatistic from "./road-components/road-statistic.vue";
+import ManageMaintain from "./road-components/manage-maintain.vue";
+import AnomalyFacilities from "./road-components/anomaly-facilities";
+import AncillaryFacilities from "./road-components/ancillary-facilities.vue";
+export default {
+  name: "BigScreen",
+  components: {
+    RoadScreen,
+    DiseaseScreen,
+    ModuleBlock,
+    TodayInspection,
+    DiseaseTrends,
+    DiseaseCurrent,
+    WorkOrder,
+    PicRank,
+    RoadRank,
+    RoadStatistic,
+    ManageMaintain,
+    AnomalyFacilities,
+    AncillaryFacilities,
+  },
+  data() {
+    return {
+      // 计时器标识
+      timeFlag: null,
+      // 时间
+      dataTime: "",
+      // 星期
+      weekTime: "",
+      // 年
+      yearTime: "",
+      // 左侧切换模块
+      leftModuleList: [
+        {
+          width: "100%",
+          height: "9rem",
+          title: "管养道路统计",
+          component: ManageMaintain,
+          selectIsShow: false,
+          class: "one",
+        },
+        {
+          width: "100%",
+          height: "28rem",
+          title: "附属设施分布",
+          component: AncillaryFacilities,
+          selectIsShow: false,
+          class: "twe",
+        },
+      ],
+      // 右侧切换模块
+      rightModuleList: [
+        {
+          width: "100%",
+          height: "15rem",
+          title: "附属设施异常统计",
+          component: AnomalyFacilities,
+          selectIsShow: false,
+          class: "one",
+        },
+        {
+          width: "100%",
+          height: "29rem",
+          title: "路产统计",
+          component: RoadStatistic,
+          selectIsShow: false,
+          class: "twe",
+        },
+      ],
+      // 切换地图按钮
+      changeMapBtn: [
+        { name: "巡查车", click: "1" },
+        { name: "病害", click: "2" },
+        { name: "路产", click: "3" },
+        { name: "PCL", click: "4" },
+      ],
+      // 地图切换标识
+      mapClick: "1",
+      // 中间展示的动态组件绑定
+      elementDiv: "DiseaseScreen",
+      elementList: [
+        { name: "病害巡检", component: "DiseaseScreen" },
+        { name: "道路资产", component: "RoadScreen" },
+        { name: "交安事件", component: "TrafficScreen" },
+      ],
+    };
+  },
+  created() {
+    this.setTime();
+  },
+  methods: {
+    /* 获取当前时间 */
+    setTime() {
+      this.timeFlag = setInterval(() => {
+        const weekMap = [
+          "星期天",
+          "星期一",
+          "星期二",
+          "星期三",
+          "星期四",
+          "星期五",
+          "星期六",
+        ];
+        const date = new Date();
+        const year = date.getFullYear();
+        const month =
+          date.getMonth() + 1 < 10
+            ? `0${date.getMonth() + 1}`
+            : date.getMonth() + 1;
+        const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+        const hours =
+          date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
+        const minutes =
+          date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
+        const seconds =
+          date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
+        const week = date.getDay();
+        // this.currentTime = `${year}-${month}-${day}\t\t${hours}:${minutes}:${seconds}\t\t${weekMap[week]}`;
+        this.yearTime = `${year}.${month}.${day}`;
+        this.weekTime = `${weekMap[week]}`;
+        this.dataTime = `${hours}:${minutes}:${seconds}`;
+      }, 1000);
+    },
+    /* 地图切换点击事件 */
+    changeMap(value) {
+      if (this.mapClick !== value) {
+        this.mapClick = value.click;
+      }
+    },
+    /* 数据栏切换事件 */
+    changeElement(item) {
+      if (this.elementDiv !== item) {
+        this.elementDiv = item.component;
+        if (item.component === "DiseaseScreen") {
+          this.leftModuleList = [
+            {
+              width: "100%",
+              height: "14rem",
+              title: "今日巡查",
+              component: TodayInspection,
+              selectIsShow: false,
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "14rem",
+              title: "病害趋势",
+              component: DiseaseTrends,
+              selectIsShow: false,
+              class: "twe",
+            },
+            {
+              width: "100%",
+              height: "15rem",
+              title: "病害趋势",
+              component: DiseaseCurrent,
+              selectIsShow: false,
+              class: "twe",
+            },
+          ];
+          this.rightModuleList = [
+            {
+              width: "100%",
+              height: "13rem",
+              title: "工单统计",
+              component: WorkOrder,
+              selectIsShow: false,
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "17rem",
+              title: "PIC排名",
+              component: PicRank,
+              selectIsShow: false,
+              class: "twe",
+            },
+            {
+              width: "100%",
+              height: "13rem",
+              title: "路面状况排名",
+              component: RoadRank,
+              selectIsShow: false,
+              class: "twe",
+            },
+          ];
+        } else if (item.component === "RoadScreen") {
+          this.leftModuleList = [
+            {
+              width: "100%",
+              height: "9rem",
+              title: "管养道路统计",
+              component: ManageMaintain,
+              selectIsShow: false,
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "28rem",
+              title: "附属设施分布",
+              component: AncillaryFacilities,
+              selectIsShow: false,
+              class: "twe",
+            },
+          ];
+          this.rightModuleList = [
+            {
+              width: "100%",
+              height: "15rem",
+              title: "附属设施异常统计",
+              component: AnomalyFacilities,
+              selectIsShow: false,
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "29rem",
+              title: "路产统计",
+              component: RoadStatistic,
+              selectIsShow: false,
+              class: "twe",
+            },
+          ];
+        }
+      }
+    },
+    /* 跳转系统首页 */
+    goIndex() {
+      this.$router.push("/index");
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timeFlag);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.screen-content {
+  width: 100%;
+  height: 100%;
+}
+
+// 中间样式
+.screen-middle {
+  width: 100%;
+  height: 100%;
+
+  .screen-left {
+    width: 25.5%;
+    height: calc(100% - 5rem);
+    padding-left: 3.5rem;
+    position: fixed;
+    top: 5rem;
+    z-index: 1;
+    background-image: url("../../assets/screen/index/bg-left.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    grid-template-columns: 94.4rem 94.4rem;
+    grid-template-areas:
+      "one "
+      "two "
+      "three ";
+
+    .one {
+      grid-area: one;
+    }
+
+    .two {
+      grid-area: two;
+    }
+
+    .three {
+      grid-area: three;
+    }
+  }
+
+  .screen-right {
+    width: 25.5%;
+    height: calc(100% - 5rem);
+    top: 5rem;
+    padding-right: 3.5rem;
+    position: fixed;
+    right: 0;
+    z-index: 1;
+    background-image: url("../../assets/screen/index/bg-right.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .middle-map {
+    position: fixed;
+    top: 0;
+    z-index: 0;
+  }
+}
+
+// 头部样式
+.screen-header {
+  width: 100%;
+  height: 5rem;
+  padding: 0 3rem;
+  position: fixed;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  z-index: 1;
+  background-image: url("../../assets/screen/index/bg-top.png");
+  background-repeat: no-repeat;
+  background-size: 100% 120%;
+  background-position-x: 50%;
+
+  .header-weather {
+    display: flex;
+    align-items: flex-end;
+    font-size: 1rem;
+    color: #89c5e8;
+  }
+
+  .header-time {
+    display: flex;
+    color: #89c5e8;
+
+    > div {
+      margin: 0 0.5rem;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    .header-data {
+      font-size: 1.8rem;
+    }
+
+    .header-week {
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-end;
+      flex-direction: column;
+    }
+
+    .header-home {
+      cursor: pointer;
+      font-size: 1.8rem;
+    }
+  }
+}
+
+// 大屏下方样式
+.screen-footer {
+  width: 49%;
+  height: 7.55rem;
+  position: fixed;
+  bottom: 0;
+  left: 25.5%;
+  background-image: url("../../assets/screen/index/bg-foot.png");
+  background-repeat: no-repeat;
+  background-size: 100.1% 99%;
+
+  .footer-change-map {
+    width: 100%;
+    height: 40%;
+    padding-right: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #8deeff;
+    font-style: italic;
+    font-size: 0.7rem;
+
+    .change-map-div {
+      margin: 0 1.2rem;
+    }
+
+    .change-map-click {
+      color: #fffed2;
+    }
+  }
+
+  .footer-change-vue {
+    width: 100%;
+    height: 60%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > div {
+      height: 100%;
+      width: 37.5%;
+    }
+
+    > div:nth-child(2) {
+      height: 100%;
+      width: 25%;
+    }
+
+    // 未点击样式
+    .change-vue-DiseaseScreen {
+      background-image: url("../../assets//screen/index/button-disease.png");
+      background-repeat: no-repeat;
+      background-size: 97% 65%;
+      background-position: 100% 15%;
+    }
+
+    .change-vue-click-DiseaseScreen {
+      background-image: url("../../assets//screen/index/button-disease-click.png");
+      background-repeat: no-repeat;
+      background-size: 98% 65%;
+      background-position: 100% 15%;
+    }
+
+    .change-vue-RoadScreen {
+      background-image: url("../../assets//screen/index/button-road.png");
+      background-repeat: no-repeat;
+      background-size: 98% 60%;
+      background-position: 70% 15%;
+    }
+    .change-vue-click-RoadScreen {
+      background-image: url("../../assets//screen/index/button-road-click.png");
+      background-repeat: no-repeat;
+      background-size: 98% 60%;
+      background-position: 70% 15%;
+    }
+
+    .change-vue-TrafficScreen {
+      background-image: url("../../assets//screen/index/button-traffic.png");
+      background-repeat: no-repeat;
+      background-size: 95% 60%;
+      background-position: 15% 15%;
+    }
+
+    .change-vue-click-TrafficScreen {
+      background-image: url("../../assets//screen/index/button-traffic-click.png");
+      background-repeat: no-repeat;
+      background-size: 95% 60%;
+      background-position: 15% 15%;
+    }
+    // .change-vue-click {
+    //   color: red;
+    // }
+  }
+}
+</style>

src/views/big-screen/module-block.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 09:29:51
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 09:50:09
+ * @FilePath: \znxjxt-ui\src\views\big-screen\module-block.vue
+ * @Description: 大屏数据栏
+-->
+<template>
+  <div class="module-block" :style="{ width, height }">
+    <div class="module-block__header">
+      <div class="header-title">
+        {{ title }}
+      </div>
+      <div class="header-operation" v-if="$slots.operation">
+        <slot name="operation"></slot>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div v-if="$slots.default" class="module-block__body">
+      <fssm-scroll full>
+        <slot></slot>
+      </fssm-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+export default {
+  name: "ModuleBlock",
+  components: { FssmScroll },
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.module-block {
+  .module-block__header {
+    width: 100%;
+    height: 2.5rem;
+    background-image: url("../../assets/screen/index/title.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .header-title {
+      width: 18rem;
+      height: 100%;
+      padding-left: 6rem;
+      line-height: 2rem;
+      color: #ffffff;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .header-operation {
+      width: calc(100% - 18rem);
+      height: 2.5rem;
+    }
+  }
+
+  .module-block__body {
+    width: 100%;
+    height: calc(100% - 2.5rem);
+  }
+}
+</style>

src/views/big-screen/road-components/ancillary-facilities.vue

@@ -0,0 +1,182 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 15:18:03
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 16:37:19
+ * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
+ * @Description: 道路资产大屏-附属设施分布
+-->
+
+<template>
+  <div class="content">
+    <div class="ancillary-top">21465</div>
+    <div class="ancillary-bottom">
+      <div
+        :class="`ancillary-bottom-${index}`"
+        v-for="(item, index) in ancillaryList"
+        :key="`ancillary-${index}`"
+      >
+        <div>{{ item.name }}</div>
+        <div>
+          <a>{{ item.value }}</a
+          ><span>{{ item.unit }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: "AncillaryFacilities",
+  data() {
+    return {
+      // 附属设施分布数据
+      ancillaryList: [
+        { name: "里程桩", value: 123, unit: "个" },
+        { name: "禁令标志", value: 123, unit: "个" },
+        { name: "指示标志", value: 123, unit: "个" },
+        { name: "警告标志", value: 123, unit: "个" },
+        { name: "指路标志", value: 123, unit: "个" },
+        { name: "辅助标志", value: 123, unit: "个" },
+        { name: "球机", value: 123, unit: "个" },
+        { name: "枪机", value: 123, unit: "个" },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+
+  .ancillary-top {
+    height: 9rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    line-height: 8rem;
+    font-size: 2rem;
+    padding-right: 2rem;
+    background-image: url("../../../assets/screen/road/ancillary-top.png");
+    background-repeat: no-repeat;
+    background-size: 90% 80%;
+    background-position: 50%;
+  }
+
+  .ancillary-bottom {
+    height: calc(100% - 9rem);
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+
+    > div {
+      width: 45%;
+      height: 22%;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding-left: 3.5rem;
+      font-size: 0.9rem;
+
+      span {
+        padding-left: 0.5rem;
+      }
+    }
+
+    .ancillary-bottom-0 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-0.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #ac8018;
+      }
+    }
+
+    .ancillary-bottom-1 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-1.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #ac8018;
+      }
+    }
+
+    .ancillary-bottom-2 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-2.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #08afa3;
+      }
+    }
+
+    .ancillary-bottom-3 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-3.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #08afa3;
+      }
+    }
+
+    .ancillary-bottom-4 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-4.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #3f84e3;
+      }
+    }
+
+    .ancillary-bottom-5 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-5.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #3f84e3;
+      }
+    }
+
+    .ancillary-bottom-6 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-6.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #ac8018;
+      }
+    }
+
+    .ancillary-bottom-7 {
+      background-image: url("../../../assets/screen/road/ancillary-bottom-7.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 50%;
+
+      a {
+        color: #ac8018;
+      }
+    }
+  }
+}
+</style>
+  

src/views/big-screen/road-components/anomaly-facilities.vue

@@ -0,0 +1,329 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 15:21:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 17:06:39
+ * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
+ * @Description: 附属设施异常统计
+-->
+
+<template>
+  <div class="content">
+    <div class="anomaly-select">下拉框</div>
+    <div ref="anomalyChart" class="anomaly-echart"></div>
+  </div>
+</template>
+  
+  <script>
+import * as echarts from "echarts";
+export default {
+  name: "AnomalyFacilities",
+  data() {
+    return {};
+  },
+  created() {
+    this.getChartData();
+  },
+  methods: {
+    /* 获取柱状图数据 */
+    getChartData() {
+      this.$nextTick(() => {
+        this.drawChart();
+      });
+    },
+    /* 绘制echart */
+    drawChart() {
+      const chart = echarts.init(this.$refs.anomalyChart);
+      chart.setOption({
+        // backgroundColor: "#041139",
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            fontSize: 12,
+            color: "#808C9F",
+          },
+        },
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "20%",
+          left: "10%",
+          right: 0,
+          bottom: "20%",
+        },
+        xAxis: [
+          {
+            data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
+            axisLabel: {
+              textStyle: {
+                color: "#808C9F",
+                fontSize: 12,
+              },
+              interval: 0,
+            },
+            axisLine: {
+              show: false, //不显示x轴
+              lineStyle: {
+                color: "rgba(53,65,95,1)",
+              },
+            },
+            axisTick: {
+              show: false, //不显示刻度
+            },
+            boundaryGap: true,
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "数量",
+            nameTextStyle: {
+              color: "#C7DAF2",
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false, //不显示x轴
+              lineStyle: {
+                color: "rgba(53,65,95,1)",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#808C9F",
+                fontSize: 12,
+              },
+            },
+          },
+        ],
+        series: [
+          // 柱体
+          {
+            name: "人数",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              borderColor: "#08B4A6",
+              borderWidth: 1,
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(105,160,231,0.1)",
+            },
+            // itemStyle: {
+
+            // },
+            label: {
+              show: false, //每条柱状图是否显示数字
+              formatter: "{c}",
+              position: "top",
+              color: "#fff",
+              fontSize: 14,
+            },
+            data: [
+              {
+                value: 15,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 25,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 35,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 45,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 65,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 75,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+
+  .anomaly-select {
+    position: absolute;
+  }
+
+  .anomaly-echart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
+  

src/views/big-screen/road-components/manage-maintain.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 15:15:04
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 15:47:15
+ * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
+ * @Description: 道路资产大屏-管养道路统计
+-->
+
+<template>
+  <div class="content">
+    <div class="maintain-left">286<span>km</span></div>
+    <div class="maintain-right">86<span>条</span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ManageMaintain",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  color: #ffffff;
+
+  > div {
+    width: 47%;
+    height: 100%;
+    padding-left: 3rem;
+    line-height: 5rem;
+    display: flex;
+    justify-content: center;
+    font-size: 1.5rem;
+
+    span {
+      padding-left: 0.5rem;
+      color: #d1d1d1;
+      font-size: 1rem;
+    }
+  }
+
+  .maintain-left {
+    background-image: url("../../../assets/screen/road/maintain-left.png");
+    background-repeat: no-repeat;
+    background-position: 100%;
+    background-size: 100% 65%;
+  }
+
+  .maintain-right {
+    background-image: url("../../../assets/screen/road/maintain-right.png");
+    background-repeat: no-repeat;
+    background-position: 100%;
+    background-size: 100% 65%;
+  }
+}
+</style>

src/views/big-screen/road-components/road-statistic.vue

@@ -0,0 +1,102 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-18 15:22:31
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-18 17:29:19
+ * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
+ * @Description: 道路资产大屏-路产统计
+-->
+
+<template>
+  <div class="content">
+    <div
+      class="road-div"
+      v-for="(item, index) in roadList"
+      :key="`road-${index}`"
+    >
+      <div class="road-top">
+        <div class="road-top-name">
+          <a>{{ index + 1 }}</a
+          >{{ item.name }}
+        </div>
+        <div class="road-top-value">{{ item.value }}</div>
+      </div>
+      <div class="road-bottom">
+        <div
+          :style="{ width: `${(item.value / 300) * 100}%` }"
+          :class="`road-bottom-${index}`"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: "RoadStatistic",
+  data() {
+    return {
+      roadList: [
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+        { name: "G10152", value: 523 },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+
+  .road-div {
+    height: 3rem;
+    width: 100%;
+    padding: 0 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .index {
+      width: 4.5rem;
+    }
+
+    .name {
+      width: 5rem;
+    }
+
+    .value {
+      width: 6.5rem;
+    }
+
+    .road-top {
+      .road-top-name {
+        line-height: 1.5rem;
+      }
+    }
+
+    .road-bottom {
+      height: 0.5rem;
+      background-color: red;
+    }
+  }
+}
+</style>
+  

src/views/big-screen/road-screen.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-17 16:23:48
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-17 16:46:58
+ * @FilePath: \znxjxt-ui\src\views\big-screen\road-screen.vue
+ * @Description: 大屏-其他切换
+-->
+
+<template>
+  <div class="road-content">
+    <fssm-map ref="roadMap" :baseMap="'img_c'"></fssm-map>
+  </div>
+</template>
+  
+  <script>
+import FssmMap from "@/components/map/fssm-map.vue";
+export default {
+  name: "RoadScreen",
+  components: { FssmMap },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+.road-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

src/views/login.vue

@@ -141,7 +141,7 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+            this.$router.push({ path: "/screen" }).catch(()=>{});
           }).catch(() => {
             this.loading = false;
             if (this.captchaEnabled) {