Merge branch 'master' of F:\CYZH\cyzh-community-cloud\cyzh-park with conflicts.

README.md

@@ -6,15 +6,15 @@
 ## 答疑流程
 >1. 遇到问题或Bug
 >2. 业务型问题打断点调试尝试找出问题所在
->3. 系统型问题通过百度、谷歌、社区查找解决方案
->4. 未解决问题则进入技术社区进行发帖提问：[https://sns.bladex.vip/](https://sns.bladex.vip/)
+>3. 系统型问题通过百度、谷歌、园区查找解决方案
+>4. 未解决问题则进入技术园区进行发帖提问：[https://sns.bladex.vip/](https://sns.bladex.vip/)
 >5. 将帖子地址发至商业群，特别简单三言两语就能描述清楚的也可在答疑时间内发至商业群提问
 >6. 发帖的时候一定要描述清楚，详细描述遇到问题的**重现步骤**、**报错详细信息**、**相关代码与逻辑**、**使用软件版本**以及**操作系统版本**，否则随意发帖提问将会提高我们的答疑难度。
 
 ## 答疑时间
 * 工作日：9:00 ~ 17:00 提供答疑，周末、节假日休息，暂停答疑
 * 请勿**私聊提问**，以免被其他用户的消息覆盖从而无法获得答疑
-* 答疑时间外遇到问题可以将问题发帖至[技术社区](https://sns.bladex.vip/)，我们后续会逐个回复
+* 答疑时间外遇到问题可以将问题发帖至[技术园区](https://sns.bladex.vip/)，我们后续会逐个回复
 
 ## 授权范围
 * 专业版：只可用于**个人学习**及**个人私活**项目，不可用于公司或团队，不可泄露给任何第三方

src/views/accesscontrolmng/doordevice.vue

@@ -1,35 +1,403 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :span="24">
-        <div style="box-sizing: border-box;margin:0 0.625rem 0.625rem">
-          <func-list></func-list>
-          <control></control>
-          <video-list></video-list>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.facedevice_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+      <template slot="menu" slot-scope="{row}">
+        <el-button @click="openDoor(row)" size="small" type="text">远程开门</el-button>
+      </template>
+      <template slot="mapSelectForm" slot-scope="scope">
+        <!-- <avue-map v-model="scope.row.mapSelect"></avue-map> -->
+        <div>
+          <el-button @click="mapVisible = true">选择地址</el-button>
+
+          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
+                     title="编辑地址" width="80%">
+            <!--            <customAvueMap v-if="mapVisible" v-model="scope.row.mapSelect"></customAvueMap>-->
+            <editPolygonMap v-if="mapVisible" :editForm.sync="scope.row" :region.sync="scope.row.address" :latitude.sync="scope.row.latitude" :longitude.sync="scope.row.longitude" :visible.sync="mapVisible"></editPolygonMap>
+          </el-dialog>
         </div>
-      </el-col>
-    </el-row>
-  </div>
+      </template>
+      <template slot="residentialId" slot-scope="scope">{{scope.row.residentialName}}</template>
+      <template slot="residentialIdForm" slot-scope="scope">
+        <select-dialog-residential :id="form.residentialId" :name="form.residentialName" :callback="selectCallback"></select-dialog-residential>
+      </template>
+      <template slot="deviceStatus" slot-scope="{row}">
+        <el-tag v-if="row.deviceStatus === 0" type="info">离线</el-tag>
+        <el-tag v-if="row.deviceStatus === 1" type="success">在线</el-tag>
+        <el-tag v-if="row.deviceStatus === 2" type="danger">异常</el-tag>
+      </template>
+    </avue-crud>
+  </basic-container>
 </template>
 
 <script>
-  import control from "./comps/control.vue"
-  import funcList from './comps/func-list.vue'
-  import videoList from './comps/video-list.vue'
-  export default {
-    components: {
-      control,
-      funcList,
-      videoList
-    },
-    data() {
+import {getList, getDetail, add, update, remove, remoteOpenDoor} from "../../api/device/doordevice.js";
+import {mapGetters} from "vuex";
+import customAvueMap from "../../components/residential/customAvueMap.vue"
+import editPolygonMap from "../../components/residential/editPolygonMap.vue";
+import SelectDialogResidential from "../../components/select-dialog/select-dialog-residential";
+export default {
+  components:{
+    SelectDialogResidential,
+    customAvueMap,editPolygonMap
+  },
+  data() {
+    return {
+      mapVisible:false,
+      form: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      option: {
+        height:'auto',
+        calcHeight: 60,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: false,
+        delBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        menuWidth:350,
+        column: [
+          // {
+          //   label: "设备名称",
+          //   prop: "name",
+          //   search: true,
+          //   overHidden: true,
+          //   rules: [{
+          //     required: true,
+          //     message: "请输入名称",
+          //     trigger: "blur"
+          //   }]
+          // },
+          {
+            label:'',
+            prop:'mapSelect',
+            viewDisplay: false,
+            formslot: true,
+            hide: true,
+          },
+          {
+            label: "经度",
+            prop: "longitude",
+            width: 100,
+            overHidden: true,
+            hide:true,
+            rules: [{
+              required: true,
+              message: "请输入经度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "纬度",
+            prop: "latitude",
+            width: 100,
+            overHidden: true,
+            hide:true,
+            rules: [{
+              required: true,
+              message: "请输入纬度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备序列号",
+            prop: "macAddress",
+            width: 200,
+            rules: [{
+              required: true,
+              message: "请输入Mac编码",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备厂商",
+            prop: "deviceFactory",
+            type: "select",
+            dicUrl: "/api/blade-system/dict-biz/dictionary?code=door_device_factory",
+            props:{
+              label: "dictValue",
+              value: "dictKey"
+            },
+            width: 135,
+            rules: [{
+              required: true,
+              message: "请选择设备厂商",
+              trigger: "blur"
+            }],
+            hide: true
+          },
+          // {
+          //   label: "所属园区",
+          //   prop: "agencyName",
+          //   editDisplay:false,
+          //   addDisplay:false
+          // },
+          // {
+          //   label: "所属区域",
+          //   prop: "residentialId",
+          //   dicFlag: true,
+          //   type: "select",
+          //   search: true,
+          //   searchFilterable: true,
+          //   slot: true,
+          //   formslot: true,
+          //   dataType: "number",
+          //   dicUrl: "/api/cyzh-community/residential/list?size=500&name={{key}}",
+          //   dicFormatter:(res)=>{
+          //     return res.data.records;//返回字典的层级结构
+          //   },
+          //   props: {
+          //     label: "name",
+          //     value: "id"
+          //   },
+          //   rules: [{
+          //     required: true,
+          //     message: "请选择所属区域",
+          //     trigger: "change"
+          //   }],
+          // },
+          {
+            label: "具体地址",
+            prop: "address",
+            width: 350,
+            search: true,
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入具体地址",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备状态",
+            prop: "deviceStatus",
+            type: "select",
+            dicUrl:"/api/blade-system/dict-biz/dictionary?code=face_device_status",
+            props: {
+              label: 'dictValue',
+              value: 'dictKey'
+            },
+            dataType: "number",
+            display: false,
+            slot: true
+          },
+          // {
+          //   label: "最近心跳",
+          //   prop: "heartbeatTime"
+          // }
+        ]
+      },
+      data: []
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
       return {
-
+        addBtn: this.vaildData(this.permission.doordevice_add, false),
+        viewBtn: this.vaildData(this.permission.doordevice_view, false),
+        delBtn: this.vaildData(this.permission.doordevice_delete, false),
+        editBtn: this.vaildData(this.permission.doordevice_edit, false)
       };
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
     }
-  };
-</script>
+  },
+
+  watch: {
+    'form.mapSelect': {
+      handler: function(value) {
+        if (!value){
+          return
+        }else{
+          this.form.longitude = this.form.mapSelect.longitude;
+          this.form.latitude = this.form.mapSelect.latitude;
+        }
+      },
+    }
+  },
 
-<style lang="scss" scoped>
+  created() {
+    const tenantType = localStorage.getItem("tenantType");
+    if (tenantType == 0){
+      this.findObject(this.option.column, 'residentialId').label = "所属区域";
+      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
+      // this.option.column[2].label = "所属区域"
+    }else if (tenantType == 1){
+      // this.option.column[2].label = "所属区域"
+      this.findObject(this.option.column, 'residentialId').label = "所属区域";
+      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
+    }
+  },
+
+  methods: {
+    openDoor(row){
+      remoteOpenDoor(row.id, true).then(res =>{
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+      });
+    },
+    selectCallback(row){
+      this.form.latitude = row.latitude;
+      this.form.longitude = row.longitude;
+      this.form.address = row.address;
+      this.form.residentialId = row.id;
+      this.form.residentialName = row.name;
+    },
+    rowSave(row, done, loading) {
+      add(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
+    },
+    rowUpdate(row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.$refs.crud.toggleSelection();
+        });
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        getDetail(this.form.id).then(res => {
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage){
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize){
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    }
+  }
+};
+</script>
 
+<style>
 </style>

src/views/situationmng/revailingsituation/staffaccessrecord.vue

@@ -166,38 +166,38 @@
                 trigger: "blur"
               }]
             },
-            {
-              label: "用户类型",
-              prop: "userType",
-              type: "select",
-              editDisplay: false,
-              addDisplay: false,
-              dicData:[
-                {
-                  label: "企业员工",
-                  value: 2
-                },
-                {
-                  label: "服务人员",
-                  value: 3
-                },
-                {
-                  label: "访客",
-                  value: 4
-                },
-                {
-                  label: "管理员",
-                  value: 5
-                }]
-            },
-            {
-              label: "所属园区",
-              prop: "agencyName",
-            },
-            {
-              label: "所属区域",
-              prop: "residentialName",
-            },
+            // {
+            //   label: "用户类型",
+            //   prop: "userType",
+            //   type: "select",
+            //   editDisplay: false,
+            //   addDisplay: false,
+            //   dicData:[
+            //     {
+            //       label: "企业员工",
+            //       value: 2
+            //     },
+            //     {
+            //       label: "服务人员",
+            //       value: 3
+            //     },
+            //     {
+            //       label: "访客",
+            //       value: 4
+            //     },
+            //     {
+            //       label: "管理员",
+            //       value: 5
+            //     }]
+            // },
+            // {
+            //   label: "所属园区",
+            //   prop: "agencyName",
+            // },
+            // {
+            //   label: "所属区域",
+            //   prop: "residentialName",
+            // },
             {
               label: "设备编码",
               prop: "deviceId",
@@ -209,13 +209,8 @@
               }]
             },
             {
-              label: "设备名称",
-              prop: "deviceName",
-            },
-            {
-              label: "设备mac码",
+              label: "设备序列号",
               prop: "deviceMac",
-              hide:true,
               rules: [{
                 required: true,
                 message: "请输入设备mac码",

src/views/situationmng/revailingsituation/vehicleinrecord.vue

@@ -64,7 +64,6 @@
           viewBtn: true,
           selection: true,
           dialogClickModal: false,
-          stripe: true,
           column: [
             // {
             //   label: "索引ID",
@@ -261,16 +260,6 @@
                 trigger: "blur"
               }]
             },
-            {
-              label: "预约车位订单号",
-              labelWidth: 120,
-              prop: "reserveOrderNo",
-              rules: [{
-                required: false,
-                message: "请输入预约车位订单号",
-                trigger: "blur"
-              }]
-            },
             {
               label: "入场图片	",
               prop: "enterImgPath",

src/views/videoapply/videofusion.vue

@@ -414,6 +414,7 @@
       backToDeviceList(){
         this.showDeviceChannelCrud = false;
         this.deviceId = null;
+        this.onLoad(this.page);
       },
       handleChannel(deviceId){
         this.showDeviceChannelCrud = true;

src/views/wel/index-old.vue

@@ -62,9 +62,9 @@
             //   target:'_blank'
             // },
             // {
-            //   name: '宁夏数字社区',
+            //   name: '宁夏数字园区',
             //   src: './test/7.png',
-            //   text: '宁夏数字社区',
+            //   text: '宁夏数字园区',
             //   href:'http://139.9.103.171:1888/#/wel/smartCommunity',
             //   target:'_blank'
             // },

src/views/wel/index.vue

@@ -1,9 +1,24 @@
 <template>
-  <div  class="full animate__animated animate__faster"
-    :class="menuIndex == 0 ? 'animate__fadeInLeftBig' : 'animate__fadeOutLeftBig'">
-    <basic-container style="margin-top: 10px;">
-      <avue-data-card :option="option"></avue-data-card>
-    </basic-container>
+  <div class="full animate__animated animate__faster" v-show="menuIndex == 0" :class="menuIndex == 0 ? 'animate__fadeInUpBig' : 'animate__fadeOutUpBig'" style="overflow: hidden;" >
+    <!--  背景--3D场景   -->
+    <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
+              @loadingFinish="initScene">
+    </scene3-d>
+    <!-- 数据面板  -->
+    <main-scene @openDialog="openDialog" @playVideo="playVideo" @showInfoBox="showInfoBox" ref="data-panel"
+                style="z-index: 9;"> </main-scene>
+
+    <!--  工具栏   -->
+    <tools-bar :option="toolsOption"></tools-bar>
+
+    <!-- 园区事件 -->
+    <mp-dialog ref="mpDialog" title="园区事件">
+      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
+        {{dialogDetail.detail}}
+      </div>
+    </mp-dialog>
+    <!-- 视频播放 -->
+    <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
 </template>
 
@@ -11,119 +26,503 @@
   import {
     mapGetters
   } from "vuex";
+  import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
+  import mpDialog from "../../components/mp-dialog.vue"
+  import TopBar from "../../components/3DScene/top-bar/top-bar";
+  import Scene3D from "../../components/3DScene/3DScene";
+  import MainScene from "../../components/scene/mainScene";
+  import ToolsBar from "../../components/3DScene/tools-bar/tools-bar";
+  import * as Three from "three";
+  import {
+    getBox1,
+    getCameraBox
+  } from "../../components/3DScene/infoBox";
+  import {
+    CSS2DObject
+  } from "three/examples/jsm/renderers/CSS2DRenderer";
+  import {
+    fullscreenToggel
+  } from "../../util/util";
   export default {
+    name: "index",
+    components: {
+      devicePlayer,
+      mpDialog,
+      MainScene,
+      Scene3D,
+      TopBar,
+      ToolsBar,
+    },
     computed: {
       ...mapGetters(["menuIndex"])
     },
     data() {
       return {
-        option: {
-          span: 8,
-          data: [{
-              name: '大屏设计器',
-              src: './test/3.png',
-              text: '自动生成大屏数据面板',
-              href: 'https://data.avuejs.com/build/1427195433161928705',
-              target: '_blank'
-            },
-            {
-              name: '3D场景设计器',
-              src: './test/1.png',
-              text: '构建自己的3D可视化场景',
-              href: 'http://8.129.99.119/editor/editor/',
-              target: '_blank'
-            },
-            {
-              name: '信阳榕基软件园',
-              src: './test/2.png',
-              text: '信阳软件园区',
-              href: 'http://192.168.1.69:1888/',
-              target: '_blank'
-            },
-            // {
-            //   name: '城市指挥中心',
-            //   src: './test/5.png',
-            //   text: '城市指挥中心',
-            //   href:'http://36.103.227.152:1777',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '城市网格管理',
-            //   src: './test/4.png',
-            //   text: '城市网格管理',
-            //   href:'http://36.103.227.152:1666',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '宁夏银川市望远工业园区德锐斯创业园',
-            //   src: './test/6.png',
-            //   text: '宁夏银川市望远工业园区德锐斯创业园',
-            //   href:'http://139.9.103.171:1999/#/wel/index21',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '宁夏数字社区',
-            //   src: './test/7.png',
-            //   text: '宁夏数字社区',
-            //   href:'http://139.9.103.171:1888/#/wel/smartCommunity',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '消防态势--设备态势',
-            //   src: './test/8.png',
-            //   text: '消防态势--设备态势',
-            //   href:'http://192.168.1.69:1889/#/wel/fireDevices',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '养老服务',
-            //   src: './test/9.png',
-            //   text: '养老服务',
-            //   href:'http://192.168.1.69:1889/#/wel/smartPension',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '公安服务',
-            //   src: './test/10.png',
-            //   text: '公安服务',
-            //   href:'http://192.168.1.69:1889/#/wel/smartPolice',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '运营服务',
-            //   src: './test/11.png',
-            //   text: '运营服务',
-            //   href:'http://192.168.1.69:1889/#/wel/operatePlatform',
-            //   target:'_blank'
-            // },
-          ]
+        dialogDetail: {},
+
+        mesh: {},
+        searchText: "",
+        searchCameraType: "",
+        searchType: "building",
+        searchIndex: 0,
+        isReady: false,
+        handlePanelShow: false,
+        toolsPanelType: "building",
+        toolsOption: [{
+          icon: '/img/tools/361.png',
+          name: '旋转',
+          event: this.round
         },
+          {
+            icon: '/img/tools/reset.png',
+            name: '复位',
+            event: this.reset
+          },
+          {
+            icon: '/img/tools/loudong.png',
+            name: '建筑信息',
+            event: () => {
+              this.showBox(this.buildingObj, "building")
+            }
+          },
+          {
+            icon: '/img/tools/video.png',
+            name: '摄像头',
+            event: () => {
+              this.showBox(this.cameraObj, "camera")
+            }
+          },
+          {
+            icon: '/img/tools/full.png',
+            name: '信息框',
+            event: () => {
+              this.$refs['data-panel'].infoBoxShow()
+            }
+          },
+        ],
+        finishNum: 0,
+        loadingSchedule: 0,
+        buildingsRes: [],
+        cameraRes: [],
+        objs: [],
+        gltf: [
+          '/gltf/7_8/20H.gltf',
+          // '/gltf/5H/5H.gltf',
+          // '/gltf/3H/3H.gltf',
+          // '/gltf/7H/7H.gltf',
+          // '/gltf/13H/13H.gltf',
+          // '/gltf/14H/14H.gltf',
+          // '/gltf/17H/17H.gltf',
+          // '/gltf/1H/1H.gltf',
+          '/gltf/DX2/DX2.gltf',
+          '/gltf/TiKuai/TiKuai.gltf',
+          '/gltf/SKY/Sky.gltf',
+          // '/gltf/Tree_Car/Tree_Car.gltf',
+        ],
+        controlsOption: {
+          minDistance: 100,
+          maxDistance: 500,
+          autoRotate: false,
+          autoRotateSpeed: 1,
+          keyPanSpeed: 3,
+          target: new Three.Vector3(0, 0, 0),
+          enableDamping: true,
+        },
+        cameraOptions: {
+          position: [5000, 5000, 1000],
+          near: 0.01,
+          far: 50000,
+          lookAt: [1300, 0, 1300],
+        },
+        obj: [{
+          mtlUrl: '/obj/CAR.mtl',
+          objUrl: '/obj/CAR.obj'
+        },
+          {
+            mtlUrl: '/obj/DX.mtl',
+            objUrl: '/obj/DX.obj'
+          },
+          {
+            mtlUrl: '/test/Tree.mtl',
+            objUrl: '/test/Tree.obj'
+          },
+          {
+            mtlUrl: '/obj/TiKuai.mtl',
+            objUrl: '/obj/TiKuai.obj'
+          },
+          {
+            mtlUrl: '/obj/XiaoPin.mtl',
+            objUrl: '/obj/XiaoPin.obj'
+          },
+          {
+            mtlUrl: '/test/Building_A.mtl',
+            objUrl: '/test/Building_A.obj'
+          },
+          {
+            mtlUrl: '/test/BuildingB.mtl',
+            objUrl: '/test/BuildingB.obj'
+          },
+          {
+            mtlUrl: '/test/BuildingC.mtl',
+            objUrl: '/test/BuildingC.obj'
+          },
+          {
+            mtlUrl: '/obj/building/3H.mtl',
+            objUrl: '/obj/building/3H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/5H.mtl',
+            objUrl: '/obj/building/5H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/13H.mtl',
+            objUrl: '/obj/building/13H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/14H.mtl',
+            objUrl: '/obj/building/14.obj'
+          },
+          {
+            mtlUrl: '/obj/building/17.mtl',
+            objUrl: '/obj/building/17.obj'
+          },
+          {
+            mtlUrl: '/obj/building/20.mtl',
+            objUrl: '/obj/building/20.obj'
+          },
+        ],
+        buildings: [{
+          text: '软件园主楼',
+          position: [100, 115, 100]
+        },
+          {
+            text: '软件园副楼',
+            position: [170, 50, 50]
+          },
+          {
+            text: '软件园A栋',
+            position: [0, 105, 110]
+          },
+          {
+            text: '软件园B栋',
+            position: [-70, 105, 110]
+          },
+          {
+            text: '软件园C栋',
+            position: [-120, 105, 55]
+          },
+          {
+            text: '软件园D栋',
+            position: [-120, 105, -20]
+          },
+        ],
+        cameraList: [{
+          number: 'HK-nm51658186',
+          position: [50, 0, 70],
+          src: '/video/video2.mp4',
+          name: "设备2",
+          type: "枪机"
+        },
+          {
+            number: 'HK-nm51658186',
+            position: [-100, 0, 100],
+            src: '/video/video3.mp4',
+            name: "设备3",
+            type: "枪机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [100, 0, 20],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "枪机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [200, 0, 50],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "球机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [75, 0, 10],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "球机"
+          },
+        ],
+        cameraObj: {},
+        buildingObj: {},
+      }
+    },
+    provide() {
+      return {
+        "index": this
+      }
+    },
+    mounted() {
+      this.buildingsRes = this.buildings;
+      this.cameraRes = this.cameraList;
+    },
+    watch: {
+      searchCameraType() {
+        this.cameraRes = this.searchCameraType == "全部" ? this.cameraList : this.cameraList.filter(item => item.type ==
+          this.searchCameraType)
       }
     },
     methods: {
+      showInfoBox() {
+        this.toolsOption.forEach(item => {
+          if (item.name == '信息框') {
+            if (item.icon == '/img/tools/full.png') {
+              item.icon = '/img/tools/full-out.png'
+            } else {
+              item.icon = '/img/tools/full.png'
+            }
+            console.log(item, "123");
+            this.$forceUpdate()
+          }
+        })
+      },
+      openDialog(item) {
+        this.dialogDetail = item
+        this.$refs.mpDialog.open(item.time)
+      },
+      playVideo(item) {
+
+        const {
+          deviceId
+        } = item
+        const {
+          channelId
+        } = item
+        const {
+          info
+        } = item
+        this.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
+      },
+      reset() {
+        this.$refs['scene'].camera.position.z = this.cameraOptions.position[0];
+        this.$refs['scene'].camera.position.x = this.cameraOptions.position[1];
+        this.$refs['scene'].camera.position.y = this.cameraOptions.position[2];
+        this.$refs['scene'].camera.lookAt(...this.cameraOptions.lookAt);
+        this.$refs['scene'].controls.target.set(0, 0, 0);
+        this.$refs['data-panel'].infoBoxShow(true);
+      },
+      handleNext(num, list) {
+        this.searchIndex = (this.searchIndex + num) % list.children.length;
+        if (this.searchIndex < 0) {
+          this.searchIndex = list.children.length + this.searchIndex;
+        }
+        list.children.forEach((item, index) => {
+          console.log(this.searchIndex, index);
+          if (index == this.searchIndex) {
+            this.$refs['scene'].flyto(item.position);
+            item.visible = true;
+          } else {
+            item.visible = false;
+          }
+        })
+      },
+      async initScene() {
+        this.$refs['scene'].scene.fog = new Three.Fog(this.$refs['scene'].scene.background, 1, 5000);
+        //添加天空盒
+        // this.$refs['scene'].addSkyBox(
+        //   [
+        //     '/sky/HDR_r.jpg',
+        //     '/sky/HDR_l.jpg',
+        //     '/sky/HDR_u.jpg',
+        //     '/sky/HDR_d.jpg',
+        //     '/sky/HDR_f.jpg',
+        //     '/sky/HDR_b.jpg',
+        //   ]
+        // );
+        //  添加模型
+        // await this.addObj();
+        await this.addGltf();
+        this.addDirectionalLight();
+        this.initBoxInfo();
+        this.isReady = true;
+        //自旋转
+        // this.$refs['scene'].controls.autoRotate = true;
+
+      },
+      toBuilding(objIndex, list) {
+        list.children.forEach((item, index) => {
+          if (objIndex == index) {
+            this.searchIndex = index;
+            this.$refs['scene'].flyto(item.position);
+            item.visible = true;
+          } else {
+            item.visible = false;
+          }
+        })
+      },
+      quitToolPanel() {
+        this.handlePanelShow = false;
+        this.buildingObj.children.forEach(item => {
+          item.visible = false;
+        })
+        this.cameraObj.children.forEach(item => {
+          item.visible = false;
+        })
+        this.reset();
+      },
+      async addGltf() {
+        this.gltf.forEach(item => {
+          this.$refs['scene'].addGltf(item,
+            (gltf) => {
+              this.$refs['scene'].scene.add(gltf.scene)
+              gltf.scene.traverse(function(child) {
+                child.castShadow = true;
+                child.receiveShadow = true;
+                if (child.isMesh) {
+                  console.log(child, 546546);
+                  child.material.color = new Three.Color("rgb(200,200,200)");
+                  child.material.side = Three.DoubleSide;
+                  child.material.emissive = child.material.color;
+                  child.material.emissiveMap = child.material.map;
+
+                  if (child.material.name == 'JZ_LanGan_GeZi' || child.material.name == 'JZ_14_LanGan' ||
+                    child.name.indexOf("Tree") > -1) {
+                    console.log(child.name, 456789)
+                    child.material.transparent = true;
+                  }
+                }
+              });
+              this.finishNum++;
+              this.loadingSchedule = ((this.finishNum * 100) / (this.gltf.length * 100)) * 100
+            },
+            (xhr) => {
+              if (xhr.total == xhr.loaded) {
+                // this.finishNum++;
+              }
+            });
+        })
+
+      },
+      initBoxInfo() {
+        this.buildingObj = new Three.Object3D();
+        this.buildings.forEach(item => {
+          let element = getBox1(item.text, this);
+          let label = new CSS2DObject(element);
+          label.position.x = item.position[0];
+          label.position.y = item.position[1];
+          label.position.z = item.position[2];
+          label.visible = false;
+          this.buildingObj.add(label);
+        })
+        this.$refs['scene'].scene.add(this.buildingObj);
+
+        this.cameraObj = new Three.Object3D();
+        this.cameraList.forEach(item => {
+          let element = getCameraBox(item, this);
+          let label = new CSS2DObject(element);
+          label.position.x = item.position[0];
+          label.position.y = item.position[1];
+          label.position.z = item.position[2];
+          label.visible = false;
+          this.cameraObj.add(label);
+        })
+        this.$refs['scene'].scene.add(this.cameraObj);
+
+      },
+      //添加平行光
+      addDirectionalLight() {
+        //添加光源
+        let dirLight = new Three.DirectionalLight("#bebebe", 1)
+        dirLight.position.set(1, 1, 1);
+        dirLight.shadow.mapSize.width = 512; // default
+        dirLight.shadow.mapSize.height = 512; // default
+        dirLight.shadow.camera.near = 1; // default
+        dirLight.shadow.camera.far = 100;
+        dirLight.castShadow = true;
+        this.$refs['scene'].scene.add(dirLight);
+      },
+      showBox(list, type) {
+        this.$refs['scene'].controls.autoRotate = false;
+        this.toolsPanelType = type;
+        this.handlePanelShow = true;
+        this.searchIndex = 0;
+        if (list.children.length > 0) {
+          list.children[0].visible = true;
+          this.$refs['data-panel'].infoBoxShow(false)
+          this.$refs['scene'].flyto(list.children[0].position)
+        }
 
+      },
+      showCamera() {
+        const list = this.cameraObj;
+        list.children.forEach((item, index) => {
+          item.visible = !item.visible;
+        })
+      },
+      handleFull() {
+        fullscreenToggel();
+      },
+      round() {
+        this.$refs['scene'].controls.autoRotate = !this.$refs['scene'].controls.autoRotate;
+      },
+      handleSearch() {
+        this.buildingsRes = this.buildings.filter(item => item.text.indexOf(this.searchText) > -1)
+      },
     }
   }
 </script>
 
+<style scoped>
+  .handle-panel-1 {
+    width: 20%;
+    height: 430px;
+    /* background: rgba(230, 160, 9, 0.5); */
+    position: absolute;
+    top: 200px;
+    left: 3%;
+  }
 
+  .handle-panel-2 {
+    width: 20%;
+    height: 510px;
+    /* background: rgba(230, 160, 9, 0.5); */
+    position: absolute;
+    top: 200px;
+    left: 3%;
+  }
 
-<style scoped lang="scss">
-  /deep/ .data-card .item {
-    position: relative;
-    margin: 0 auto 50px;
-    width: 500px;
+  .search-body {
+    overflow-y: scroll;
+    width: 100%;
     height: 300px;
-    overflow: hidden;
-    /* border-radius: 5px;
-    border-color: transparent; */
-    /* border-width: 1px;
-    border-style: solid; */
-    /* box-shadow: 2px 2px 2px #30313B; */
+  }
+
+  .search-footer {
+    width: 100%;
+    height: 60px;
+    background: rgba(0, 0, 0, 0.5);
+    color: whitesmoke;
+    font-size: 18px;
+  }
+
+  .search-item {
+    width: 95%;
+    margin: auto;
+    height: 45px;
+    border-bottom: 1px solid #525252;
+  }
+
+  .click:hover {
+    cursor: pointer;
+    transform: translate(1px, 1px);
+  }
 
+  .click:active {
+    cursor: pointer;
+    transform: translate(2px, 2px);
   }
 
-  /deep/ .el-card {
-    border: 1px solid transparent;
+  .building-click:hover {
+    cursor: pointer;
+    text-shadow: 2px 2px 2px #ccffb4;
   }
 </style>

src/views/wel/index1.vue

@@ -107,14 +107,14 @@
         objs: [],
         gltf: [
           '/gltf/7_8/20H.gltf',
-          '/gltf/5H/5H.gltf',
-          '/gltf/3H/3H.gltf',
-          '/gltf/7H/7H.gltf',
-          '/gltf/13H/13H.gltf',
-          '/gltf/14H/14H.gltf',
-          '/gltf/17H/17H.gltf',
-          '/gltf/1H/1H.gltf',
-          '/gltf/DX2/DX2.gltf',
+          // '/gltf/5H/5H.gltf',
+          // '/gltf/3H/3H.gltf',
+          // '/gltf/7H/7H.gltf',
+          // '/gltf/13H/13H.gltf',
+          // '/gltf/14H/14H.gltf',
+          // '/gltf/17H/17H.gltf',
+          // '/gltf/1H/1H.gltf',
+          // '/gltf/DX2/DX2.gltf',
           '/gltf/TiKuai/TiKuai.gltf',
           '/gltf/SKY/Sky.gltf',
           '/gltf/Tree_Car/Tree_Car.gltf',