沙盘模块上传

src/views/SandTable/SandTable.vue

@@ -3,7 +3,11 @@
     <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" :data="mapSource" @when="when"></ThreeModel1>
+    <ThreeModel1
+      class="three-model-layer"
+      :data="mapSource"
+      @when="when"
+    ></ThreeModel1>
     <div class="sand-table-left" v-if="showPanel">
       <PanelSand
         class="left-panel"
@@ -53,25 +57,36 @@
           </el-col>
         </el-row>
       </PanelSand>
-      <PanelSand class="right-panel mg-t-16" title="板块标题">
-        <div class="person-info-box mg-t-16">
+      <PanelSand class="right-panel mg-t-16" title="工单管理">
+        <div
+          class="person-info-box mg-t-16 animated a0"
+          :class="peopleClass"
+          v-if="workData.data[0]"
+        >
           <img
             class="header mg-r-8 bg-green"
-            :src="require('@assets/logo.png')"
+            style="width: 75px; height: 75px"
+            :src="workData.data[workDataIndex].imgurl"
           />
           <div class="person-info">
-            <div class="green font-lg" style="font-weight: bold">张三</div>
+            <div class="green font-lg" style="font-weight: bold">
+              {{ workData.data[workDataIndex].laborname }}
+            </div>
             <div class="white font-sm">
-              <span>职务：高级检修工</span>
-              <span class="mg-l-16">当前任务编号 000000</span>
+              <span>职务：{{ workData.data[workDataIndex].jobcode }}</span>
+              <!-- <span class="mg-l-16">当前任务编号 000000</span> -->
             </div>
             <div class="white font-sm">
-              平均检修时间 <span class="green">5</span> 小时
+              <!-- 平均检修时间 <span class="green">5</span> 小时 -->
+              开始时间
+              <span class="green">{{
+                workData.data[workDataIndex].starttime
+              }}</span>
             </div>
           </div>
         </div>
         <div class="table mg-t-8">
-          <Table :data="tableData" />
+          <Table :data="workData" />
         </div>
       </PanelSand>
       <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
@@ -341,6 +356,7 @@ export default {
   },
   // 数据
   data() {
+    const that = this;
     return {
       videoShow: true,
       showPanel: false,
@@ -350,12 +366,13 @@ export default {
       showTableDialog: false,
       videoDialogClass: "modal animated a1 bounceIn",
       tableDialogClass: "modal animated a1 fadeInLeftBig",
+      peopleClass: "",
       timeStr: "",
       wpId: "0",
       tqmap1: {},
       gxkmap: {},
       tableItem: {},
-      mapSource:{},
+      mapSource: {},
       videoArray: [
         [
           {
@@ -408,65 +425,48 @@ export default {
           total: 100,
         },
       ],
-      tableData: {
+      workDataIndex: 0,
+      workData: {
         column: [
           {
-            name: "标题",
-            field: "v1",
+            name: "人员",
+            field: "laborname",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v2",
+            name: "职务",
+            field: "jobcode",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v3",
+            name: "开始时间",
+            field: "starttime",
             width: "150px",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v4",
+            name: "原因",
+            field: "problem",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
         ],
-        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,
-          },
-        ],
+        data: [],
       },
       levelTableData: {
         column: [
@@ -574,12 +574,30 @@ export default {
           wpId: that.wpId,
         },
         success(res) {
-          console.log(222222, res);
           that.mapSource = res.data;
         },
       });
     },
 
+    // 获取中部地图数据
+    getTop4Info() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "equoperationrecord/top4",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          res.data.forEach((ele, index) => {
+            ele.index = index;
+          });
+          that.workData.data = res.data;
+        },
+      });
+    },
+
     clickRow(row) {
       this.tableItem = row;
       this.showTableDialog = true;
@@ -599,6 +617,19 @@ export default {
       }
     },
 
+    // 切换人员展示
+    changePeople(index) {
+      if (!this.peopleAnmLock && this.workDataIndex !== index) {
+        this.peopleAnmLock = true;
+        this.peopleClass = "fadeOutRight";
+        setTimeout(() => {
+          this.workDataIndex = index;
+          this.peopleClass = "fadeInRight";
+          this.peopleAnmLock = false;
+        }, 150);
+      }
+    },
+
     when: function () {
       this.showPanel = true;
     },
@@ -618,6 +649,7 @@ export default {
   created() {
     this.getWtInfo();
     this.getWpHealthInfo();
+    this.getTop4Info();
     this.timeStr = new Date().formatDate("MM-dd hh:mm");
     this.timmer1 = setInterval(() => {
       this.timeStr = new Date().formatDate("MM-dd hh:mm");
@@ -755,6 +787,10 @@ export default {
     margin-left: -1.481vh;
     margin-bottom: -1.481vh;
 
+    tr {
+      cursor: pointer;
+    }
+
     .com-table thead tr th,
     .com-table tr td {
       padding: 0.556vh 0;

src/views/SandTable/component/ThreeModel1.vue

@@ -327,7 +327,6 @@ export default {
             }
           });
         }
-        console.log(44444, this.htmlLayer);
       }
     },
     // Vector3 to screen