1、物业报修和工单生成

src/api/estate/repair.js

@@ -48,3 +48,11 @@ export const update = (row) => {
   })
 }
 
+export const generateWorkOrder = (workOrderForm) => {
+  return request({
+    url: '/api/cyzh-estate/repair/generateWorkOrder',
+    method: 'post',
+    data: workOrderForm
+  })
+}
+

src/views/accesscontrolmng/doordevice.vue

@@ -184,7 +184,7 @@ export default {
             formslot: true,
             dataType: "number",
             hide: true,
-            dicUrl: "/api/cyzh-community/residential/detail?id=500&name={{key}}",
+            dicUrl: "/api/cyzh-community/residential/list?size=500&name={{key}}",
             dicFormatter:(res)=>{
               return res.data.records;//返回字典的层级结构
             },

src/views/businessmng/estatemng/parkrepair.vue

@@ -27,27 +27,30 @@
                    @click="handleDelete">删 除
         </el-button>
       </template>
-      <template slot="jobStatus" slot-scope="scope">
-        <el-tag v-if="scope.row.jobStatus===0" type="info">待处理</el-tag>
-        <el-tag v-if="scope.row.jobStatus===1" type="success">处理中</el-tag>
-        <el-tag v-if="scope.row.jobStatus===2" >已处理</el-tag>
-      </template>
-      <template slot="residentialId" slot-scope="scope">{{scope.row.residentialName}}</template>
-      <template slot="residentialIdForm" slot-scope="scope">
-        <select-dialog-residential :disabled="true" :id="form.residentialId" :name="form.residentialName" :callback="selectCallback"></select-dialog-residential>
+      <template slot="menu" slot-scope="{row}">
+        <el-button icon="el-icon-setting" size="small" type="text">
+          <el-dropdown>
+            <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-view" type="text" @click.native="openWorkOrderForm(row)" v-if="row.hasWorkOrder === 0">生成工单</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-view" type="text" @click.native="viewWorkOrderDetial(row)" v-if="row.hasWorkOrder === 1">工单详情</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-view" type="text" v-if="permission.device_heartbeat" @click.native="viewComment(row)">用户评价</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-button>
       </template>
     </avue-crud>
+    <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="workOrderFormVisible" @close="workOrderFormClose" width="50%">
+      <avue-form :option="workOrderOption" v-model="workOrderForm" @submit="createWorkOrder"></avue-form>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/estate/repair";
+  import {getList, getDetail, add, update, remove, generateWorkOrder} from "@/api/estate/repair";
   import {mapGetters} from "vuex";
-  import {validatePhone} from "../../../util/validator";
-  import SelectDialogResidential from "../../../components/select-dialog/select-dialog-residential";
 
   export default {
-    components: {SelectDialogResidential},
     data() {
       return {
         form: {},
@@ -58,29 +61,100 @@
           currentPage: 1,
           total: 0
         },
+        currentRepairId: null,
+        workOrderFormVisible: false,
+        groupArray: [
+          {
+            icon: 'el-icon-info',
+            label: '工单详情',
+            prop: 'group1',
+            viewDisplay: true,
+            addDisplay: false,
+            editDisplay: false,
+            column:[
+              {
+                label: "处理人",
+                prop: "handler",
+                rules: [{
+                  required: true,
+                  message: "请输入处理人",
+                  trigger: "blur"
+                }]
+              },
+              {
+                label: "处理人电话",
+                prop: "handlerPhone",
+                labelWidth: 100,
+                rules: [{
+                  required: true,
+                  message: "请输入处理人电话",
+                  trigger: "blur"
+                }]
+              },
+              {
+                label: "处理状态",
+                prop: "handleStatus",
+                rules: [{
+                  required: true,
+                  message: "请输入处理状态",
+                  trigger: "blur"
+                }]
+              },
+              {
+                label: "处理时间",
+                prop: "handleTime",
+                rules: [{
+                  required: true,
+                  message: "请输入处理时间",
+                  trigger: "blur"
+                }]
+              },
+            ]
+          }
+        ],
         selectionList: [],
         option: {
           height:'auto',
+          menuWidth: 300,
           calcHeight: 30,
-          labelWidth: 120,
           tip: false,
           searchShow: true,
           searchMenuSpan: 6,
           border: true,
           index: true,
           viewBtn: true,
-          addBtn:true,
           selection: true,
           dialogClickModal: false,
+          align: "center",
+          labelPosition: "left",
           column: [
             {
-              label:"事件名称",
-              prop: "event_name"
+              label: "事件编号",
+              prop: "repairNo",
+              disabled: true,
+              addDisplay: false,
+              width: 140,
+              rules: [{
+                required: true,
+                message: "请输入报事报修编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "事件名称",
+              prop: "repairName",
+              width: 140,
+              rules: [
+                {
+                  required: true,
+                  message: "请输入事件名称",
+                  trigger: "blur"
+                }]
             },
             {
               label: "上报人",
               prop: "reportor",
-              hide: true,
+              width: 100,
               rules: [{
                 required: true,
                 message: "请输入上报人",
@@ -89,22 +163,22 @@
             },
             {
               label: "上报人电话",
-              prop: "reportPhone",
-              hide: true,
-              rules: [{
-                required: true,
-                message: "请输入上报人电话",
-              },{
-                validator: validatePhone,
-                trigger: "blur"
-              }]
+              prop: "reportorPhone",
+              width: 100,
+              labelWidth: 100,
+              rules: [
+                {
+                  required: true,
+                  message: "请输入上报人电话",
+                  trigger: "blur"
+                }]
             },
             {
               label: "上报时间",
               prop: "reportTime",
-              type: 'datetime',
-              valueFormat: 'yyyy-MM-dd HH:mm:ss',
-              hide: true,
+              width:130,
+              type: "datetime",
+              valueFormat: "yyyy-MM-dd HH:mm:ss",
               rules: [{
                 required: true,
                 message: "请输入上报时间",
@@ -112,222 +186,267 @@
               }]
             },
             {
-              label: "处理人",
-              prop: "handler",
-              addDisplay:false,
-              editDisplay:false,
-              rules: [{
-                required: true,
-                message: "请输入处理人",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "处理人电话",
-              prop: "handlerPhone",
-              hide: true,
-              addDisplay:false,
-              editDisplay:false,
-              rules: [{
-                required: true,
-                message: "请输入处理人电话",
-              },{
-                validator: validatePhone,
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "工单状态",
-              prop: "jobStatus",
-              search: true,
-              type:'select',
-              addDisplay:false,
-              slot: true,
+              label: "报事来源",
+              prop: "reportSource",
+              type: "select",
+              addDisplay: false,
+              editDisplay: false,
+              width: 100,
               dicData:[
                 {
-                  label:'待处理',
-                  value:0
-                },{
-                  label:'处理中',
-                  value:1
-                },{
-                  label:'已处理',
-                  value:2
+                  label: "小程序",
+                  value: 1
+                },
+                {
+                  label: "后台",
+                  value: 2
                 }
-              ],
-              rules: [{
-                required: true,
-                message: "请选择工单状态",
-                trigger: "blur"
-              }]
+              ]
             },
             {
-              label: "所属区域",
-              prop: "residentialId",
+              label: "受理状态",
+              prop: "acceptStatus",
               type: "select",
-              slot:true,
-              formslot:true,
-              // dicUrl: "/api/cyzh-community/residential/list?agencyId={{key}}&&size=9999",
-              dicUrl: "/api/cyzh-community/residential/list?size=500",
-              dicFormatter:(res)=>{
-                return res.data.records;//返回字典的层级结构
-              },
-              // dicFlag: false,
-              filterable: true,
-              props: {
-                label: "name",
-                value: "id"
-              },
-              rules: [{
-                required: false,
-                message: "请选择所属区域",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "机构路径",
-              prop: "orgPosition",
-              hide: true,
-              display: false,
-              rules: [{
-                required: true,
-                message: "请输入机构路径",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "报修位置",
-              prop: "reportPosition",
-              rules: [{
-                required: true,
-                message: "请输入报修位置",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "预约开始时间",
-              prop: "beginTime",
-              hide: true,
-              type: 'datetime',
-              valueFormat: 'yyyy-MM-dd HH:mm:ss',
-              rules: [{
-                required: false,
-                message: "请输入预约开始时间",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "预约结束时间",
-              prop: "endTime",
-              hide: true,
-              type: 'datetime',
-              valueFormat: 'yyyy-MM-dd HH:mm:ss',
-              rules: [{
-                required: false,
-                message: "请输入预约结束时间",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "是否已评价",
-              prop: "estimateStatus",
-              hide: true,
-              display:false,
-              type:'select',
+              disabled: true,
+              addDisplay: false,
+              editDisplay: false,
+              width: 100,
               dicData:[
                 {
-                  label:'未评价',
-                  value:0
-                },{
-                  label:'已评价',
-                  value:1
+                  label: "待受理",
+                  value: 0
+                },
+                {
+                  label: "已受理",
+                  value: 1
+                },
+                {
+                  label: "拒绝受理",
+                  value: 2
                 }
               ],
               rules: [{
                 required: false,
-                message: "请输入",
+                message: "请输入受理状态：0：等待受理，1：已受理，2：拒绝受理",
                 trigger: "blur"
               }]
             },
             {
-              label: "用户评价",
-              prop: "comment",
-              hide: true,
-              rules: [{
-                required: false,
-                message: "请输入用户对处理结果的评论",
-                trigger: "blur"
-              }]
+              label: "所属园区",
+              prop: "agencyName",
+              addDisplay: false,
+              editDisplay: false,
             },
             {
-              label: "处理时间",
-              prop: "handleTime",
-              type: 'datetime',
-              valueFormat: 'yyyy-MM-dd HH:mm:ss',
-              hide: true,
+              label: "位置",
+              prop: "reportPosition",
+              align: "left",
               rules: [{
-                required: false,
-                message: "请输入处理时间",
+                required: true,
+                message: "请输入报事报修位置",
                 trigger: "blur"
               }]
             },
             {
-              label: "小区名称",
-              prop: "residentialName",
+              label: "所属园区",
+              prop: "agencyId",
+              search: true,
+              type: "select",
+              width: 120,
               hide: true,
-              display: false,
+              viewDisplay: false,
+              dicUrl: "/api/cyzh-community/agency/list?size=100",
+              dicFormatter:(res)=>{
+                return res.data.records;//返回字典的层级结构
+              },
+              props: {
+                label: "name",
+                value: "id"
+              },
               rules: [{
                 required: true,
-                message: "请输入小区名称",
+                message: "请选择所属园区",
                 trigger: "blur"
               }]
             },
             {
-              label: "物业系统id",
-              prop: "oldId",
+              label: "事件描述",
+              prop: "reportDetail",
+              type: "textarea",
               hide: true,
-              display: false,
               rules: [{
                 required: true,
-                message: "请输入物业系统id",
+                message: "请输入事件描述",
                 trigger: "blur"
               }]
             },
             {
-              label: "图片-多张图片用“，”切割",
-              prop: "pic",
+              label: "受理原因",
+              prop: "acceptReason",
+              type: "textarea",
               hide: true,
-              display: false,
+              addDisplay: false,
               rules: [{
-                required: true,
-                message: "请输入图片-多张图片用“，”切割",
+                required: false,
+                message: "请输入受理原因",
                 trigger: "blur"
               }]
             },
             {
-              label: "报修详情",
-              prop: "reportDetail",
+              label: "事件图片",
+              prop: "pic",
+              type: "upload",
+              dataType: 'string',
+              align:'left',
               hide: true,
-              type: 'textarea',
+              listType: 'picture-card',
+              row: true,
+              propsHttp: {
+                res: "data",
+                url: "link"
+              },
+              limit: 4,
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              tip: '只能生产jpg/png图片，且不超过500kb',
               rules: [{
                 required: false,
-                message: "请输入报修详情",
+                message: "请输入事件图片",
                 trigger: "blur"
               }]
             },
+          ],
+          group:[
+            {
+              icon: 'el-icon-info',
+              label: '工单详情',
+              prop: 'group1',
+              viewDisplay: true,
+              addDisplay: false,
+              editDisplay: false,
+              column:[
+                {
+                  label: "处理人",
+                  prop: "handler",
+                  rules: [{
+                    required: true,
+                    message: "请输入处理人",
+                    trigger: "blur"
+                  }]
+                },
+                {
+                  label: "处理人电话",
+                  prop: "handlerPhone",
+                  labelWidth: 100,
+                  rules: [{
+                    required: true,
+                    message: "请输入处理人电话",
+                    trigger: "blur"
+                  }]
+                },
+                {
+                  label: "处理状态",
+                  prop: "handleStatus",
+                  rules: [{
+                    required: true,
+                    message: "请输入处理状态",
+                    trigger: "blur"
+                  }]
+                },
+                {
+                  label: "处理时间",
+                  prop: "handleTime",
+                  rules: [{
+                    required: true,
+                    message: "请输入处理时间",
+                    trigger: "blur"
+                  }]
+                },
+              ]
+            }
           ]
         },
-        data: []
-      }
+        data: [],
+        workOrderOption:{
+          group: [
+            {
+              label: '生成工单',
+              icon: 'van-icon-location-o',
+              arrow: false,
+              column: [
+                {
+                  label: '工单名称',
+                  prop: 'workOrderName',
+                  rules: [
+                    {
+                      required: true,
+                      message: '请输入工单名称',
+                      trigger: 'blur'
+                    }
+                  ]
+                },
+                {
+                  label: '事件标签',
+                  prop: 'bizTag',
+                  placeholder: "例如 报事，报修等标签",
+                  rules: [
+                    {
+                      required: true,
+                      message: '请输入事件标签',
+                      trigger: 'blur'
+                    }
+                  ]
+                },
+                {
+                  label: '处理人',
+                  prop: 'handler',
+                  rules: [
+                    {
+                      required: true,
+                      message: '请选择姓名',
+                      trigger: 'blur'
+                    }
+                  ]
+                },
+                {
+                  label: '处理人联系电话',
+                  prop: 'handlerPhone',
+                  labelWidth: 120,
+                  rules: [
+                    {
+                      required: false,
+                      message: '请选择姓名',
+                      trigger: 'blur'
+                    }
+                  ]
+                },
+                {
+                  label: '处理时间',
+                  prop: 'handleTime',
+                  type: "datetime",
+                  valueFormat: "yyyy-MM-dd HH:mm:ss",
+                  rules: [
+                    {
+                      required: false,
+                      message: '请选择姓名',
+                      trigger: 'blur'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        workOrderForm:{}
+      };
     },
     computed: {
       ...mapGetters(["permission"]),
       permissionList() {
         return {
-          addBtn: this.vaildData(this.permission.parkrepair_add, false),
-          viewBtn: this.vaildData(this.permission.parkrepair_view, false),
-          delBtn: this.vaildData(this.permission.parkrepair_delete, false),
-          editBtn: this.vaildData(this.permission.parkrepair_edit, false)
+          addBtn: this.vaildData(this.permission.repair_add, false),
+          viewBtn: this.vaildData(this.permission.repair_view, false),
+          delBtn: this.vaildData(this.permission.repair_delete, false),
+          editBtn: this.vaildData(this.permission.repair_edit, false)
         };
       },
       ids() {
@@ -338,18 +457,27 @@
         return ids.join(",");
       }
     },
-    created() {
-      const tenantType = localStorage.getItem("tenantType");
-      if (tenantType == 0){
-        this.option.column[7].label = "所属区域"
-      }else if (tenantType == 1){
-        this.option.column[7].label = "所属区域"
-      }
-    },
     methods: {
-      selectCallback(row){
-        this.form.residentialId = row.id;
-        this.form.residentialName = row.name;
+      workOrderFormClose(){
+        this.currentRepairId = null;
+        this.workOrderFormVisible = false;
+      },
+      openWorkOrderForm(row){
+        this.currentRepairId = row.id;
+        this.workOrderFormVisible = true;
+      },
+      createWorkOrder(done, type){
+        this.workOrderForm.id = this.currentRepairId;
+        generateWorkOrder(this.workOrderForm).then(res =>{
+          this.$message({
+            type: "success",
+            message: "工单生成成功!"
+          });
+        });
+        this.currentRepairId = null;
+        this.workOrderFormVisible = false;
+        this.workOrderForm = {};
+        done();
       },
       rowSave(row, done, loading) {
         add(row).then(() => {
@@ -365,7 +493,6 @@
         });
       },
       rowUpdate(row, index, done, loading) {
-        loading = false;
         update(row).then(() => {
           this.onLoad(this.page);
           this.$message({
@@ -418,7 +545,15 @@
           });
       },
       beforeOpen(done, type) {
+        if (["add"].includes(type)) {
+          this.option.group = null;
+        }
         if (["edit", "view"].includes(type)) {
+          if(type === "view"){
+            this.option.group = this.groupArray;;
+          }else{
+            this.option.group = null;
+          }
           getDetail(this.form.id).then(res => {
             this.form = res.data.data;
           });

src/views/wel/index.vue

@@ -1,9 +1,18 @@
 <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>
+
+    <!-- 视频播放 -->
+    <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
 </template>
 
@@ -11,119 +20,501 @@
   import {
     mapGetters
   } from "vuex";
+  import devicePlayer from "@/components/scene/wvp/devicePlayer.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,
+      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>