Merge branch 'update/V1.0.20' of http://61.161.152.110:10101/r/electronic-map into sl

src/assets/icon/svg/flash.svg

@@ -0,0 +1,3 @@
+<svg t="1627370439460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2198" width="200" height="200">
+    <path d="M754.4 490.2l-194.7-40.4 83.2-283.1-373.3 367.1 194.7 40.4-83.2 283.1 373.3-367.1z" fill="#2c2c2c" p-id="2199"></path>
+</svg>

src/assets/styles/app.less

@@ -96,3 +96,7 @@
 .blur {
   backdrop-filter: blur(3px);
 }
+
+.pointer {
+  cursor: pointer;
+}

src/views/Demo.vue

@@ -247,6 +247,14 @@
         </el-table-column>
       </el-table-column>
     </el-table>
+
+    <div>
+      <el-table class="custom-table" :data="treeTableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column>
+        <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+      </el-table>
+    </div>
   </el-scrollbar>
 
   <!--  icon -->
@@ -2543,6 +2551,46 @@ export default {
           },
         ],
       },
+      treeTableData: [
+        {
+          id: 1,
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          id: 2,
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          id: 3,
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+          children: [
+            {
+              id: 31,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+            {
+              id: 32,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+          ],
+        },
+        {
+          id: 4,
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
     };
   },
   created() {

src/views/NewPages/power-benchmarking.vue

@@ -1,5 +1,146 @@
 <template>
   <div class="power-benchmarking-page">
+    <div class="static">
+      <div class="static-main">
+        <span class="dot top-left"></span>
+        <span class="dot bottom-left"></span>
+        <span class="dot top-rignt"></span>
+        <span class="dot bottom-right"></span>
+        <div class="icon">
+          <i class="svg-icon svg-icon-balck">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+        </div>
+        <div class="info">
+          <div class="title">累计增发电量</div>
+          <div class="value">666.66</div>
+          <div class="unit">kwh</div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 867px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 6" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 430px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 3" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 430px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 3" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="top">
       <div class="top-left">
         <div class="top-left-header">
@@ -35,7 +176,7 @@
             <div class="right-btn" :class="{ active: btnIndex == 1 }" @click="rightBtnClick(1)">光伏</div>
           </div>
         </div>
-        <group-table :customClass="'table'" :data="eltableData" :height="'420px'" :pageSize="10" @headerClick="headerClick"></group-table>
+        <group-table :customClass="'table'" :data="eltableData" :height="'280px'" :pageSize="10" @headerClick="headerClick"></group-table>
       </div>
       <div class="top-right">
         <div class="rank-title">
@@ -46,7 +187,7 @@
           排行榜
         </div>
         <div class="rank-block"></div>
-        <group-table :customClass="'rank-table'" :data="greenTable" :height="'420px'">
+        <group-table :customClass="'rank-table'" :data="greenTable" :height="'280px'">
           <template v-slot:rank="scope">
             <div class="rank-index" :class="'index-' + scope.row.rank">
               {{ scope.row.rank }}
@@ -57,17 +198,18 @@
     </div>
     <div class="bottom">
       <panel :title="'指标分析'">
-        <multiple-bar-chart :list="barData" :height="'calc(100vh - 630px)'" :units="['功率数值（kW）']" />
+        <multiple-bar-chart :list="barData" :height="'calc(100vh - 660px)'" :units="['功率数值（kW）']" />
       </panel>
     </div>
   </div>
 </template>
 <script>
 import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import groupTable from "../../components/coms/table/group-table.vue";
 export default {
-  components: { groupTable, Panel, MultipleBarChart },
+  components: { groupTable, Panel, MultipleBarChart, SvgIcon },
   data() {
     let that = this;
     return {
@@ -546,6 +688,179 @@ export default {
 
 <style lang="less">
 .power-benchmarking-page {
+  .static {
+    display: flex;
+    height: 162px;
+    margin-bottom: 8px;
+
+    .static-main {
+      position: relative;
+      flex: 0 0 150px;
+      height: 162px;
+      border: 1px solid fade(@green, 60);
+      padding: 8px;
+      background: fade(@gray, 20);
+      margin-right: 8px;
+
+      .dot {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: @green;
+
+        &.top-left {
+          top: 5px;
+          left: 5px;
+        }
+
+        &.bottom-left {
+          bottom: 5px;
+          left: 5px;
+        }
+
+        &.top-rignt {
+          top: 5px;
+          right: 5px;
+        }
+
+        &.bottom-right {
+          bottom: 5px;
+          right: 5px;
+        }
+      }
+
+      .icon {
+        height: 40px;
+        margin: 8px 0;
+        display: flex;
+        justify-content: center;
+
+        i {
+          width: 36px;
+          height: 36px;
+          padding: 2px;
+          background: @green;
+          border-radius: 100%;
+          border: 4px solid @gray;
+
+          svg {
+            width: 24px;
+            height: 24px;
+            use {
+              fill: #000;
+            }
+          }
+        }
+      }
+
+      .info {
+        text-align: center;
+        .title {
+          font-size: 18px;
+          margin-bottom: 12px;
+        }
+
+        .value {
+          font-size: 18px;
+          color: @green;
+          margin-bottom: 4px;
+        }
+
+        .unit {
+          padding: 0 8px;
+          text-align: right;
+        }
+      }
+    }
+
+    .static-items {
+      border: 1px solid fade(@gray, 60);
+      margin-right: 8px;
+
+      .static-items-title {
+        text-align: center;
+        line-height: 27px;
+        height: 27px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: @green;
+      }
+
+      .items {
+        display: flex;
+
+        .item {
+          flex: 0 0 138px;
+          height: 133px;
+          margin-left: 8px;
+          background: fade(@gray, 20);
+          text-align: center;
+          padding: 8px;
+
+          & > .title {
+            font-size: 14px;
+            color: @gray-l;
+          }
+
+          & > .value {
+            font-size: 18px;
+            font-family: @font-family-num;
+            margin: 8px 0;
+          }
+
+          & > .up-down {
+            display: flex;
+            justify-content: space-around;
+            margin: 8px 0;
+
+            .up-down-item {
+              flex: 1 0 auto;
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+            }
+          }
+
+          & > .percent {
+            display: flex;
+            .percent-box {
+              position: relative;
+              height: 10px;
+              border: 1px solid @gray;
+              margin-right: 8px;
+              width: calc(100% - 38px);
+              padding: 2px;
+              margin-top: 2px;
+
+              .percent-bar {
+                height: 4px;
+              }
+
+              .sj {
+                position: absolute;
+                border-style: solid;
+                border-width: 5px 3px 5px 3px;
+                border-color: transparent transparent @green transparent;
+                width: 0px;
+                height: 0px;
+                top: 8px;
+              }
+            }
+          }
+
+          &:first-child {
+            margin-left: 0px;
+          }
+        }
+      }
+
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+
   .top {
     display: flex;
     margin-bottom: 16px;

src/views/SandTable/SandTable.vue

@@ -5,119 +5,27 @@
         <StBack></StBack>
         <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
         <div class="sand-table-left" v-if="showPanel">
-            <div class="com-panel-sand">
-                <div class="com-panel-sand-header font-sm white">
-                    <div class="sand-time">{{sandTime}}</div>
-                    <div class="sand-date mg-b-8">{{sandDate}}</div>
-                </div>
-                <div class="com-panel-body">
-                    <div class="weather-box">
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-天气1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">天气</div>
-                                <div class="font-lg green">多云转晴</div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-温度1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">温度</div>
-                                <div>
-                                    <span class="font-lg green">26</span>
-                                    <span class="font-sm white mg-l-8">℃</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-风速" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">风向</div>
-                                <div>
-                                    <span class="font-lg green">4-5</span>
-                                    <span class="font-sm white mg-l-8">级 西北风</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-能见度" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">能见度</div>
-                                <div>
-                                    <span class="font-lg green">20</span>
-                                    <span class="font-sm white mg-l-8">KM</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-湿度1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">湿度</div>
-                                <div>
-                                    <span class="font-lg green">75.0</span>
-                                    <span class="font-sm white mg-l-8">%</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-气压1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">气压</div>
-                                <div>
-                                    <span class="font-lg green">994</span>
-                                    <span class="font-sm white mg-l-8">kPa</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-日出1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">日出时间</div>
-                                <div class="font-lg green">04:36</div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-日落1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">日落时间</div>
-                                <div class="font-lg green">18:50</div>
-                            </div>
-                        </div>
+            <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>
-                </div>
-            </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="板块标题">
@@ -179,61 +87,12 @@
                 </template>
             </PanelSandToolbar>
         </div>
-        <div class="sand-table-bottom">
-            <div class="stb-chart-panel">
-                <PercentCard2></PercentCard2>
-            </div>
-            <div class="stb-chart-panel">
-                <PercentCard2 title="年计划完成率"></PercentCard2>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">日</div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">今日预测发电量</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">月</div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">月预测发电量</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">
-                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
-                        <svg-icon svgid="svg-风速" />
-                    </div>
-                </div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">风速</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">
-                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
-                        <svg-icon svgid="svg-功率" />
-                    </div>
-                </div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">功率</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</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>
     </div>
 </template>
@@ -242,11 +101,12 @@
 import ThreeModel1 from "./component/ThreeModel1.vue";
 import PanelSand from "@com/coms/panel/panel-sand.vue";
 import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
+import Weather from "./component/weather.vue";
 import StBack from "./component/st-back.vue";
 import Table from "@com/coms/table/table.vue";
+import RankTable from "./component/rank-table.vue";
+import Ppanel from "./component/p-panel.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
-import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";
 
 export default {
     // 名称
@@ -256,11 +116,12 @@ export default {
         ThreeModel1,
         PanelSand,
         PanelSandToolbar,
+        Weather,
         Table,
         RadarPieChart,
         StBack,
-        SvgIcon,
-        PercentCard2,
+        RankTable,
+        Ppanel,
     },
     // 数据
     data() {
@@ -268,6 +129,7 @@ export default {
             videoShow: true,
             showPanel: false,
             exchangeBtn: false,
+            exchangeBtn1: false,
             ForecastPower: [
                 {
                     name: "今日预测电量",
@@ -340,8 +202,39 @@ export default {
                     },
                 ],
             },
-            sandTime: "00:00:00",
-            sandDate: "0000年00月00日 星期日",
+            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,
+                }],
+            },
         };
     },
     // 函数
@@ -352,26 +245,8 @@ export default {
         exchange: function () {
             this.exchangeBtn = !this.exchangeBtn;
         },
-        initDateTime: function () {
-            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
-            const setDateTime = () => {
-                let myDate = new Date();
-                let year = myDate.getFullYear();
-                let month = myDate.getMonth() + 1;
-                month = month < 10 ? `0${month}` : month;
-                let day = myDate.getDate();
-                day = day < 10 ? `0${day}` : day;
-                let xq = days[myDate.getDay()];
-                let hour = myDate.getHours();
-                let minute = myDate.getMinutes();
-                minute = minute < 10 ? `0${minute}` : minute;
-                let second = myDate.getSeconds();
-                second = second < 10 ? `0${second}` : second;
-                this.sandTime = `${hour}:${minute}:${second}`;
-                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
-                window.requestAnimationFrame(setDateTime);
-            };
-            setDateTime();
+        exchange1: function () {
+            this.exchangeBtn1 = !this.exchangeBtn1;
         },
     },
     // 生命周期钩子
@@ -386,7 +261,6 @@ export default {
     },
     mounted() {
         // 渲染后
-        this.initDateTime();
     },
     beforeUpdate() {
         // 数据更新前
@@ -403,79 +277,6 @@ export default {
     height: 91.667vh;
     position: relative;
 
-    .com-panel-sand {
-        background: #53626826;
-        padding: 0 1.481vh 1.481vh 1.481vh;
-        border-top: 1px solid #15a952;
-        position: relative;
-        // width: 18.519vh;
-
-        &::after {
-            content: "";
-            position: absolute;
-            width: 5px;
-            height: 5px;
-            background: #15a952;
-            right: -2.5px;
-            top: -2.5px;
-        }
-
-        .com-panel-sand-header {
-            text-align: left;
-            position: relative;
-            padding: 0.833vh 0;
-            border-bottom: 1px solid #15a95266;
-
-            .sand-time {
-                color: #15A952;
-                font-weight: 400;
-                font-size: 24px;
-            }
-
-            .sand-date {
-                font-size: 12px;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-
-            &::after,
-            &::before {
-                content: "";
-                position: absolute;
-                bottom: -1px;
-                width: 15px;
-                height: 1px;
-                background: #15a952;
-            }
-
-            &::after {
-                left: 0;
-            }
-
-            &::before {
-                right: 0;
-            }
-
-            .com-panel-sand-sub-title {
-                position: absolute;
-                right: 0;
-                top: 0.833vh;
-            }
-        }
-
-        .weather-box {
-            .weather-item {
-                display: flex;
-                align-items: center;
-                margin-top: 16px;
-
-                .weather-icon {
-                    margin-right: 12px;
-                }
-            }
-        }
-    }
-
     .i3dback {
         position: fixed;
         z-index: -1;
@@ -486,7 +287,7 @@ export default {
     }
 
     .i3dcloud {
-        position: fixed;
+        position: absolute;
         z-index: 2;
         width: 100vw;
         height: 100vh;
@@ -495,7 +296,7 @@ export default {
     }
 
     .left-panel {
-        width: 36.852vh;
+        width: 360px;
     }
 
     .right-panel {
@@ -525,53 +326,13 @@ export default {
 
     .sand-table-bottom {
         position: absolute;
-        left: 18vh;
+        right: calc(50vw - 50.463vh);
         bottom: 0;
         z-index: 2;
         display: flex;
 
-        .stb-chart-panel {
-            background: #53626826;
-            margin-right: 4px;
-            padding: 0 16px;
-            height: 64px;
-        }
-
-        .stb-count-panel {
-            margin: 0 16px;
-            display: flex;
-            height: 64px;
-            align-items: center;
-
-            .stb-count-panel-icon {
-                width: 37px;
-                height: 37px;
-                background: #5362684D;
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 20px;
-                color: #94A4AB;
-
-                &::after,
-                &::before {
-                    content: '';
-                    position: absolute;
-                    width: 3px;
-                    height: 3px;
-                    background: #15A952;
-                    top: 17px;
-                }
-
-                &::after {
-                    left: -3px;
-                }
-
-                &::before {
-                    right: -3px;
-                }
-            }
+        .stb-p {
+            margin-left: 0.926vh;
         }
     }
 
@@ -583,7 +344,8 @@ export default {
         padding: 0;
         
         .pre-img {
-            width: 98%;
+            width: 95%;
+            height: 8.657vh;
         }
     }
 

src/views/SandTable/SandTable_old1.vue

@@ -0,0 +1,613 @@
+<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">
+            <div class="com-panel-sand">
+                <div class="com-panel-sand-header font-sm white">
+                    <div class="sand-time">{{sandTime}}</div>
+                    <div class="sand-date mg-b-8">{{sandDate}}</div>
+                </div>
+                <div class="com-panel-body">
+                    <div class="weather-box">
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-天气1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">天气</div>
+                                <div class="font-lg green">多云转晴</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-温度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">温度</div>
+                                <div>
+                                    <span class="font-lg green">26</span>
+                                    <span class="font-sm white mg-l-8">℃</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-风速" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">风向</div>
+                                <div>
+                                    <span class="font-lg green">4-5</span>
+                                    <span class="font-sm white mg-l-8">级 西北风</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-能见度" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">能见度</div>
+                                <div>
+                                    <span class="font-lg green">20</span>
+                                    <span class="font-sm white mg-l-8">KM</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-湿度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">湿度</div>
+                                <div>
+                                    <span class="font-lg green">75.0</span>
+                                    <span class="font-sm white mg-l-8">%</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-气压1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">气压</div>
+                                <div>
+                                    <span class="font-lg green">994</span>
+                                    <span class="font-sm white mg-l-8">kPa</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日出1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日出时间</div>
+                                <div class="font-lg green">04:36</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日落1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日落时间</div>
+                                <div class="font-lg green">18:50</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </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>
+        <div class="sand-table-bottom">
+            <div class="stb-chart-panel">
+                <PercentCard2></PercentCard2>
+            </div>
+            <div class="stb-chart-panel">
+                <PercentCard2 title="年计划完成率"></PercentCard2>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">日</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">今日预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">月</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">月预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-风速" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">风速</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-功率" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">功率</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ThreeModel1 from "./component/ThreeModel1.vue";
+import PanelSand from "@com/coms/panel/panel-sand.vue";
+import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
+import StBack from "./component/st-back.vue";
+import Table from "@com/coms/table/table.vue";
+import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";
+
+export default {
+    // 名称
+    name: "SandTable",
+    // 使用组件
+    components: {
+        ThreeModel1,
+        PanelSand,
+        PanelSandToolbar,
+        Table,
+        RadarPieChart,
+        StBack,
+        SvgIcon,
+        PercentCard2,
+    },
+    // 数据
+    data() {
+        return {
+            videoShow: true,
+            showPanel: false,
+            exchangeBtn: 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,
+                    },
+                ],
+            },
+            sandTime: "00:00:00",
+            sandDate: "0000年00月00日 星期日",
+        };
+    },
+    // 函数
+    methods: {
+        when: function() {
+            this.showPanel = true;
+        },
+        exchange: function () {
+            this.exchangeBtn = !this.exchangeBtn;
+        },
+        initDateTime: function () {
+            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+            const setDateTime = () => {
+                let myDate = new Date();
+                let year = myDate.getFullYear();
+                let month = myDate.getMonth() + 1;
+                month = month < 10 ? `0${month}` : month;
+                let day = myDate.getDate();
+                day = day < 10 ? `0${day}` : day;
+                let xq = days[myDate.getDay()];
+                let hour = myDate.getHours();
+                let minute = myDate.getMinutes();
+                minute = minute < 10 ? `0${minute}` : minute;
+                let second = myDate.getSeconds();
+                second = second < 10 ? `0${second}` : second;
+                this.sandTime = `${hour}:${minute}:${second}`;
+                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
+                window.requestAnimationFrame(setDateTime);
+            };
+            setDateTime();
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.initDateTime();
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.sand-table {
+    width: 100%;
+    height: 91.667vh;
+    position: relative;
+
+    .com-panel-sand {
+        background: #53626826;
+        padding: 0 1.481vh 1.481vh 1.481vh;
+        border-top: 1px solid #15a952;
+        position: relative;
+        // width: 18.519vh;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background: #15a952;
+            right: -2.5px;
+            top: -2.5px;
+        }
+
+        .com-panel-sand-header {
+            text-align: left;
+            position: relative;
+            padding: 0.833vh 0;
+            border-bottom: 1px solid #15a95266;
+
+            .sand-time {
+                color: #15A952;
+                font-weight: 400;
+                font-size: 24px;
+            }
+
+            .sand-date {
+                font-size: 12px;
+                font-weight: 400;
+                color: #FFFFFF;
+            }
+
+            &::after,
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                width: 15px;
+                height: 1px;
+                background: #15a952;
+            }
+
+            &::after {
+                left: 0;
+            }
+
+            &::before {
+                right: 0;
+            }
+
+            .com-panel-sand-sub-title {
+                position: absolute;
+                right: 0;
+                top: 0.833vh;
+            }
+        }
+
+        .weather-box {
+            .weather-item {
+                display: flex;
+                align-items: center;
+                margin-top: 16px;
+
+                .weather-icon {
+                    margin-right: 12px;
+                }
+            }
+        }
+    }
+
+    .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;
+    }
+
+    .left-panel {
+        width: 36.852vh;
+    }
+
+    .right-panel {
+        width: 36.852vh;
+    }
+
+    .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-right {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 2;
+    }
+
+    .sand-table-bottom {
+        position: absolute;
+        left: 18vh;
+        bottom: 0;
+        z-index: 2;
+        display: flex;
+
+        .stb-chart-panel {
+            background: #53626826;
+            margin-right: 4px;
+            padding: 0 16px;
+            height: 64px;
+        }
+
+        .stb-count-panel {
+            margin: 0 16px;
+            display: flex;
+            height: 64px;
+            align-items: center;
+
+            .stb-count-panel-icon {
+                width: 37px;
+                height: 37px;
+                background: #5362684D;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                color: #94A4AB;
+
+                &::after,
+                &::before {
+                    content: '';
+                    position: absolute;
+                    width: 3px;
+                    height: 3px;
+                    background: #15A952;
+                    top: 17px;
+                }
+
+                &::after {
+                    left: -3px;
+                }
+
+                &::before {
+                    right: -3px;
+                }
+            }
+        }
+    }
+
+    .pre-img-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 0.556vh;
+        padding: 0;
+        
+        .pre-img {
+            width: 98%;
+        }
+    }
+
+    .person-info-box {
+        display: flex;
+
+        .header {
+            width: 75px;
+        }
+    }
+
+    .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;
+        }
+    }
+
+    .exchange {
+        cursor: pointer;
+    }
+}
+</style>

src/views/SandTable/component/ThreeModel1.vue

@@ -209,7 +209,7 @@ export default {
         // 灯光
         initLight: function() {
             // let light = new THREE.PointLight(0xffffff, 2);
-            let light = new THREE.AmbientLight(0xffffff, 1);
+            let light = new THREE.AmbientLight(0xffffff, 5);
             // light.position.set(50, 50, 50);
             scene.add(light);
         },
@@ -309,6 +309,18 @@ export default {
                     let light = gltf.scene.children[0].children[0];
                     rootNode.remove(light);
                     this.setLightPosition(rootNode, light);
+                },
+                (xhr) => {},
+                function(error) {
+                    console.error("load error!" + error.getWebGLErrorMessage());
+                }
+            );
+            loaderGround.load(
+                "static/3d/build.gltf",
+                (gltf) => {
+                    gltf.scene.position.set(10, 0, -50);
+                    scene.add(gltf.scene);
+                    gltf.scene.rotateY(120);
                     scene.onAfterRender = () => {
                         this.$emit("when");
                         this.$refs.pageLoading.hide();
@@ -322,6 +334,22 @@ export default {
         },
         // 改变元素底盘的颜色（带底盘的）
         changeObjectColor: function (obj, colorName) {
+            for (let i = 1; i <= 4; i++) {
+                let c = obj.getObjectByName(`${obj.name}_c_${i}`);
+                c.material = new THREE.MeshBasicMaterial({
+                    color: 0xf0f0f0,
+                    opacity: 0.8,
+                    transparent: true,
+                });
+            }
+            let leaf = obj.getObjectByName(`${obj.name}_leaf`);
+            for (let chind of leaf.children) {
+                chind.material = new THREE.MeshBasicMaterial({
+                    color: 0xf0f0f0,
+                    opacity: 0.8,
+                    transparent: true,
+                });
+            }
             let chassis = obj.getObjectByName(`${obj.name}_chassis`);
             let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
             chassis.material = new THREE.MeshBasicMaterial({
@@ -346,6 +374,20 @@ export default {
         setFanName: function (obj, name) {
             obj.name = name;
             obj.userData.name = name;
+            // "Cylinder881" "Cone277"
+            let Cylinder881 = obj.getObjectByName("Cylinder881");
+            let Cylinder882 = obj.getObjectByName("Cylinder882");
+            let Cylinder883 = obj.getObjectByName("Cylinder883");
+            let Cone277 = obj.getObjectByName("Cone277");
+            Cylinder881.name = `${name}_c_1`;
+            Cylinder881.userData.name = `${name}_c_1`;
+            Cylinder882.name = `${name}_c_2`;
+            Cylinder882.userData.name = `${name}_c_2`;
+            Cylinder883.name = `${name}_c_3`;
+            Cylinder883.userData.name = `${name}_c_3`;
+            Cone277.name = `${name}_c_4`;
+            Cone277.userData.name = `${name}_c_4`;
+            // "Box719")
             let fanBig1_1 = obj.getObjectByName("Box719");
             let fanBig1_2 = obj.getObjectByName("Box720");
             let fanBig1_3 = obj.getObjectByName("Box721");
@@ -469,13 +511,13 @@ export default {
             obj.remove(Box665);
             // 大武口
             let light_dwk = obj.clone(true);
-            light_dwk.position.set(-6, 0.13, -53);
+            light_dwk.position.set(-6, 0.13, -50);
             this.setLightName(light_dwk, "light_dwk");
             rootNode.add(light_dwk);
             this.htmlLayer[5].position = light_dwk.position;
             // 平罗
             let light_pl = obj.clone(true);
-            light_pl.position.set(-3, 0.13, -60);
+            light_pl.position.set(-3, 0.13, -55);
             this.setLightName(light_pl, "light_pl");
             rootNode.add(light_pl);
             this.htmlLayer[6].position = light_pl.position;
@@ -602,7 +644,7 @@ export default {
 .three-model {
     position: relative;
     overflow: hidden;
-    left: -112px;
+    // left: -112px;
 
     .map-3d {
         position: absolute;

src/views/SandTable/component/p-panel.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="p-panel">
+        <div class="p-panel-title font-sm">{{ title }}</div>
+        <div class="p-panel-body">
+            <div class="pp-info">
+                <div class="pp-info-days mg-r-16">
+                    <span class="font-num green font-lg pp-info-days-num">{{ days }}</span>
+                    <span class="gray font-sm">{{ daysUnit }}</span>
+                </div>
+                <div class="pp-info-data mg-l-16">
+                    <span class="gray-l font-sm">{{ data1Str }}</span>
+                    <span class="pp-icon-l svg-icon" :class="data1IconClass">
+                        <svg-icon :svgid="data1Icon" />
+                    </span>
+                    <span class="gray-l font-sm">{{ data2Str }}</span>
+                    <span class="pp-icon-r svg-icon" :class="data2IconClass">
+                        <svg-icon :svgid="data2Icon" />
+                    </span>
+                </div>
+            </div>
+            <div class="pp-data">
+                <div class="pp-tip" :style="'margin-left: ' + (data*100) + '%'">
+                    <div class="pp-tip-data font-sm">{{ flip ? ((1 - data) * 100).toFixed(2) + "%" : (data * 100).toFixed(2) + "%" }}</div>
+                    <div class="pp-tip-icon"><i class="el-icon-caret-bottom font-sm" :style="'color: ' + dataColor"></i></div>
+                </div>
+                <div class="pp-data-box" :style="'border-color: ' + dataColor + '4d; background: ' + backColor + ';'">
+                    <div class="pp-data-split" v-for="index of 20" :key="index"></div>
+                    <div class="pp-data-num" :style="'width: ' + (data*100) + '%; background: ' + dataColor + ';'"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+    // 名称
+    name: "Ppanel",
+    // 使用组件
+    components: {
+        SvgIcon,
+    },
+    // 传入参数
+    props: {
+        title: {
+            type: String,
+            default: "利用小时",
+        },
+        days: {
+            type: Number,
+            default: 88.5,
+        },
+        daysUnit: {
+            type: String,
+            default: "天",
+        },
+        data1Str: {
+            type: String,
+            default: "环",
+        },
+        data1IconClass: {
+            type: String,
+            default: "svg-icon-sm svg-icon-green",
+        },
+        data1Icon: {
+            type: String,
+            default: "svg-arrow-up-1",
+        },
+        data2Str: {
+            type: String,
+            default: "同",
+        },
+        data2Icon: {
+            type: String,
+            default: "svg-arrow-dpwn-1",
+        },
+        data2IconClass: {
+            type: String,
+            default: "svg-icon-sm svg-icon-yellow",
+        },
+        data: {
+            type: Number,
+            default: 0.75,
+        },
+        flip: {
+            type: Boolean,
+            default: false,
+        },
+        dataColor: {
+            type: String,
+            default: "#05BB4C",
+        },
+        backColor: {
+            type: String,
+            default: "#4B55AE",
+        },
+    },
+    emits: {},
+    // 数据
+    data() {
+        return {};
+    },
+    // 函数
+    methods: {},
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {},
+    updated() {},
+};
+</script>
+
+<style lang="less">
+.p-panel {
+    background: #272e3d66;
+
+    .font-sm {
+        font-size: 12px;
+    }
+
+    .p-panel-title {
+        height: 2.778vh;
+        line-height: 2.778vh;
+        text-align: center;
+        color: #ffffff;
+        border-bottom: 1px solid #ffffff66;
+    }
+
+    .p-panel-body {
+        .pp-info {
+            padding-top: 1.111vh;
+            display: flex;
+
+            .pp-info-days-num {
+                padding: 1.204vh 0.926vh 0 1.944vh;
+            }
+
+            .pp-info-data {
+                margin-left: auto;
+
+                .pp-icon-l {
+                    padding: 1.111vh 2.037vh 0 0.556vh;
+                }
+
+                .pp-icon-r {
+                    padding: 1.111vh 0.833vh 0 0.556vh;
+                }
+            }
+        }
+
+        .pp-data {
+            padding: 0.741vh 0.556vh 1.389vh 0.556vh;
+            .pp-tip {
+                display: inline-block;
+
+                .pp-tip-data,
+                .pp-tip-icon {
+                    margin-left: -100%;
+                    text-align: center;
+                }
+
+                .pp-tip-icon {
+                    margin-top: -0.37vh;
+                }
+            }
+
+            .pp-data-box {
+                height: 0.741vh;
+                width: 200px;
+                border: 1px solid;
+                position: relative;
+                display: flex;
+                transform: skewX(-25deg);
+
+                .pp-data-split {
+                    width: 10px;
+                    height: 100%;
+                    z-index: 2;
+                    
+                    +.pp-data-split {
+                        border-left: 1px solid #172F2E;
+                    }
+                }
+
+                .pp-data-num {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/SandTable/component/rank-table.vue

@@ -0,0 +1,285 @@
+<template>
+    <table class="com-table rank-table">
+        <thead>
+            <tr>
+                <th>排名</th>
+                <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+                    {{ col.name }}
+                </th>
+            </tr>
+        </thead>
+        <el-scrollbar>
+            <tbody :style="{ height: height }">
+                <tr v-for="(row, index) of tableData" :key="index" :class="'rank rank' + index">
+                    <td class="rank-index">
+                        <span>{{ index + 1 }}</span>
+                    </td>
+                    <td
+                        v-for="(col, i) of data.column"
+                        :key="i"
+                        :style="{ width: col.width }"
+                        :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+                        @mouseleave="leave()"
+                    >
+                        <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)">
+                        </component>
+                    </td>
+                </tr>
+            </tbody>
+        </el-scrollbar>
+        <el-pagination
+            class="mg-t-8"
+            v-if="pageable"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="data.total"
+            v-bind="elPaggingProps"
+        >
+        </el-pagination>
+    </table>
+</template>
+
+<script>
+export default {
+    // 名称
+    name: "ComTable",
+    // 使用组件
+    components: {},
+    // 传入参数
+    props: {
+        /**
+        *   {
+                column: [{
+                    name: "风机名称",
+                    field: "name",
+                    type:'div',
+                    width:'', // 宽度
+                    is_num: false, // 是否为数字
+                    is_light: false, // 是否高亮
+                    template:function(){ }
+                    click:function(){} //点击事件
+                    sortable:fasle // 排序
+                    // 新增用于在表格中使用动态三方组件
+                    type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                    props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                },{
+                    name: "冷却风温度",
+                    field: "lqf",
+                    is_num: true,
+                    is_light: false
+                }],
+                data: [{
+                    name: "1E01",
+                    lqf: 15.78,
+                    is_light: false
+                }],
+                total:200
+            }
+        */
+        data: Object,
+        // hover 样式
+        showHover: {
+            type: Boolean,
+            default: true,
+        },
+        // 列高亮
+        showColHover: {
+            type: Boolean,
+            default: false,
+        },
+        canScroll: {
+            type: Boolean,
+            default: true,
+        },
+        pageSize: {
+            type: Number,
+            default: 0,
+        },
+        height: {
+            type: String,
+            default: "",
+        },
+        // 新增 支持 pagging 组件
+        elPaggingProps: {
+            type: Object,
+            default: () => {
+                return {
+                    layout: "total, sizes, prev, pager, next, jumper",
+                    // "page-sizes": [100, 200, 300, 400],
+                };
+            },
+        },
+    },
+    // 自定义事件
+    emits: {
+        // 分页事件
+        onPagging: null,
+    },
+    // 数据
+    data() {
+        return {
+            hoverRow: -1,
+            hoverCol: -1,
+            sortCol: "",
+            sortType: "",
+            currentPage: 1,
+        };
+    },
+    computed: {
+        tableData() {
+            let that = this;
+            if (this.sortCol == "") {
+                return this.data.data;
+            } else {
+                let data = this.data.data;
+
+                data.sort((a, b) => {
+                    let rev = 1;
+                    if (that.sortType == "ASC") rev = 1;
+                    else if (that.sortType == "DESC") rev = -1;
+
+                    if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+                    if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+                    return 0;
+                });
+                return data;
+            }
+        },
+        pageable() {
+            return this.pageSize != 0;
+        },
+        pages() {
+            if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+            else return 0;
+        },
+        startRow() {
+            if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+            else return 0;
+        },
+        endRow() {
+            if (this.pageable) return this.currentPage * this.pageSize;
+            else return this.data.data.length;
+        },
+    },
+    // 函数
+    methods: {
+        onClick(col, data) {
+            if (col.click) col.click(event, data);
+        },
+        onSort(col) {
+            if (col.sortable == true) {
+                this.sortCol = col.field;
+                switch (this.sortType) {
+                    case "":
+                        this.sortType = "DESC";
+                        break;
+                    case "DESC":
+                        this.sortType = "ASC";
+                        break;
+                    case "ASC":
+                        this.sortType = "";
+                        break;
+                }
+            }
+        },
+        template(col, data) {
+            if (!col.template) return data;
+            else return col.template(data);
+        },
+        hover(row, col) {
+            if (this.showHover) {
+                this.hoverRow = row;
+                if (this.showColHover) this.hoverCol = col;
+            }
+        },
+        leave() {
+            this.hoverRow = -1;
+            this.hoverCol = -1;
+        },
+        handleCurrentChange(val) {
+            this.currentPage = val;
+            this.$emit("onPagging", {
+                pageIndex: this.currentPage,
+                pageSize: this.pageSize,
+                start: this.startRow,
+                end: this.endRow,
+            });
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {},
+    updated() {},
+};
+</script>
+
+<style lang="less">
+.rank-table {
+    thead tr th {
+        color: #ffffff;
+    }
+
+    .rank {
+        background: transparent !important;
+        border-bottom: 1px solid #5362684d;
+
+        td {
+            height: 2.593vh;
+            line-height: 2.593vh;
+            padding: 0;
+            color: #ffffff;
+
+            &.rank-index {
+                span {
+                    width: 1.852vh;
+                    height: 1.852vh;
+                    display: flex;
+                    margin: 0.37vh auto;
+                    background: #414E64;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+
+    .rank.rank0 td {
+        color: #EDB32F;
+
+        &.rank-index span {
+            background: #EDB32F;
+            color: #FFFFFF;
+        }
+    }
+
+    .rank.rank1 td {
+        color: #05BB4C;
+
+        &.rank-index span {
+            background: #05BB4C;
+            color: #FFFFFF;
+        }
+    }
+
+    .rank.rank2 td {
+        color: #4B55AE;
+
+        &.rank-index span {
+            background: #4B55AE;
+            color: #FFFFFF;
+        }
+    }
+}
+</style>

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

@@ -138,7 +138,8 @@ export default {
     height: 872px;
     position: fixed;
     z-index: 0;
-    left: calc(50% - 436px - 112px);
+    // left: calc(50% - 436px - 112px);
+    left: calc(50% - 436px);
     top: calc(50% - 436px);
     transform: rotateX(45deg);
 

src/views/SandTable/component/weather.vue

@@ -84,15 +84,15 @@ export default {
 .weather {
   .weather-info {
     display: flex;
-    margin-bottom: 1.481vh;
+    margin-bottom: 0.741vh;
 
     .weather-icon {
-      width: 5.5556vh;
-      height: 5.5556vh;
+      width: 4.63vh;
+      height: 4.63vh;
       margin: 0 1.481vh;
     }
     .temperature {
-      font-size: 2.778vh;
+      font-size: 2.407vh;
     }
     .other span {
       font-size: @fontsize-s;
@@ -107,11 +107,11 @@ export default {
     .text {
       color: @font-color;
       font-size: 12px;
-      margin-bottom: 8px;
+      // margin-bottom: 0.741vh;
     }
 
     .value {
-      margin: 8px 0;
+      margin: 0.741vh 0 0 0;
     }
 
     .other-icon {

src/views/WindSite/pages/Map1.vue

@@ -424,6 +424,8 @@ export default {
         tilt: 65, // 俯视角
         scale: 15000,
         rotation: 180,
+        ox: 0,
+        oy: 0,
       },
       tempImg: require("@assets/temp1.png"),
       syzImg: require("@assets/png/booster-station.png"),