Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

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/Health1.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="info-chart">
           <panel class="info-chart-panel" :title="'损失电量分析'">
-            <vertival-bar-line-chart :height="'250px'" />
+            <vertival-bar-line-chart :height="'200px'" />
           </panel>
         </div>
       </div>
@@ -322,7 +322,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 287px;
+      height: 237px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -444,7 +444,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
-      height: calc(100vh - 500px);
+      max-height: calc(100vh - 440px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);

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

@@ -40,7 +40,7 @@
         <template v-slot:default>
           <RadarPieChart
             height="20.6vh"
-            :list="warmChartData"
+            :list="warnChartData"
             title="隐患情况"
           />
         </template>
@@ -63,7 +63,7 @@
               width="95%"
               height="8.657vh"
               :src="cItem.url + cItem.token"
-              v-if="false && cItem.switch"
+              v-if="cItem.switch"
             />
           </el-col>
         </el-row>
@@ -97,77 +97,24 @@
             </div>
           </div>
         </div>
-        <div class="table mg-t-8">
+        <div class="table mg-t-8" style="min-height: 180px">
           <Table :data="workData" />
         </div>
       </PanelSand>
-      <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
+      <PanelSandToolbar class="right-panel mg-t-16" title="部件">
         <template v-slot:tools>
-          <div class="exchange" @click="exchange">
-            <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
+          <div class="exchange" @click="changeBjSwitch">
+            <span :class="bjSwitch ? 'gray' : 'green'">库存</span>
             <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
-            <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
+            <span :class="bjSwitch ? 'green' : 'gray'">记录</span>
           </div>
         </template>
         <template v-slot:default>
-          <RadarPieChart height="21vh" />
+          <RadarPieChart height="21vh" :list="bjChartData" title="部件情况" />
         </template>
       </PanelSandToolbar>
     </div>
     <div class="sand-table-bottom" v-if="showPanel">
-      <!-- <Ppanel
-        title="利用小时"
-        :data="riseNumber(gxkmap.bg_dxkyss)"
-        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.ydxkyss"
-        :data1Icon="gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.tb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.hb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel title="设备可利用率"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_sbklyl)"
-        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.ysbklyl"
-        :data1Icon="gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTBF"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mtbf)"
-        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mtbf"
-        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTTR"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mttr)"
-        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mttr"
-        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTTF"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mttf)"
-        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mttf"
-        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel> -->
       <Ppanel
         title="利用小时"
         :data="riseNumber(gxkmap.bg_dxkyss)"
@@ -335,7 +282,10 @@
       <template #title>
         <div class="dialogTitle">
           停机详情
-          <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/gzzd/malfunctionRecall')"></i>
+          <i
+            class="jumpBtn el-icon-more"
+            @click="jumpUrl('/health/gzzd/malfunctionRecall')"
+          ></i>
         </div>
       </template>
       <el-form style="margin: 30px 0" label-width="120px" inline>
