冲突解决

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isLogined" class="main">
     <div class="header-body">
-      <div class="header-title" @mouseenter="showMenu">
+      <div class="header-title">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.667vh" height="3.704vh" viewBox="0 0 377.437 91.615" enable-background="new 0 0 377.437 91.615" xml:space="preserve">
           <g id="图层_1">
             <g>

src/components/chart/line/weather-line-chart.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "weather-line-chart",
+  componentName: "weather-line-char",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "270px",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+      let option = {
+        grid: {
+          top: 10,
+          bottom: 50,
+        },
+        xAxis: {
+          type: "category",
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        },
+        yAxis: [
+          {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false },
+          },
+        ],
+
+        series: [
+          {
+            type: "custom",
+            renderItem: function (param, api) {
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "image",
+                    style: {
+                      image:
+                        require("@assets/icon/svg/weather/02.png"),
+                      x: 0,
+                      y: 0,
+                      width: 20,
+                      height: 20,
+                    },
+                    position: [param.dataIndexInside * 80 +80, 0],
+                  },
+                ],
+              };
+            },
+            data: [0, 10, 20],
+            yAxisIndex: 0,
+            z: 11,
+          },{
+            type: 'custom',
+            renderItem: function(param, api){
+                        return {
+            type: 'path',
+            shape: {
+                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
+                      x: 0,
+                      y: 0,
+                      width: 20,
+                      height: 20,
+            },
+            rotation: 0,
+            position: [param.dataIndexInside * 80 +80, 200],
+            style: api.style({
+                stroke: '#555',
+                lineWidth: 1
+            })
+        };
+            },
+
+            data: [10,20,30],
+            z: 10
+        }
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/router/index.js

@@ -526,24 +526,35 @@ const routes = [{
 		path: '/health/fzyfx/windAnalysis/fx', // 风向
 		name: 'fxzstmain',
 		component: () => import('../views/windAnalysis/fxzstmain.vue'),
-	}
+	},
 	/***********************************************************智慧检修************************************************************* */
 	/***********************************************************安全管控************************************************************* */	
-	,
+	{
+		path: '/save',
+		name: 'save',
+		component: () =>
+			import( /* webpackChunkName: "personnel" */ '../views/NewPages/iframe4.vue'),
+	}, 
 	{
 		path: '/save/personnel',
 		name: 'personnel',
 		component: () =>
 			import( /* webpackChunkName: "personnel" */ '../views/NewPages/personnel.vue'),
-	}, {
+	}, 
+	{
 		path: "/globalMonitor", // 全局监视
 		name: "globalMonitor",
 		component: () =>
-			import( /* webpackChunkName: "globalMonitor" */ "../views/globalMonitor/index.vue"),
+			import( /* webpackChunkName: "globalMonitor" */ "../views/Others/index.vue"),
 	}
 		/***********************************************************安全管控************************************************************* */	
 
