塔吊检测页面完成

src/components/Index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="nav-header">
       <div class="left-nav">
-        <span>XXX项目后台管理系统</span>
+        <span style="font-size: 14px">XXX项目后台管理系统</span>
         <router-link to="/">数字工地</router-link>
         <router-link to="/realname">实名制</router-link>
         <router-link to="/supervisory">视频监控</router-link>

src/components/earlywarning/Index.vue

 <template>
-  <div>test2</div>
+  <div id="earlywarning">
+    <div class="top-stauts">
+      <div class="shadow">
+        <img src="@/assets/AIwarning/icon_d_qi@2x.png" alt="" />
+      </div>
+      <div class="status-container">
+        <div
+          class="status-count"
+          v-for="(status, index) in countStatus"
+          :key="index"
+        >
+          <img class="status-img" :src="status.img" />
+          <div class="status-detail">
+            <div class="status-text">
+              {{ status.text }}
+            </div>
+            <div class="status-number">
+              {{ status.counts }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="shadow">
+        <img src="@/assets/AIwarning/icon_d_ba@2x.png" alt="" />
+      </div>
+    </div>
+    <div class="mid-container">
+      <div class="today-warning">
+        <Title type="long" text="今日预警"></Title>
+        <ShadowContainer>
+          <vue-seamless-scroll
+            :data="warningList"
+            :class-option="classOption"
+            class="warp"
+            @ScrollEnd="scrollEnd"
+            refs="scroll"
+          >
+            <div
+              class="person-check"
+              v-for="(warns, index) in warningList"
+              :key="index"
+            >
+              <div class="portrait">
+                <img
+                  class="rect"
+                  src="@/assets/AIwarning/icon_d_san@2x.png"
+                  alt=""
+                />
+                <img
+                  class="person-head"
+                  src="@/assets/AIwarning/icon_d_si@2x.png"
+                />
+              </div>
+              <div class="person-detail">
+                <div class="name">
+                  <div class="name-text">{{ warns.title }}</div>
+                  <div class="work-no">
+                    <img
+                      class="warn-icon"
+                      src="@/assets/AIwarning/icon_d_er@2x.png"
+                      alt=""
+                    />
+                    {{ warns.warnno }}
+                  </div>
+                </div>
+                <div class="status">状态：{{ warns.status }}</div>
+                <div class="time">时间：{{ warns.time }}</div>
+              </div>
+            </div>
+          </vue-seamless-scroll>
+        </ShadowContainer>
+      </div>
+      <div class="right-container">
+        <Title type="long" text="今日统计"></Title>
+        <ShadowContainer>
+          <div class="total-chart">
+            <div class="chart-container">
+              <img class="custom-chart" src="@/assets/chart.png" />
+              <div ref="todayChart" id="today-chart"></div>
+            </div>
+            <div class="chart-container">
+              <img class="custom-chart" src="@/assets/chart.png" />
+              <div ref="historyChart" id="history-chart"></div>
+            </div>
+          </div>
+        </ShadowContainer>
+        <Title type="long" text="本月报警趋势"></Title>
+        <ShadowContainer>
+          <div id="warning-chart" ref="warningChart"></div>
+        </ShadowContainer>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+export default {
+  name: "EarlyWarning",
+  data() {
+    return {
+      countStatus: [
+        {
+          img: require("@/assets/AIwarning/icon_d_jiu@2x.png"),
+          text: "AI设备总数",
+          counts: 4,
+        },
+        {
+          img: require("@/assets/AIwarning/icon_d_si@2x(1).png"),
+          text: "总人数",
+          counts: 1611,
+        },
+        {
+          img: require("@/assets/AIwarning/icon_d_shiyi@2x.png"),
+          text: "今日报警",
+          counts: 102,
+        },
+      ],
+      warningList: [
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+        {
+          title: "未佩戴安全帽报警",
+          warnno: "江南钢筋场(21024829562495032058)",
+          status: "已进场",
+          time: "2023年03月19日 12:23:25",
+        },
+      ],
+      classOption: {
+        singleHeight: 152,
+      },
+      pieChartData: [
+        { value: 30, name: "已处理" },
+        { value: 10, name: "未处理" },
+      ],
+    };
+  },
+  methods: {
+    renderWarningChart() {
+      const chart = this.$echarts.init(this.$refs.warningChart);
+      const option = {
+        color: ["#17FDB7", "#1abcec", "#ffaf51"],
+        grid: {
+          top: 30,
+          bottom: 30,
+          left: 30,
+          right: 30,
+        },
+        legend: {
+          orient: "horizontal",
+          x: "center",
+          y: "top",
+          textStyle: {
+            fontSize: 12,
+            color: "rgba(225, 239, 255, 0.7)",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["03.23", "03.24", "03.25", "03.26", "03.27", "03.28", "03.29"],
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+          splitNumber: 4,
+          splitLine: {
+            lineStyle: {
+              color: "rgba(95, 120, 144, 0.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "未佩戴安全帽",
+            data: [2, 5, 4, 4, 7, 5, 6],
+            type: "line",
+            smooth: true,
+          },
+          {
+            name: "未穿反光衣",
+            type: "line",
+            data: [5, 2, 3, 4, 2, 2, 4],
+            smooth: true,
+          },
+          {
+            name: "重点区域滞留",
+            type: "line",
+            data: [0, 0, 0, 0, 0, 0, 0],
+            smooth: true,
+          },
+          {
+            name: "明火",
+            type: "line",
+            data: [0, 0, 0, 0, 0, 0, 0],
+            smooth: true,
+          },
+          {
+            name: "浓烟",
+            type: "line",
+            data: [0, 0, 0, 0, 0, 0, 0],
+            smooth: true,
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+    renderTodayChart() {
+      const chart = this.$echarts.init(this.$refs.todayChart);
+      const option = {
+        title: {
+          x: "27%", //X坐标
+          y: "37%",
+          text: "5",
+          subtext: "今日整改",
+          textAlign: "center",
+          textStyle: {
+            //标题样式
+            fontSize: 30,
+            fontWeight: "bolder",
+            color: "#00fcff",
+          },
+          subtextStyle: {
+            //副标题样式
+            fontSize: 16,
+            fontWeight: "bolder",
+            color: "rgba(255,255,255,0.7)",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          itemHeight: 12,
+          itemWidth: 12,
+          icon: "rect",
+          right: "10%",
+          top: "30%",
+          orient: "vertical",
+          itemGap: 40,
+          textStyle: {
+            color: "auto",
+            rich: {
+              a: {
+                fontSize: 14,
+                align: "left",
+              },
+              b: {
+                fontSize: 20,
+                align: "left",
+                lineHeight: 25,
+              },
+            },
+          },
+          formatter: (name) => {
+            let data = this.pieChartData;
+            let target;
+            for (let i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value;
+              }
+            }
+            let arr = [`{a|${name}}`, `{b|${target}} 台`];
+            return arr.join("   ");
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["60%", "70%"],
+            center: ["28%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 20,
+              borderWidth: 4,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+
+            data: this.pieChartData,
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+    renderHistoryChart() {
+      const chart = this.$echarts.init(this.$refs.historyChart);
+      const option = {
+        title: {
+          x: "27%", //X坐标
+          y: "37%",
+          text: "10",
+          subtext: "历史整改",
+          textAlign: "center",
+          textStyle: {
+            //标题样式
+            fontSize: 30,
+            fontWeight: "bolder",
+            color: "#00fcff",
+          },
+          subtextStyle: {
+            //副标题样式
+            fontSize: 16,
+            fontWeight: "bolder",
+            color: "rgba(255,255,255,0.7)",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          itemHeight: 12,
+          itemWidth: 12,
+          icon: "rect",
+          right: "10%",
+          top: "30%",
+          orient: "vertical",
+          itemGap: 40,
+          textStyle: {
+            color: "auto",
+            rich: {
+              a: {
+                fontSize: 14,
+                align: "left",
+              },
+              b: {
+                fontSize: 20,
+                align: "left",
+                lineHeight: 25,
+              },
+            },
+          },
+          formatter: (name) => {
+            let data = this.pieChartData;
+            let target;
+            for (let i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value;
+              }
+            }
+            let arr = [`{a|${name}}`, `{b|${target}} 台`];
+            return arr.join("   ");
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["60%", "70%"],
+            center: ["28%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 20,
+              borderWidth: 4,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+
+            data: this.pieChartData,
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+  },
+  mounted() {
+    this.renderWarningChart();
+    this.renderTodayChart();
+    this.renderHistoryChart();
+  },
+};
+</script>
+<style lang="less" scoped>
+#earlywarning {
+  padding: 12px 20px;
+}
+.top-stauts {
+  display: flex;
+  justify-content: center;
+  .shadow {
+    width: 300px;
+    img {
+      width: 100%;
+      vertical-align: top;
+    }
+  }
+  .status-container {
+    display: flex;
+    width: 65vw;
+    padding: 20px 0;
+  }
+  .status-count {
+    width: calc(100% / 3 - 20px);
+    margin: 0 10px;
+    background: url("@/assets/realname/rect.png") no-repeat;
+    background-size: 100% 100%;
+    padding: 12px 20px;
+    margin-bottom: 20px;
+    .status-img {
+      width: 120px;
+    }
+    .status-detail {
+      display: inline-block;
+      vertical-align: top;
+      width: calc(100% - 120px);
+      .status-text {
+        font-size: 22px;
+        color: #1abcec;
+        text-align: right;
+        line-height: 60px;
+      }
+      .status-number {
+        text-align: right;
+        font-size: 44px;
+        font-weight: bold;
+        color: #c6eaf9;
+        line-height: 60px;
+        letter-spacing: 4px;
+        text-shadow: 0 0 5px #c6eaf9;
+      }
+    }
+  }
+}
+.mid-container {
+  display: flex;
+  justify-content: space-between;
+  .today-warning,
+  .right-container {
+    width: calc(50% - 10px);
+  }
+}
+.warp {
+  width: 100%;
+  height: 680px;
+  overflow: hidden;
+}
+.person-check {
+  padding: 14px;
+  background: rgba(20, 86, 144, 0.2);
+  border-radius: 4px;
+  margin-bottom: 12px;
+  display: flex;
+  .portrait {
+    position: relative;
+    .rect {
+      width: 160px;
+      height: 110px;
+      vertical-align: top;
+    }
+    .person-head {
+      position: absolute;
+      top: 8px;
+      width: 144px;
+      height: 94px;
+      left: 8px;
+    }
+  }
+  .person-detail {
+    font-size: 14px;
+    color: #c6def9;
+    margin-left: 24px;
+    width: calc(100% - 104px);
+    line-height: calc(110px / 3);
+    .name {
+      display: flex;
+      justify-content: space-between;
+      .name-text {
+        font-size: 18px;
+        font-weight: 400;
+        color: #feba01;
+      }
+      .work-no {
+        font-size: 14px;
+        font-weight: 400;
+        color: #27acfb;
+        line-height: calc(110px / 3);
+        .warn-icon {
+          width: 16px;
+          vertical-align: top;
+          margin-top: 9px;
+        }
+      }
+    }
+  }
+}
+#warning-chart {
+  width: 100%;
+  height: 300px;
+}
+.total-chart {
+  display: flex;
+  justify-content: space-between;
+  .chart-container {
+    width: calc(50% - 20px);
+    position: relative;
+    .custom-chart {
+      position: absolute;
+      width: 30%;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 13%;
+    }
+  }
+  #today-chart,
+  #history-chart {
+    width: 100%;
+    height: 268px;
+  }
+}
+</style>
\ No newline at end of file

src/components/noise/Index.vue

+<template>
+  <div>test4</div>
+</template>
\ No newline at end of file

src/components/tower/Index.vue

+<template>
+  <div id="tower">
+    <div class="side-area">
+      <Title text="设备总览"></Title>
+      <ShadowContainer>
+        <div class="chart-container">
+          <img class="custom-chart" src="@/assets/chart.png" />
+          <div ref="deviceChart" id="device-chart"></div>
+        </div>
+      </ShadowContainer>
+      <Title text="各塔吊24h力矩百分比统计"></Title>
+      <ShadowContainer>
+        <div id="force-chart" ref="forceChart"></div>
+      </ShadowContainer>
+      <Title text="各塔吊24h倾角统计"></Title>
+      <ShadowContainer>
+        <div id="dip-chart" ref="dipChart"></div>
+      </ShadowContainer>
+    </div>
+    <div class="mid-area">
+      <div class="swagger-container">
+        <img class="lt" src="@/assets/lt.png" alt="" />
+        <img class="rt" src="@/assets/rt.png" alt="" />
+        <img class="rb" src="@/assets/rb.png" alt="" />
+        <img class="lb" src="@/assets/lb.png" alt="" />
+        <img class="container-img" src="@/assets/swiper-pic.png" alt="" />
+      </div>
+    </div>
+    <div class="side-area">
+      <Title text="报警信息"></Title>
+      <ShadowContainer>
+        <div class="warn-message">
+          <div class="warn-icon">
+            <img src="@/assets/no-message.png" alt="" />
+            <div>暂无信息~</div>
+          </div>
+        </div>
+      </ShadowContainer>
+      <Title text="维护信息"></Title>
+      <ShadowContainer>
+        <div class="tower-name">NJBR-TD-02#</div>
+        <div class="steps">
+          <el-steps :active="active" finish-status="success">
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">开工</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程一</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程二</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程二</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程二</div>
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <el-divider></el-divider>
+        <div class="tower-name">NJBR-TD-02#</div>
+        <div class="steps">
+          <el-steps :active="active" finish-status="success">
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">开工</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程一</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程二</div>
+              </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                <div class="step-title">2022-02-19</div>
+              </template>
+              <template #description>
+                <div class="step-description">工程二</div>
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+      </ShadowContainer>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Tower",
+  data() {
+    return {
+      pieChartData: [
+        { value: 4, name: "在线总数" },
+        { value: 3, name: "报警总数" },
+        { value: 2, name: "离线总数" },
+      ],
+      active: 3,
+    };
+  },
+  methods: {
+    renderDeviceChart() {
+      const chart = this.$echarts.init(this.$refs.deviceChart);
+      const option = {
+        title: {
+          x: "27%", //X坐标
+          y: "35%",
+          text: "9",
+          subtext: "总数",
+          textAlign: "center",
+          textStyle: {
+            //标题样式
+            fontSize: 30,
+            fontWeight: "bolder",
+            color: "#00fcff",
+          },
+          subtextStyle: {
+            //副标题样式
+            fontSize: 16,
+            fontWeight: "bolder",
+            color: "rgba(255,255,255,0.7)",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          itemHeight: 12,
+          itemWidth: 12,
+          icon: "rect",
+          right: "10%",
+          top: "15%",
+          orient: "vertical",
+          itemGap: 40,
+          textStyle: {
+            color: "auto",
+            rich: {
+              a: {
+                fontSize: 14,
+                align: "left",
+              },
+              b: {
+                fontSize: 20,
+                align: "left",
+                lineHeight: 25,
+              },
+            },
+          },
+          formatter: (name) => {
+            let data = this.pieChartData;
+            let target;
+            for (let i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value;
+              }
+            }
+            let arr = [`{a|${name}}`, `{b|${target}} 台`];
+            return arr.join("   ");
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["80%", "90%"],
+            center: ["28%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 20,
+              borderWidth: 4,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+
+            data: this.pieChartData,
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+    renderForceChart() {
+      const chart = this.$echarts.init(this.$refs.forceChart);
+      const option = {
+        color: ["#FFAF51", "#00a2ff"],
+        grid: {
+          top: 30,
+          bottom: 30,
+          left: 30,
+          right: 30,
+        },
+        legend: {
+          orient: "horizontal",
+          x: "center",
+          y: "top",
+          textStyle: {
+            fontSize: 12,
+            color: "rgba(225, 239, 255, 0.7)",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+          splitNumber: 4,
+          splitLine: {
+            lineStyle: {
+              color: "rgba(95, 120, 144, 0.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "NJBR-TD-01#",
+            data: [2, 5, 4, 4, 7, 5, 6],
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#FFAF51",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+            },
+          },
+          {
+            name: "NJBR-TD-02#",
+            type: "line",
+            data: [5, 2, 3, 4, 2, 2, 4],
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00a2ff",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+    renderDipChart() {
+      const chart = this.$echarts.init(this.$refs.dipChart);
+      const option = {
+        color: ["#E965C2", "#00FFDE"],
+        grid: {
+          top: 30,
+          bottom: 30,
+          left: 30,
+          right: 30,
+        },
+        legend: {
+          orient: "horizontal",
+          x: "center",
+          y: "top",
+          textStyle: {
+            fontSize: 12,
+            color: "rgba(225, 239, 255, 0.7)",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              fontSize: "12",
+              color: "#c6def9",
+            },
+          },
+          splitNumber: 4,
+          splitLine: {
+            lineStyle: {
+              color: "rgba(95, 120, 144, 0.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "NJBR-TD-01#",
+            data: [2, 5, 4, 4, 7, 5, 6],
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#E965C2",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+            },
+          },
+          {
+            name: "NJBR-TD-02#",
+            type: "line",
+            data: [5, 2, 3, 4, 2, 2, 4],
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00FFDE",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      };
+      chart.setOption(option);
+    },
+  },
+  mounted() {
+    this.renderDeviceChart();
+    this.renderForceChart();
+    this.renderDipChart();
+  },
+};
+</script>
+<style lang="less" scoped>
+#tower {
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  .side-area {
+    width: 25%;
+  }
+  .mid-area {
+    width: calc(50% - 40px);
+    margin: 0 20px;
+  }
+}
+.swagger-container {
+  position: relative;
+  .container-img {
+    width: 100%;
+    height: 88vh;
+    vertical-align: top;
+  }
+  .lt,
+  .lb,
+  .rb,
+  .rt {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+  }
+  .lt {
+    top: -2px;
+    left: -2px;
+  }
+  .lb {
+    left: -2px;
+    bottom: -2px;
+  }
+  .rb {
+    right: -2px;
+    bottom: -2px;
+  }
+  .rt {
+    right: -2px;
+    top: -2px;
+  }
+}
+#force-chart,
+#dip-chart {
+  width: 100%;
+  height: 210px;
+}
+.chart-container {
+  position: relative;
+  .custom-chart {
+    position: absolute;
+    width: 30%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 13%;
+  }
+}
+#device-chart {
+  width: 100%;
+  height: 210px;
+}
+.tower-name {
+  background: rgba(255, 175, 81, 0.1);
+  border: 1px solid #ffaf51;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #ffaf51;
+  display: inline-block;
+  padding: 6px 12px;
+  letter-spacing: 1px;
+}
+.steps {
+  padding-top: 20px;
+}
+.step-title {
+  position: relative;
+
+  color: #fff;
+  font-size: 12px;
+
+  .step-status {
+    position: absolute;
+    top: -170%;
+    color: #18d7b9;
+    font-size: 12px;
+  }
+}
+.step-description {
+  font-size: 14px;
+  color: #22c3ed;
+}
+::v-deep .el-step__icon-inner {
+  display: none !important;
+}
+
+::v-deep .el-step__head.is-success {
+  ::v-deep .el-step__icon {
+    border-width: 4px !important;
+    border-color: #67c23a !important;
+  }
+}
+::v-deep .el-step__icon.is-text {
+  border-width: 4px !important;
+  border-color: #22c2ec;
+}
+::v-deep .el-step__head.is-success {
+  .el-step__icon {
+    border-color: #67c23a !important;
+  }
+}
+::v-deep .el-divider {
+  background: #5f7890;
+  opacity: 0.5;
+}
+.warn-message {
+  position: relative;
+  height: 39vh;
+  .warn-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: #063e6c;
+    font-size: 16px;
+    text-align: center;
+    img {
+      width: 100px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/router/index.js

@@ -5,6 +5,9 @@ import Construction from "@/components/construction/Index"
 import RealName from "@/components/realname/Index"
 import EarlyWarning from "@/components/earlywarning/Index"
 import Supervisory from "@/components/supervisory/Index"
+import Tower from "@/components/tower/Index"
+import Noise from "@/components/noise/Index"
+
 
 Vue.use(VueRouter)
 
@@ -17,6 +20,8 @@ const router = new VueRouter({
                 { path: 'realname', component: RealName },
                 { path: 'earlywarning', component: EarlyWarning },
                 { path: 'supervisory', component: Supervisory },
+                { path: 'tower', component: Tower },
+                { path: 'noise', component: Noise },
             ]
         },
 

vue.config.js

@@ -8,7 +8,7 @@ module.exports = defineConfig({
         postcssOptions: {
           plugins: [
             require('postcss-plugin-px2rem')({
-              rootValue: 55,
+              rootValue: 54,
               mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
               minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
             }),