@@ -521,7 +471,7 @@ export default {
     return {
       videoShow: true,
       showPanel: false,
-      exchangeBtn: false,
+      bjSwitch: false,
       warnSwitch: false,
       timmer1: null,
       showWeatherDialog: false,
@@ -596,7 +546,8 @@ export default {
       ],
       showVideoDialog: false,
       dialogVideoUrl: "",
-      warmChartData: [],
+      warnChartData: [],
+      bjChartData: [],
       ForecastPower: [
         {
           name: "今日预测电量",
@@ -661,6 +612,7 @@ export default {
           {
             name: "停机时间",
             field: "stopTime",
+            width: "120px",
           },
           {
             name: "停机时长",
@@ -678,6 +630,7 @@ export default {
           {
             name: "推荐时间",
             field: "recodedate",
+            width: "120px",
           },
           {
             name: "类型",
@@ -775,6 +728,7 @@ export default {
         },
         success(res) {
           that.mapSource = res.data;
+          console.log(123123,res)
         },
       });
     },
@@ -790,15 +744,15 @@ export default {
           stationid: that.wpId,
         },
         success(res) {
-          let warmChartData = [];
+          let warnChartData = [];
           for (let key in res.data) {
             const ele = res.data[key];
-            warmChartData.push({
+            warnChartData.push({
               value: ele.count,
               name: ele.relatePartsText,
             });
           }
-          that.warmChartData = warmChartData;
+          that.warnChartData = warnChartData;
         },
       });
     },
@@ -814,15 +768,63 @@ export default {
           stId: that.wpId,
         },
         success(res) {
-          let warmChartData = [];
+          let warnChartData = [];
           for (let key in res.data) {
             const ele = res.data[key];
-            warmChartData.push({
+            warnChartData.push({
               value: ele.count,
               name: ele.type,
             });
           }
-          that.warmChartData = warmChartData;
+          that.warnChartData = warnChartData;
+        },
+      });
+    },
+
+    // 获取库存玫瑰图
+    getRepertoryMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "inventory/groupcount",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          let bjChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            bjChartData.push({
+              value: ele.curbal,
+              name: ele.description,
+            });
+          }
+          that.bjChartData = bjChartData;
+        },
+      });
+    },
+
+    // 获取记录玫瑰图
+    getRecordMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "equoperationrecord/equupdatecount",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          let bjChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            bjChartData.push({
+              value: ele.count,
+              name: ele.description,
+            });
+          }
+          that.bjChartData = bjChartData;
         },
       });
     },
