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

src/views/SandTable/SandTable.vue

@@ -1,100 +1,110 @@
 <template>
-    <div class="sand-table">
-        <img :src="require('@assets/png/3dback.png')" class="i3dback">
-        <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud">
-        <StBack></StBack>
-        <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
-        <div class="sand-table-left" v-if="showPanel">
-            <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52  实况">
-                <weather class="pd-t-16" />
-            </PanelSand>
-            <PanelSand class="left-panel mg-t-16" title="等级评估">
-                <RankTable :data="levelTableData"></RankTable>
-            </PanelSand>
-            <PanelSand class="left-panel mg-t-16" title="等级评估">
-                <RankTable :data="levelTableData"></RankTable>
-            </PanelSand>
-            <PanelSandToolbar class="left-panel mg-t-16" title="部件">
-                <template v-slot:tools>
-                    <div class="exchange" @click="exchange1">
-                        <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
-                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
-                        <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
-                    </div>
-                </template>
-                <template v-slot:default>
-                    <RadarPieChart height="20.6vh" />
-                </template>
-            </PanelSandToolbar>
-        </div>
-        <div class="sand-table-right" v-if="showPanel">
-            <PanelSand class="right-panel" title="板块标题">
-                <el-row>
-                    <el-col :span="12" class="pre-img-box">
-                        <img v-if="!videoShow" class="pre-img" :src="require('@assets/png/p1.jpg')" />
-                        <video v-if="videoShow" class="pre-img" width="179" height="100" controls>
-                            <source :src="require('@assets/png/p.mp4')" type="video/mp4">
-                            您的浏览器不支持 video 标签。
-                        </video>
-                    </el-col>
-                    <el-col :span="12" class="pre-img-box">
-                        <img class="pre-img" :src="require('@assets/png/p2.jpg')" />
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12" class="pre-img-box">
-                        <img class="pre-img" :src="require('@assets/png/p3.jpg')" />
-                    </el-col>
-                    <el-col :span="12" class="pre-img-box">
-                        <img class="pre-img" :src="require('@assets/png/p4.jpg')" />
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12" class="pre-img-box">
-                        <img class="pre-img" :src="require('@assets/png/p5.jpg')" />
-                    </el-col>
-                    <el-col :span="12" class="pre-img-box">
-                        <img class="pre-img" :src="require('@assets/png/p6.jpg')" />
-                    </el-col>
-                </el-row>
-            </PanelSand>
-            <PanelSand class="right-panel mg-t-16" title="板块标题">
-                <div class="person-info-box mg-t-16">
-                    <img class="header mg-r-8 bg-green" :src="require('@assets/logo.png')" />
-                    <div class="person-info">
-                        <div class="green font-lg" style="font-weight: bold;">张三</div>
-                        <div class="white font-sm">
-                            <span>职务：高级检修工</span>
-                            <span class="mg-l-16">当前任务编号 000000</span>
-                        </div>
-                        <div class="white font-sm">平均检修时间 <span class="green">5</span> 小时</div>
-                    </div>
-                </div>
-                <div class="table mg-t-8">
-                    <Table :data="tableData" />
-                </div>
-            </PanelSand>
-            <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
-                <template v-slot:tools>
-                    <div class="exchange" @click="exchange">
-                        <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
-                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
-                        <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
-                    </div>
-                </template>
-                <template v-slot:default>
-                    <RadarPieChart height="21vh" />
-                </template>
-            </PanelSandToolbar>
+  <div class="sand-table">
+    <img :src="require('@assets/png/3dback.png')" class="i3dback" />
+    <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" />
+    <StBack></StBack>
+    <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
+    <div class="sand-table-left" v-if="showPanel">
+      <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52  实况">
+        <weather class="pd-t-16" />
+      </PanelSand>
+      <PanelSand class="left-panel mg-t-16" title="等级评估">
+        <RankTable :data="levelTableData"></RankTable>
+      </PanelSand>
+      <PanelSand class="left-panel mg-t-16" title="等级评估">
+        <RankTable :data="levelTableData"></RankTable>
+      </PanelSand>
+      <PanelSandToolbar class="left-panel mg-t-16" title="部件">
+        <template v-slot:tools>
+          <div class="exchange" @click="exchange1">
+            <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
+            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
+            <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
+          </div>
+        </template>
+        <template v-slot:default>
+          <RadarPieChart height="20.6vh" />
+        </template>
+      </PanelSandToolbar>
+    </div>
+    <div class="sand-table-right" v-if="showPanel">
+      <PanelSand class="right-panel" title="板块标题">
+        <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
+          <el-col
+            :span="12"
+            class="pre-img-box"
+            v-for="(cItem, cIndex) in pItem"
+            :key="cIndex"
+            @click="openVideoDialog(cItem)"
+          >
+            <div class="mask"></div>
+            <iframe
+              class="pre-img videoBoxiframe"
+              width="95%"
+              height="8.657vh"
+              :src="cItem.url + cItem.token"
+              v-if="cItem.switch"
+            />
+          </el-col>
+        </el-row>
+      </PanelSand>
+      <PanelSand class="right-panel mg-t-16" title="板块标题">
+        <div class="person-info-box mg-t-16">
+          <img
+            class="header mg-r-8 bg-green"
+            :src="require('@assets/logo.png')"
+          />
+          <div class="person-info">
+            <div class="green font-lg" style="font-weight: bold">张三</div>
+            <div class="white font-sm">
+              <span>职务：高级检修工</span>
+              <span class="mg-l-16">当前任务编号 000000</span>
+            </div>
+            <div class="white font-sm">
+              平均检修时间 <span class="green">5</span> 小时
+            </div>
+          </div>
         </div>