-		,
+		,{
+			path: "/others", // 报表总览
+			name: "Others",
+			component: () =>
+				import( /* webpackChunkName: "reportPandect" */ "../views/Others/index.vue"),
+		},
 		{
 			path: "/others/reportPandect", // 报表总览
 			name: "reportPandect",

src/views/HealthControl/Health10.vue

@@ -102,6 +102,7 @@
           <img-line-chart
             height="270px"
           />
+          <!-- <weather-line-chart/> -->
         </div>
       </el-col>
     </el-row>
@@ -133,7 +134,8 @@ import TableLineChart from "../../components/chart/line/table-line-chart.vue";
 import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
 import ZoomLineChart from "../../components/chart/line/zoom-line-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
-import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue"
+import WeatherLineChart from "@com/chart/line/weather-line-chart.vue";
+import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue";
 
 export default {
   setup() {},
@@ -144,7 +146,8 @@ export default {
     ImgLineChart,
     ZoomLineChart,
     HealthReport,
-    WtChooser
+    WtChooser,
+    WeatherLineChart,
   },
   data() {
     const that = this;

src/views/NewPages/iframe4.vue

@@ -1,66 +1,152 @@
 <template>
-    <div class="iframe4">
-      <div class="back"></div>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-1"></iframe>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-2"></iframe>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-3"></iframe>
-      <iframe src="https://www.baidu.com/" frameborder="0" class="iframe-4"></iframe>
+  <div class="iframe4">
+    <!-- <iframe src="http://10.75.17.10/doc/page/preview.asp" frameborder="0" class="iframe-2"></iframe> -->
+    <div class="iframe-1">
+      <personnel></personnel>
     </div>
+    <div class="iframe-2">
+      <div v-for="(pItem, pIndex) in videoArray" :key="pIndex" width="95%" height="48vh" @click="openVideoDialog(pItem)">
+        <div class="mask"></div>
+        <iframe :src="pItem.url + pItem.token" />
+      </div>
+    </div>
+    <div class="iframe-3">
+      <iframe src="http://192.168.1.52/webiui/#/online" frameborder="0"></iframe>
+    </div>
+    <div class="iframe-4">
+      <!-- <personnel></personnel> -->
+    </div>
+    <el-dialog top="50px" v-model="showVideoDialog" width="80vw" :destroy-on-close="true" :custom-class="videoDialogClass">
+      <iframe class="videoBoxiframe" width="100%" height="600px" :src="dialogVideoUrl" />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-
+import personnel from "./personnel.vue";
+import PanelSand from "@com/coms/panel/panel-sand.vue";
 export default {
-    setup() {},
-    components: {},
-    data() {
-        return {};
+  setup() {},
+  components: { personnel, PanelSand },
+  data() {
+    return {
+      showVideoDialog: false,
+      dialogVideoUrl: "",
+      videoArray: [
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=SBQ_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=NSS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=QS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=MHS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=XS_FDC_SC&autoplay=true",
+          switch: true,
+        },
+        {
+          url: "http://10.155.32.4:9984/ws.html",
+          token: "?token=PL_GDC_SC&autoplay=true",
+          switch: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    openVideoDialog(item) {
+      if (item.url && item.token) {
+        this.dialogVideoUrl = item.url + item.token;
+        this.showVideoDialog = true;
+      }
     },
-    created() {},
+  },
+  created() {},
 };
 </script>
 
 <style lang="less">
 .iframe4 {
-  .back {
-    position: fixed;
-    z-index: -1;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    background: url(../../assets/background-iframe4.png) no-repeat;
-    background-size: 100% 100%;
-  }
-
+  // width: 98.5vw;
+  // height: 98.5vh;
+  background: url(../../assets/background-iframe4.png) no-repeat;
+  background-size: 100% 100%;
+  background-position-y: -5.1vh;
+  display: flex;
+  flex-wrap: wrap;
+  height: 98vh;
   .iframe-1,
   .iframe-2,
   .iframe-3,
   .iframe-4 {
-    position: fixed;
-    z-index: 1;
-    width: 37.4vw;
+    // position: fixed;
+    // z-index: 1;
+    width: 36.8vw;
     height: 37.31vh;
   }
 
-  .iframe-1,
-  .iframe-3 {
-    left: 6.61vw;
+  .iframe-1 {
+    margin-left: 6.5vw;
+    margin-top: 5.3vh;
+    .personnel {
+      height: calc(36.6vh);
+      .personnel-box-item {
+        width: 11.5vw;
+      }
+    }
   }
-
-  .iframe-1,
   .iframe-2 {
-    top: 10.74vh;
-  }
-
-  .iframe-2,
-  .iframe-4 {
-    left: 56.09vw;
+    flex: 0 0 36.69vw;
+    margin-left: 11.9vw;
+    margin-top: 5.5vh;
+    position: relative;
+    div {
+      display: flex;
+      height: 18.2vh;
+      width: 12.2vw;
+      float: left;
+      position: relative;
+      iframe {
+        height: 18.2vh;
+        width: 12.2vw;
+        // float: left;
+      }
+      .mask {
+        flex: 0 0 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+      }
+    }
   }
-
-  .iframe-3,
-  .iframe-4 {
-    top: 57.31vh;
+  .iframe-3 {
+    height: calc(36.6vh);
+    margin-left: 6.5vw;
+    margin-top: -0.7vh;
+    background-color:seashell;
+    iframe {
+      height: 100%;
+      width: 100%;
+    }
   }
+  .modal.el-dialog {
+    background: rgba(18, 29, 28, 0.95);
+    }
 }
 </style>

src/views/Others/index.vue

@@ -0,0 +1,763 @@
+<template>
+  <div class="swiperBox">
+    <el-carousel style="width: 100%; margin: 5vh 0" trigger="click" type="card" height="80vh" :autoplay="false" indicator-position="none" :initial-index="1" arrow="none" @change="changeSwiper">
+      <!-- card-1 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            数据查询
+          </p>
+          <div class="df-table" @click="jumpUrl('/others/realSearch')">
+            <div class="sjcx-item" v-for="(value, key) in wppointColumn" :key="key">
+              <div class="sjcx-name">{{value}}</div>
+              <div class="sjcx-value">{{wppointnum[key]}}</div>
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <!-- card-2 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            预警记录
+          </p>
+          <div class="df-table">
+            <div class="sjcx-item" v-for="item in earlyAlarmColumn" :key="item" @click="jumpUrl(item.url)">
+              <div class="sjcx-name">{{item.name}}</div>
+              <div class="sjcx-value">{{earlyAlarmData[item.key] || '0'}}</div>
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <!-- card-3 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            专家知识
+            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
+          </p>
+          <div class="df-table">
+            <ComTable height="30vh" :data="tableData3" :pageSize="20">
+            </ComTable>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <!-- card-4 -->
+      <!-- <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            统计分析
+            <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i>
+          </p>
+           <ComTable height="30vh" :data="tableData7" :pageSize="20">
+            </ComTable>
+            <ComTable height="30vh" :data="tableData8" :pageSize="20">
+            </ComTable>
+        </div>
+      </el-carousel-item> -->
+      <!-- card-5 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            报表管理
+            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
+          </p>
+          <div class="imageBox1">
+            <div class="imgItem1" @click="jumpUrl('/others/tjfx')">
+              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
+              <p class="imgTitle">统计分析</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/others/bdzcx')">
+              <el-image class="img1" src="./static/img/新能源日报.png" fit="fill" />
+              <p class="imgTitle">表底值查询</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/others/xnyrb')">
+              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
+              <p class="imgTitle">新能源日报</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/others/xnyfdscyb')">
+              <el-image class="img1" src="./static/img/新能源日报.png" fit="fill" />
+              <p class="imgTitle">新能源风电生产月报</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/others/fdczzdy')">
+              <el-image class="img1" src="./static/img/新能源日报.png" fit="fill" />
+              <p class="imgTitle">风电场站自定义</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/others/fdxmzdy')">
+              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
+              <p class="imgTitle">风电项目自定义</p>
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+      <!-- card-6 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            自定制报表管理
+            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
+          </p>
+          <div class="df-table">
+            <ComTable height="30vh" :data="tableData4" :pageSize="20">
+            </ComTable>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import $ from "jquery";
+import ComTable from "./table.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+  // 使用组件
+  components: {
+    ComTable,
+  },
+  // 数据
+  data() {
+    const that = this;
+    return {
+      wppointnum: {},
+      wppointColumn: {
+        MHS_FDC: "麻黄山风电场",
+        NSS_FDC: "牛首山风电场",
+        QS_FDC: "青山风电场",
+        SBQ_FDC: "石板泉风电场",
+        XS_FDC: "香山风电场",
+        DWK_GDC: "大武口电站",
+        PL_GDC: "平罗光伏电站",
+        XH_GDC: "宣和光伏发电站",
+        MCH_GDC: "马场湖光发伏电站",
+        JSFW: "计算服务测点",
+      },
+      earlyAlarmData: {},
+      earlyAlarmColumn: [
+        { name: "停机事件管理", key: "tj", url: "/others/alarmCenter/tjsj" },
+        { name: "限电管理", key: "xd", url: "/others/alarmCenter/xdgl" },
+        { name: "状态转换记录", key: "", url: "" },
+        { name: "操作记录", key: "", url: "" },
+        { name: "升压站动作", key: "", url: "" },
+        { name: "升压站告警", key: "syzgj", url: "/others/alarmCenter/boosterAlarm" },
+        { name: "风机告警", key: "fjgj", url: "/others/alarmCenter/scadaAlarm" },
+        { name: "风机预警", key: "fjyj", url: "/others/alarmCenter/alarmcenter" },
+      ],
+      tableData1: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "发电量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "设备结构",
+            field: "timeDate",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "关键参数",
+            field: "value",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+      tableData2: {
+        column: [
+          {
+            name: "状态",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "当日数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "类型",
+            field: "timeDate",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "等级",
+            field: "value",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+      tableData3: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+      tableData4: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+
+  // 函数
+  methods: {
+    // 切换走马灯，并重新渲染样式
+    changeSwiper(index) {
+      this.$nextTick(() => {
+        const swiperDom = $(".swiperBox .el-carousel__item");
+        swiperDom
+          .eq(index)
+          .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
+        for (let i = 0; i < swiperDom.length; i++) {
+          if (i !== index) {
+            swiperDom.eq(i).find(".el-carousel__mask").css({
+              background: "rgb(4, 12, 11)",
+            });
+            swiperDom.eq(i).css({
+              background: "rgb(4, 12, 11)",
+              border: "1px solid rgba(5, 187, 76, 0.5)",
+            });
+          }
+        }
+      });
+    },
+
+    // 页面跳转
+    jumpUrl(url) {
+      this.$router.push(url);
+    },
+    //获取表格数据
+    getTableData() {
+      let that = this;
+      let tableArr1 = [
+        {
+          index: 1,
+          pointId: "青山风电场",
+          pointName: 3763,
+          timeDate: "1号机",
+          value: "16.93",
+        },
+        {
+          index: 2,
+          pointId: "石板泉风电场",
+          pointName: 4500,
+          timeDate: "2号机",
+          value: "20.56",
+        },
+        {
+          index: 3,
+          pointId: "牛首山风电场",
+          pointName: 3863,
+          timeDate: "3号机",
+          value: "38",
+        },
+        {
+          index: 4,
+          pointId: "香山风电场",
+          pointName: 3654,
+          timeDate: "4号机",
+          value: "54",
+        },
+        {
+          index: 5,
+          pointId: "麻黄山风电场",
+          pointName: 1863,
+          timeDate: "5号机",
+          value: "18",
+        },
+      ];
+      that.tableData1.data = tableArr1;
+      console.log("tableData1:", that.tableData1);
+
+      let tableArr2 = [
+        {
+          index: 1,
+          pointId: "停机事件管理",
+          pointName: 11.93,
+          timeDate: "升压站动作",
+          value: "2",
+        },
+        {
+          index: 2,
+          pointId: "限电管理",
+          pointName: 21.56,
+          timeDate: "升压站告警",
+          value: "5",
+        },
+        {
+          index: 3,
+          pointId: "状态转换记录",
+          pointName: 82,
+          timeDate: "风机告警",
+          value: "3",
+        },
+        {
+          index: 4,
+          pointId: "操作记录",
+          pointName: 54,
+          timeDate: "风机预警",
+          value: "1",
+        },
+      ];
+      that.tableData2.data = tableArr2;
+      console.log("tableData2:", that.tableData2);
+
+      let tableArr3 = [
+        {
+          index: 1,
+          pointId: "故障知识列表",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "安全措施知识",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "排查检修方案",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "预警知识",
+          pointName: 54,
+        },
+        {
+          index: 5,
+          pointId: "特征参数",
+          pointName: 44,
+        },
+        {
+          index: 6,
+          pointId: "风险辨识知识",
+          pointName: 24,
+        },
+        {
+          index: 7,
+          pointId: "作业指导知识",
+          pointName: 14,
+        },
+      ];
+      that.tableData3.data = tableArr3;
+      console.log("tableData3:", that.tableData3);
+
+      let tableArr4 = [
+        {
+          index: 1,
+          pointId: "风电场站自定义",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "风电项目自定义",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "光伏场站自定义",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "光伏项目自定义",
+          pointName: 54,
+        },
+      ];
+      that.tableData4.data = tableArr4;
+      console.log("tableData4:", that.tableData4);
+    },
+    getWppointnum() {
+      const that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getWppointnum",
+        success(res) {
+          that.wppointnum = res.data;
+        },
+      });
+    },
+    async getEarlyAlarmData() {
+      const that = this;
+      const {data} = await that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:8075/",
+        subUrl: "alarm/count/todaycount",
+        success(res) {
+          },
+      });
+      this.earlyAlarmData = data.data;
+    },
+  },
+
+  created() {},
+
+  mounted() {
+    let that = this;
+    this.$nextTick(() => {
+      this.changeSwiper(1);
+    });
+    that.getTableData();
+    this.getWppointnum();
+    this.getEarlyAlarmData();
+  },
+
+  unmounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.swiperBox,
+.itemBox {
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+  .df-table {
+    /deep/ .com-table thead tr th {
+      background-color: rgba(83, 98, 104, 0.2);
+      height: 30px;
+      line-height: 30px;
+      color: #9ca5a8;
+      font-weight: 400;
+      font-size: 20px !important;
+      position: sticky;
+      top: 0;
+      cursor: pointer;
+    }
+    /deep/ .com-table tbody tr td {
+      padding: 4px;
+      color: #393a3a;
+      text-align: center;
+      font-size: 20px !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .sjcx-item:nth-child(2n) {
+      background-color: rgba(96, 103, 105, 0.2);
+    }
+    .sjcx-item:hover {
+      color: #05bb4c;
+    }
+    .sjcx-item {
+      cursor: pointer;
+      // background-color: #edbf03;
+      display: flex;
+      height: 6.68vh;
+      line-height: 6.68vh;
+      font-size: 18pt;
+      text-align: center;
+      color: #9ca5a8;
+      .sjcx-name {
+        // background-color:aqua;
+        flex: 0 0 50%;
+      }
+      .sjcx-value {
+        // text-align: left;
+        // background-color:rosybrown;
+        flex: 0 0 50%;
+      }
+    }
+  }
+  .itemTitle {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .itemMoreBtn {
+      cursor: pointer;
+      font-size: 22px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .inline {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 24px;
+    margin-bottom: 30px;
+    width: 100%;
+    margin: 0 0 30px 0;
+    transition: 0.2s;
+
+    .l {
+      color: #b3bdc0;
+      width: 46%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: 4%;
+      transition: 0.2s;
+    }
+
+    .r {
+      color: #05bb4c;
+      position: relative;
+      width: 46%;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      margin-left: 4%;
+
+      &::after {
+        content: "";
+        position: absolute;
+        height: 10px;
+        left: 30px;
+        top: calc(50% - 5px);
+        background-color: #edbf03;
+        border-radius: 2px;
+      }
+    }
+
+    .r1::after {
+      width: 30px;
+    }
+
+    .r2::after {
+      width: 60px;
+    }
+
+    .r3::after {
+      width: 90px;
+    }
+
+    .r4::after {
+      width: 120px;
+    }
+
+    &:hover {
+      width: 80%;
+      margin: 0 10% 30px 10%;
+      color: #05bb4c;
+      transition: 0.2s;
+    }
+
+    &:hover .l {
+      color: #05bb4c;
+      transition: 0.2s;
+    }
+  }
+
+  .imageBox {
+    width: 100%;
+    display: flex;
+    // justify-content: start;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+    .imgItem {
+      cursor: pointer;
+      border: none;
+      margin-right: 1%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      flex-direction: column;
+      // width: 32%;
+      width: 45%;
+
+      .img {
+        width: 100%;
+        // height: 150px;
+        height: 300px;
+        border: 1px solid #b3bdc0;
+        transition: 0.2s;
+
+        &:hover {
+          border: 1px solid #05bb4c;
+          transition: 0.2s;
+        }
+      }
+
+      p {
+        width: 100%;
+        font-size: 16px;
+        color: #b3bdc0;
+        text-align: center;
+        transition: 0.2s;
+      }
+
+      &:hover p {
+        transition: 0.2s;
+        color: #05bb4c;
+      }
+    }
+  }
+  .imageBox1 {
+    width: 100%;
+    display: flex;
+    // justify-content: start;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+    .imgItem1 {
+      cursor: pointer;
+      border: none;
+      margin-right: 1%;
+      margin-bottom: 20px;
+      display: flex;
+      // justify-content: start;
+      justify-content: space-around;
+      align-items: center;
+      flex-direction: column;
+      width: 32%;
+
+      .img1 {
+        width: 100%;
+        height: 150px;
+        border: 1px solid #b3bdc0;
+        transition: 0.2s;
+
+        &:hover {
+          border: 1px solid #05bb4c;
+          transition: 0.2s;
+        }
+      }
+
+      p {
+        width: 100%;
+        font-size: 16px;
+        color: #b3bdc0;
+        text-align: center;
+        transition: 0.2s;
+      }
+
+      &:hover p {
+        transition: 0.2s;
+        color: #05bb4c;
+      }
+    }
+  }
+  .imageBox2 {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+    .imgItem2 {
+      cursor: pointer;
+      border: none;
+      margin-right: 1%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      flex-direction: column;
+      width: 45%;
+
+      .img2 {
+        width: 100%;
+        height: 180px;
+        border: 1px solid #b3bdc0;
+        transition: 0.2s;
+
+        &:hover {
+          border: 1px solid #05bb4c;
+          transition: 0.2s;
+        }
+      }
+
+      p {
+        width: 100%;
+        font-size: 16px;
+        color: #b3bdc0;
+        text-align: center;
+        transition: 0.2s;
+      }
+
+      &:hover p {
+        transition: 0.2s;
+        color: #05bb4c;
+      }
+    }
+  }
+
+  .iframe {
+    border: 0;
+    overflow: scroll;
+    background: #fff;
+  }
+}
+</style>
+
+<style lang="less">
+.itemBox {
+  .el-form-item,
+  .el-form-item__label {
+    font-size: 16px;
+  }
+
+  .el-form-item__label {
+    text-align: left;
+  }
+}
+</style>

src/views/SandTable/SandTable.vue

@@ -1024,7 +1024,7 @@ export default {
 
   .sand-table-bottom {
     position: absolute;
-    left: calc(50vw - 550px);
+    right: calc(50vw - 545px);
     bottom: 0;
     z-index: 2;
     display: flex;

src/views/layout/Header.vue

@@ -55,7 +55,7 @@ export default {
         {
           id: 'save',
           text: '安全管控',
-          path: '/save/personnel',
+          path: '/save',
           isActive: false
         },
         // {
@@ -67,7 +67,7 @@ export default {
         {
           id: 'others',
           text: '其他',
-          path: '/others/reportPandect',
+          path: '/others',
           isActive: false
         }
       ],