@@ -907,7 +909,6 @@ export default {
 
     // 页面跳转
     jumpUrl(url) {
-      console.log("url", url);
       this.$router.push(url);
     },
 
@@ -915,8 +916,13 @@ export default {
       this.showPanel = true;
     },
 
-    exchange() {
-      this.exchangeBtn = !this.exchangeBtn;
+    changeBjSwitch() {
+      this.bjSwitch = !this.bjSwitch;
+      if (this.bjSwitch) {
+        this.getRecordMGT();
+      } else {
+        this.getRepertoryMGT();
+      }
     },
 
     changeWarnSwitch() {
@@ -937,6 +943,7 @@ export default {
     this.getWpHealthInfo();
     this.getTop4Info();
     this.getWarnMGT();
+    this.getRepertoryMGT();
     this.timeStr = new Date().formatDate("MM-dd hh:mm");
     this.timmer1 = setInterval(() => {
       this.timeStr = new Date().formatDate("MM-dd hh:mm");
@@ -1017,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/SandTable/component/ThreeModel1.vue

@@ -13,7 +13,11 @@
         v-show="info.show"
         :style="'left: ' + info.x + 'px; top: ' + info.y + 'px;'"
       >
-        <div class="fan-name pointer" @click.stop="info.clickName">
+        <div
+          class="fan-name pointer"
+          v-show="info.id != 'build'"
+          @click.stop="info.clickName"
+        >
           {{ info.name }}
         </div>
         <div
@@ -136,8 +140,8 @@ export default {
       csl: null,
       gzsl: null,
       htmlLayer: [
+        // 麻黄山
         {
-          // 麻黄山
           id: "fan-mhs",
           x: 0,
           y: 0,
@@ -177,8 +181,8 @@ export default {
             ]);
           },
         },
+        // 牛首山
         {
-          // 牛首山
           id: "fan-nss",
           x: 0,
           y: 0,
@@ -192,7 +196,6 @@ export default {
           position: null,
           name: "牛首山",
           clickName: function () {
-            console.log("牛首山");
             that.clickMapItem([
               "NSS_FDC_SC",
               "NG01_27_TD",
@@ -219,8 +222,8 @@ export default {
             ]);
           },
         },
+        // 青山
         {
-          // 青山
           id: "fan-qs",
           x: 0,
           y: 0,
@@ -260,8 +263,8 @@ export default {
             ]);
           },
         },
+        // 石板泉
         {
-          // 石板泉
           id: "fan-sbq",
           x: 0,
           y: 0,
@@ -275,7 +278,6 @@ export default {
           position: null,
           name: "石板泉",
           clickName: function () {
-            console.log("石板泉");
             that.clickMapItem([
               "SBQ_FDC_SC",
               "SG01_01_TD",
@@ -302,8 +304,8 @@ export default {
             ]);
           },
         },
+        // 香山
         {
-          // 香山
           id: "fan-xs",
           x: 0,
           y: 0,
@@ -317,7 +319,6 @@ export default {
           position: null,
           name: "香山",
           clickName: function () {
-            console.log("香山");
             that.clickMapItem([
               "XS_FDC_SC",
               "XG01_26_TD",
@@ -344,8 +345,8 @@ export default {
             ]);
           },
         },
+        // 大武口
         {
-          // 大武口
           id: "light-dwk",
           x: 0,
           y: 0,
@@ -365,8 +366,8 @@ export default {
             console.log("大武口");
           },
         },
+        // 平罗
         {
-          // 平罗
           id: "light-pl",
           x: 0,
           y: 0,
@@ -386,8 +387,8 @@ export default {
             console.log("平罗");
           },
         },
+        // 马场湖
         {
-          // 马场湖
           id: "light-mch",
           x: 0,
           y: 0,
@@ -407,8 +408,8 @@ export default {
             console.log("马场湖");
           },
         },
+        // 宣和
         {
-          // 宣和
           id: "light-xh",
           x: 0,
           y: 0,
@@ -428,8 +429,8 @@ export default {
             console.log("宣和");
           },
         },
+        // 海子井
         {
-          // 海子井
           id: "light-hzj",
           x: 0,
           y: 0,
@@ -449,6 +450,47 @@ export default {
             console.log("海子井");
           },
         },
+        // 大楼
+        {
+          id: "build",
+          x: 0,
+          y: 0,
+          show: true,
+          ox: 290,
+          oy: 120,
+          fanW: 60,
+          fanH: 100,
+          fanX: -260,
+          fanY: -200,
+          position: null,
+          name: "国电大厦",
+          clickName: function () {
+            that.clickMapItem([
+              "SBQ_FDC_SC",
+              "NSS_FDC_SC",
+              "QS_FDC_SC",
+              "MHS_FDC_SC",
+              "XS_FDC_SC",
+              "PL_GDC_SC",
+            ]);
+          },
+          clickFan: () => {
+            this.showFanInfo(this.htmlLayer[10].position);
+            this.jkd = this.htmlLayer[10].jkd;
+            this.ysl = this.htmlLayer[10].ysl;
+            this.lsl = this.htmlLayer[10].lsl;
+            this.csl = this.htmlLayer[10].csl;
+            this.gzsl = this.htmlLayer[10].gzsl;
+            that.clickMapItem([
+              "SBQ_FDC_SC",
+              "NSS_FDC_SC",
+              "QS_FDC_SC",
+              "MHS_FDC_SC",
+              "XS_FDC_SC",
+              "PL_GDC_SC",
+            ]);
+          },
+        },
       ],
       fanInfoLayer: {
         id: "fan-info",
@@ -505,6 +547,11 @@ export default {
     rinseData() {
       if (this.mapSource && this.mapSource.MHS_FDC) {
         for (let pKey in this.mapSource) {
+          if (pKey === "all") {
+            for (let cKey in this.mapSource[pKey]) {
+              this.htmlLayer[10][cKey] = this.mapSource[pKey][cKey];
+            }
+          }
           this.htmlLayer.forEach((ele) => {
             if (
               pKey.toLowerCase().indexOf(ele.id.toLowerCase().split("-")[1]) !==
@@ -676,9 +723,15 @@ export default {
           gltf.scene.position.set(0, 0, -35); // 10, 0, -50    -6, 0.13, -50
           scene.add(gltf.scene);
           gltf.scene.rotateY(120);
+          this.htmlLayer[10].position = {
+            x: -6,
+            y: -4,
+            z: -35,
+          };
           scene.onAfterRender = () => {
             this.$emit("when");
             this.$refs.pageLoading.hide();
+            this.setEveryHTML();
           };
         },
         (xhr) => {},

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
         }
       ],