-        <div class="sand-table-bottom" v-if="showPanel">
-            <Ppanel title="利用小时"></Ppanel>
-            <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
-            <Ppanel title="MTBF" class="stb-p"></Ppanel>
-            <Ppanel title="MTTR" class="stb-p"></Ppanel>
-            <Ppanel title="MTTF" class="stb-p"></Ppanel>
+        <div class="table mg-t-8">
+          <Table :data="tableData" />
         </div>
+      </PanelSand>
+      <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
+        <template v-slot:tools>
+          <div class="exchange" @click="exchange">
+            <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
+            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
+            <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
+          </div>
+        </template>
+        <template v-slot:default>
+          <RadarPieChart height="21vh" />
+        </template>
+      </PanelSandToolbar>
     </div>
+    <div class="sand-table-bottom" v-if="showPanel">
+      <Ppanel title="利用小时"></Ppanel>
+      <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
+      <Ppanel title="MTBF" class="stb-p"></Ppanel>
+      <Ppanel title="MTTR" class="stb-p"></Ppanel>
+      <Ppanel title="MTTF" class="stb-p"></Ppanel>
+    </div>
+    <el-dialog
+      top="50px"
+      custom-class="modal"
+      v-model="showVideoDialog"
+      width="80%"
+      :destroy-on-close="true"
+      @closed="dialogVideoUrl = ''"
+    >
+      <iframe
+        class="videoBoxiframe"
+        width="95%"
+        height="800px"
+        :src="dialogVideoUrl"
+      />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -109,268 +119,351 @@ import Ppanel from "./component/p-panel.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
 
 export default {
-    // 名称
-    name: "SandTable",
-    // 使用组件
-    components: {
-        ThreeModel1,
-        PanelSand,
-        PanelSandToolbar,
-        Weather,
-        Table,
-        RadarPieChart,
-        StBack,
-        RankTable,
-        Ppanel,
-    },
-    // 数据
-    data() {
-        return {
-            videoShow: true,
-            showPanel: false,
-            exchangeBtn: false,
-            exchangeBtn1: false,
-            ForecastPower: [
-                {
-                    name: "今日预测电量",
-                    value: 103.62,
-                    total: 150,
-                },
-                {
-                    name: "月预测发电量",
-                    value: 98.62,
-                    total: 100,
-                },
-            ],
-            tableData: {
-                column: [
-                    {
-                        name: "标题",
-                        field: "v1",
-                        is_num: false,
-                        is_light: false,
-                    },
-                    {
-                        name: "标题",
-                        field: "v2",
-                        is_num: false,
-                        is_light: false,
-                    },
-                    {
-                        name: "标题",
-                        field: "v3",
-                        width: "150px",
-                        is_num: false,
-                        is_light: false,
-                    },
-                    {
-                        name: "标题",
-                        field: "v4",
-                        is_num: false,
-                        is_light: false,
-                    },
-                ],
-                data: [
-                    {
-                        v1: "内容内容",
-                        v2: "内容内容",
-                        v3: "内容内容内容内容内容",
-                        v4: "内容内容",
-                        is_light: false,
-                    },
-                    {
-                        v1: "内容内容",
-                        v2: "内容内容",
-                        v3: "内容内容内容内容内容",
-                        v4: "内容内容",
-                        is_light: false,
-                    },
-                    {
-                        v1: "内容内容",
-                        v2: "内容内容",
-                        v3: "内容内容内容内容内容",
-                        v4: "内容内容",
-                        is_light: false,
-                    },
-
-                    {
-                        v1: "内容内容",
-                        v2: "内容内容",
-                        v3: "内容内容内容内容内容",
-                        v4: "内容内容",
-                        is_light: false,
-                    },
-                ],
-            },
-            levelTableData: {
-                column: [{
-                    name: "编号",
-                    field: "no",
-                },{
-                    name: "等级",
-                    field: "level",
-                },{
-                    name: "分数",
-                    field: "score",
-                }],
-                data: [{
-                    no: "MHS_A01",
-                    level: "AAA",
-                    score: 98,
-                },{
-                    no: "MHS_A02",
-                    level: "AAA",
-                    score: 95,
-                },{
-                    no: "MHS_A01",
-                    level: "AA",
-                    score: 94,
-                },{
-                    no: "MHS_A02",
-                    level: "BB",
-                    score: 92,
-                },{
-                    no: "MHS_A01",
-                    level: "BB",
-                    score: 90,
-                }],
-            },
-        };
-    },
-    // 函数
-    methods: {
-        when: function() {
-            this.showPanel = true;
+  // 名称
+  name: "SandTable",
+  // 使用组件
+  components: {
+    ThreeModel1,
+    PanelSand,
+    PanelSandToolbar,
+    Weather,
+    Table,
+    RadarPieChart,
+    StBack,
+    RankTable,
+    Ppanel,
+  },
+  // 数据
+  data() {
+    return {
+      videoShow: true,
+      showPanel: false,
+      exchangeBtn: false,
+      exchangeBtn1: false,
+      videoArray: [
+        [
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_48_TD&autoplay=true",
+            switch: true,
+          },
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_48_TD&autoplay=true",
+            switch: true,
+          },
+        ],
+        [
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_01_TD&autoplay=true",
+            switch: true,
+          },
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_02_TD&autoplay=true",
+            switch: true,
+          },
+        ],
+        [
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_03_TD&autoplay=true",
+            switch: true,
+          },
+          {
+            url: "http://10.155.32.4:9984/ws.html",
+            token: "?token=SG01_04_TD&autoplay=true",
+            switch: true,
+          },
+        ],
+      ],
+      showVideoDialog: false,
+      dialogVideoUrl: "",
+      ForecastPower: [
+        {
+          name: "今日预测电量",
+          value: 103.62,
+          total: 150,
         },
-        exchange: function () {
-            this.exchangeBtn = !this.exchangeBtn;
+        {
+          name: "月预测发电量",
+          value: 98.62,
+          total: 100,
         },
-        exchange1: function () {
-            this.exchangeBtn1 = !this.exchangeBtn1;
-        },
-    },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
-    },
-    created() {
-        // 创建后
-    },
-    beforeMount() {
-        // 渲染前
+      ],
+      tableData: {
+        column: [
+          {
+            name: "标题",
+            field: "v1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "标题",
+            field: "v2",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "标题",
+            field: "v3",
+            width: "150px",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "标题",
+            field: "v4",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            v1: "内容内容",
+            v2: "内容内容",
+            v3: "内容内容内容内容内容",
+            v4: "内容内容",
+            is_light: false,
+          },
+          {
+            v1: "内容内容",
+            v2: "内容内容",
+            v3: "内容内容内容内容内容",
+            v4: "内容内容",
+            is_light: false,
+          },
+          {
+            v1: "内容内容",
+            v2: "内容内容",
+            v3: "内容内容内容内容内容",
+            v4: "内容内容",
+            is_light: false,
+          },
+
+          {
+            v1: "内容内容",
+            v2: "内容内容",
+            v3: "内容内容内容内容内容",
+            v4: "内容内容",
+            is_light: false,
+          },
+        ],
+      },
+      levelTableData: {
+        column: [
+          {
+            name: "编号",
+            field: "no",
+          },
+          {
+            name: "等级",
+            field: "level",
+          },
+          {
+            name: "分数",
+            field: "score",
+          },
+        ],
+        data: [
+          {
+            no: "MHS_A01",
+            level: "AAA",
+            score: 98,
+          },
+          {
+            no: "MHS_A02",
+            level: "AAA",
+            score: 95,
+          },
+          {
+            no: "MHS_A01",
+            level: "AA",
+            score: 94,
+          },
+          {
+            no: "MHS_A02",
+            level: "BB",
+            score: 92,
+          },
+          {
+            no: "MHS_A01",
+            level: "BB",
+            score: 90,
+          },
+        ],
+      },
+    };
+  },
+  // 函数
+  methods: {
+    openVideoDialog(item) {
+      if (item.url && item.token) {
+        this.dialogVideoUrl = item.url + item.token;
+        this.showVideoDialog = true;
+      }
     },
-    mounted() {
-        // 渲染后
+    when: function () {
+      this.showPanel = true;
     },
-    beforeUpdate() {
-        // 数据更新前
+    exchange: function () {
+      this.exchangeBtn = !this.exchangeBtn;
     },
-    updated() {
-        // 数据更新后
+    exchange1: function () {
+      this.exchangeBtn1 = !this.exchangeBtn1;
     },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
 };
 </script>
 
 <style lang="less">
 .sand-table {
-    width: 100%;
-    height: 91.667vh;
-    position: relative;
+  width: 100%;
+  height: 91.667vh;
+  position: relative;
 
-    .i3dback {
-        position: fixed;
-        z-index: -1;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-    }
+  .i3dback {
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
 
-    .i3dcloud {
-        position: absolute;
-        z-index: 2;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-    }
+  .i3dcloud {
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
 
-    .left-panel {
-        width: 360px;
-    }
+  .left-panel {
+    width: 360px;
+  }
 
-    .right-panel {
-        width: 36.852vh;
-    }
+  .right-panel {
+    width: 36.852vh;
+  }
 
-    .three-model-layer {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-    }
+  .three-model-layer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
 
-    .sand-table-left {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 2;
-    }
+  .sand-table-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+  }
+
+  .sand-table-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+  }
+
+  .sand-table-bottom {
+    position: absolute;
+    right: calc(50vw - 50.463vh);
+    bottom: 0;
+    z-index: 2;
+    display: flex;
 
-    .sand-table-right {
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 2;
+    .stb-p {
+      margin-left: 0.926vh;
     }
+  }
+
+  .pre-img-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.556vh;
+    padding: 0;
+    position: relative;
+    cursor: pointer;
 
     .sand-table-bottom {
-        position: absolute;
-        right: calc(50vw - 545px);
-        bottom: 0;
-        z-index: 2;
-        display: flex;
+      position: absolute;
+      right: calc(50vw - 545px);
+      bottom: 0;
+      z-index: 2;
+      display: flex;
+    }
 
-        .stb-p {
-            margin-left: 0.926vh;
-        }
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 5;
     }
 
-    .pre-img-box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 0.556vh;
-        padding: 0;
-        
-        .pre-img {
-            width: 95%;
-            height: 8.657vh;
-        }
+    .pre-img {
+      position: relative;
+      width: 95%;
+      height: 8.657vh;
+      z-index: 4;
     }
+  }
 
-    .person-info-box {
-        display: flex;
+  .person-info-box {
+    display: flex;
 
-        .header {
-            width: 75px;
-        }
+    .header {
+      width: 75px;
     }
+  }
 
-    .table {
-        width: calc(100% + 2.963vh);
-        margin-left: -1.481vh;
-        margin-bottom: -1.481vh;
+  .table {
+    width: calc(100% + 2.963vh);
+    margin-left: -1.481vh;
+    margin-bottom: -1.481vh;
 
-        .com-table thead tr th,
-        .com-table tr td {
-            padding: 0.556vh 0;
-            color: #fff;
-        }
+    .com-table thead tr th,
+    .com-table tr td {
+      padding: 0.556vh 0;
+      color: #fff;
     }
+  }
+}
 
-    .exchange {
-        cursor: pointer;
-    }
+.exchange {
+  cursor: pointer;
+}
+
+.videoBoxiframe {
+  border: none;
+  overflow: hidden;
+  cursor: pointer;
 }
 </style>

src/views/SandTable/component/st-back.vue

@@ -35,7 +35,7 @@
                     type="rotate"
                     from="0 436 436"
                     to="359 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>
@@ -46,7 +46,7 @@
                     type="rotate"
                     from="0 436 436"
                     to="359 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>
@@ -57,7 +57,7 @@
                     type="rotate"
                     from="0 436 436"
                     to="359 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>
@@ -68,7 +68,7 @@
                     type="rotate"
                     from="359 436 436"
                     to="0 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>
@@ -79,7 +79,7 @@
                     type="rotate"
                     from="135 436 436"
                     to="-224 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>
@@ -90,7 +90,7 @@
                     type="rotate"
                     from="225 436 436"
                     to="-134 436 436"
-                    dur="15s"
+                    dur="5s"
                     repeatCount="indefinite"
                 />
             </use>