adm/src/views/data_admin/buildData/index.vue

<!--
  revit扫楼数据整理
 -->
<template>
  <div style="height:100%;">
    <div class="build_header" ref="header">
      <!-- 建筑选择 -->
      <span style="padding-right:12px;color:#999;vertical-align: middle;">建筑名称</span>
      <el-select v-model="buildId" style="margin-right:10px;" placeholder="请选择" @change="changeBuild">
        <el-option v-for="item in buildList" :key="item.id" :label="item.localName"
                   :value="item.id"></el-option>
      </el-select>
      <!-- 楼层选择 -->
      <span style="padding-right:12px;color:#999;">楼层</span>
      <el-select v-model="floorId" placeholder="请选择" @change="changeFloor">
        <el-option v-for="item in floorList" :key="item.id" :label="item.localName"
                   :value="item.id"></el-option>
      </el-select>
      <!-- 选择时间插件 -->
      <build-time :timeArr="timeArr" @checkTime="checkTime"></build-time>
    </div>
    <div class="left-main">
      <div id="buildData">
        <!-- 头部信息 -->
        <div class="point_view" ref="point">
          <!-- 点位标签 -->
          <div class="build_label" v-show="labelShow">
            <!-- 左按钮 -->
            <div class="turn_left">
              <i class="iconfont" @click="turn(0)">&#xe720;</i>
            </div>
            <!-- 主体视窗 -->
            <div class="label_view">
              <el-scrollbar>
                <div class="swiper-wrapper">
                  <div class="swiper-slide" :class="checkPointClass == 'all' ? 'active_swiper' : ''"
                       @click="checkPoint('all','all','all')">
                    <div class="all_view">
                      <h3>全部</h3>
                    </div>
                  </div>
                  <div class="swiper-slide" v-for="(item,index) in PTArr" :key="index"
                       :class="checkPointClass == index ? 'active_swiper' : ''"
                       @click="checkPoint(index,item.Id,item.Name)">
                    <div class="img_view">
                      <div :class="index == 0 ? 'msg_view' : 'title_view'">
                        <h3>{{ item.Name }}</h3>
                        <p>
                          附近的资产：
                          <span>{{ item.Total }}</span> 个（
                          <em>{{ item.Nocheck }}</em> 个未完成修订）
                        </p>
                      </div>
                      <img v-if="index != 0" v-load @error="setErrorImg"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Image +'&width=200'"
                           :alt="item.Name">
                      <el-button type="text" v-if="index != 0" class="btn" @click.stop="getTable(item.Id,index)">查看详情
                      </el-button>
                      <i v-if="index != 0" class="iconfont icon-shuaxin icon" @click.stop="refreshImg(index)"></i>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
              <!-- <div class="swiper-container" id="swiper"> -->
              <!-- <div class="swiper-wrapper" ref="swiperPoint">
                  <div class="swiper-slide" :class="checkPointClass == 'all' ? 'active_swiper' : ''" @click="checkPoint('all','all','all')">
                      <div class="all_view">
                          <h3>全部</h3>
                      </div>
                  </div>
                  <div class="swiper-slide" v-for="(item,index) in PTArr" :key="index" :class="checkPointClass == index ? 'active_swiper' : ''" @click="checkPoint(index,item.Id,item.Name)">
                      <div class="img_view">
                          <div :class="index == 0 ? 'msg_view' : 'title_view'">
                              <h3>{{item.Name}}</h3>
                              <p>
                                  附近的资产：
                                  <span>{{item.Total}}</span> 个（
                                  <em>{{item.Nocheck}}</em> 个未完成修订）
                              </p>
                          </div>
                          <img v-if="index != 0" v-load @error="setErrorImg" :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Image +'&width=200'" :alt="item.Name">
                          <p v-if="index != 0" class="btn" @click.stop="getTable(item.Id,index)">查看详情</p>
                          <i v-if="index != 0" class="iconfont icon-shuaxin icon" @click.stop="refreshImg(index)"></i>
                      </div>
                  </div>
              </div> -->
              <!-- Add Pagination -->
              <!--  -->
              <!-- </div> -->
            </div>
            <!-- 右按钮 -->
            <div class="turn_right">
              <i class="iconfont" @click="turn(1)">&#xe6f8;</i>
            </div>
          </div>
          <!-- 控制点位标签显示 -->
          <div class="label_show">
            <el-button plain @click="labelShowBtn">{{ labelChecked }}</el-button>
            <!-- <div class="label_btn" @click="labelShowBtn">
                <span>{{labelChecked}}</span>
                <i class="iconfont" :class="!labelShow ? 'icon-unfold' : 'icon-packup'"></i>
            </div> -->
          </div>
        </div>
        <!-- 全部与未完成 -->
        <div class="build_operate" ref="operate">
          <el-radio-group v-model="checked" @change="changeChecked(checked)">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="0">未完成修订</el-radio-button>
          </el-radio-group>
          <!-- <span @click="changeChecked('')" :class="checked === '' ? 'Blue' : ''">全部</span>
          <span @click="changeChecked(0)" :class="checked === 0 ? 'Blue' : ''">未完成修订</span> -->
          <div class="undo_btn" @click="undo">
            <!-- <i class="iconfont icon-undo"></i>
            <i>撤回</i> -->
            <el-button plain>撤回</el-button>
          </div>
          <div class="undo_btn" @click="refresh">
            <!-- <i class="iconfont icon-shuaxin"></i>
            <i>刷新</i> -->
            <el-button plain>刷新</el-button>
          </div>
          <div class="undo_btn" @click="download">
            <!-- <i class="iconfont icon-xiazai"></i>
            <i>下载</i> -->
            <el-button plain>下载</el-button>
          </div>
          <p class="build_msg" v-show="buildMsgShow" :class="buildMsg ? 'blink' : ''">
            其他设备族的资产只能在对应页签内维护，设备族变更的资产刷新后不匹配的信息点值将丢失，将会在对应的页签内显示</p>
        </div>
        <!-- 主体表格与tab -->
        <div class="build_table">
          <el-tabs type="card" v-model="tabAvtive" @tab-click="createHotBtn">
            <el-tab-pane v-for="(item,index) in facilityList" :key="index" :name="'table' + index"
                         :label="item.Name + '(' + item.Total + ')'">
              <div style="padding: .2rem;width:100%;" v-loading="loading">
                <div :id="'table' + index" v-loading="tableLoading"></div>
                <div class="data_page center" style="position: inherit">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                 :current-page.sync="currentPage[tabChecked]" :page-sizes="pageSizeArrs"
                                 :page-size="pageSizeArr[tabChecked]" layout="total, sizes, prev, pager, next, jumper"
                                 :total="pageCount[tabChecked]"></el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 图片查看浮层 -->
        <div class="mouse_move" style="backgroundColor:#ccc;height:3px;cursor:n-resize;" @mousedown="drag"
             @mouseup="mouseUp"></div>
        <div class="build_pic" v-bind:style="{height:picHeight+'px'}" ref="picview">
          <!-- <div class="pic_show" @click="picNoShow">关闭</div> -->
          <div class="turn_left">
            <i class="iconfont" @click="turnPic(0)">&#xe720;</i>
          </div>
          <div class="pic_view">
            <div class="swiper-container" id="swiperPic" v-show="tablePicArr.Pic.length">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,$index) in tablePicArr.Nameplate" :key="item.Key">
                  <div class="img_view">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key"
                         :title="item.Name" :alt="item.Name">
                    <i class="iconfont icon-shuaxin icon" @click.stop="changeImgUrl('Nameplate',$index)"></i>
                  </div>
                </div>
                <div class="swiper-slide" v-for="(item,$index) in tablePicArr.Pic" :key="item.Key">
                  <div class="img_view" v-if="item.Type != 'image_video'">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '铭牌照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '设备正面照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '带二维码的设备远景照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '设备左侧照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '设备右侧照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '设备背面照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '带二维码的设备近景照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '视频资料' && item.Type == 'image'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <div v-if="item.Type == 'video'" style="width:100%;height:100%;">
                      <video style="width:100%;height:100%;"
                             :src="'/image-service/common/file_get/'+ item.Key + '?systemId=dataPlatform'" controls
                             :poster="'/image-service/common/image_get?systemId=dataPlatform&key='+ delVideo(item.Key) +'&width=200'"></video>
                    </div>
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '其他照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <img v-load @error="setErrorImg" @click="seeBig(item.Key,item.Name,item.Type)"
                         v-if="item.Name == '全景照片'"
                         :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                         :title="item.Name" :alt="item.Name">
                    <!-- <i
      @click="delPic($index)"
      class="iconfont icon-guanbi"
      style="z-index:99;background:#fff;position:absolute;right:10px;top:10px;"
    ></i>-->
                    <i class="iconfont icon-shuaxin icon" @click.stop="changeImgUrl('Pic',$index)"></i>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="!tablePicArr.Pic.length">
              <p>{{ tablePicMsg ? tablePicMsg : '请选择资产' }}</p>
            </div>
          </div>
          <div class="turn_right">
            <i class="iconfont" @click="turnPic(1)">&#xe6f8;</i>
          </div>
        </div>
        <!-- 查看图片、视频、全景图页面唤起 -->
        <div class="iframe_view" v-if="iframeShow">
          <div class="iframe_no" @click="iframeShow = false">
            <i class="iconfont icon-guanbi"></i>
          </div>
          <iframe id="google_ads_frame2" name="google_ads_frame2" frameborder="0" :src="iframeSrc" marginwidth="0"
                  marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"
                  allowfullscreen="true"></iframe>
        </div>
        <!-- 编辑点位标签弹窗 -->
        <el-dialog title="点位标签编辑" class="modification" :visible.sync="dialogTableVisible" @close="closeDialog">
          <div class="content_box">
            <div class="mod_title">
              <div class="qr_code">
                <img v-if="pointList.PointId"
                     :src="'/ScanBuilding/service/qrcode/point?projectId=' + projectId + '&pointId=' + pointList.PointId + '&FloorId=' + floorId + '&width=200&height=200'"
                     alt>
                <p v-else>暂无二维码</p>
              </div>
              <!-- 头部信息 -->
              <div class="msg_main">
                <p :title="floorName">现场位置：{{ floorName ? floorName : '暂无' }}</p>
                <div class="input_view">
                  <input type="text" v-model="pointList.PointName" @focus="nameShow = true" @blur="nameNotShow"
                         @keyup.enter="savePointChange" placeholder="点位标签的名称">
                  <i class="iconfont icon-check" v-show="nameShow" @click="savePointChange"></i>
                </div>
                <div class="input_view">
                  <input type="text" v-model="pointList.PointLocalId" @focus="noShow = true" @blur="noNotShow"
                         @keyup.enter="savePointChange" placeholder="点位标签的本地编码">
                  <i class="iconfont icon-check" v-show="noShow" @click="savePointChange"></i>
                </div>
              </div>
            </div>
            <!-- 表格信息 -->
            <div class="cant_mod">
              <div class="msg_table">
                <div class="table_header">编码及关系</div>
                <table>
                  <tbody>
                  <tr>
                    <td>点位标签id</td>
                    <td>{{ pointList.PointId }}</td>
                  </tr>
                  <tr>
                    <td>模型id</td>
                    <td>{{ pointList.BimId ? pointList.BimId : '暂无' }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <!-- 照片信息 -->
              <div class="locale_pic">
                <p>现场照片</p>
                <div v-if="pointList.ImageList">
                  <!-- //图片排序 -->
                  <ul>
                    <li v-for="(item,index) in imgList.place" v-if="imgList.place.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.nameplate" v-if="imgList.nameplate.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.ahead" v-if="imgList.ahead.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.qrCodeLooger" v-if="imgList.qrCodeLooger.length"
                        class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.left" v-if="imgList.left.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.right" v-if="imgList.right.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.bottom" v-if="imgList.bottom.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.qrCode" v-if="imgList.qrCode.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.panorama" v-if="imgList.panorama.length" class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="(item,index) in imgList.else" v-if="imgList.else.length && item.Type != 'image_video'"
                        class="img_view">
                      <img @click="seeBig(item.Key,item.Name,item.Type)"
                           :src="'/image-service/common/image_get?systemId=dataPlatform&key='+ item.Key +'&width=200'"
                           alt>
                      <i class="iconfont icon-shuaxin icon" @click.stop="changeImage(index)"></i>
                    </li>
                    <li v-for="item in imgList.video" style="border: 1px solid #ccc;">
                      <video style="width:100%;height:100%;"
                             :src="'/image-service/common/file_get/'+ item.Key + '?systemId=dataPlatform'" controls
                             :poster="'/image-service/common/image_get?systemId=dataPlatform&key='+ delVideo(item.Key) +'&width=200'"></video>
                    </li>
                  </ul>
                </div>
                <div v-else>暂无照片</div>
              </div>
              <div id="viewer"></div>
            </div>
          </div>
        </el-dialog>
        <!-- 删除提示 -->
        <el-dialog title="提示" :visible.sync="deldialog">
          <span>你确定删除该资产吗？</span>
          <span slot="footer" class="dialog-footer">
                <el-button @click="refresh">取 消</el-button>
                <el-button type="primary" @click="delTrue">确 定</el-button>
              </span>
        </el-dialog>
        <drag v-show="dragShow" @closeDrag="dragShow = false" :iframeSrc="dragSrc"></drag>
      </div>
    </div>
    <div class="right-main">
      <recommend ref="recommend" @loadData="loadData"></recommend>
    </div>
  </div>
</template>

<script>
import buildTime from "@/components/data_admin/selectTime";
import drag from "@/components/data_admin/drag";
import Swiper from "swiper";
import tools from "@/utils/scan/tools"
import recommend from "@/components/data_admin/buildData/recommend";
import showTools from "@/utils/handsontable/notShow"
import text from "@/utils/handsontable/mainText"
// import DragResize from '@/assets/js/resize'
import "@/assets/js/chosen.jquery.min";
import "@/assets/js/handsontable-chosen-editor";
import handsonUtils from "@/utils/scan/hasontableUtils"
import 'swiper/dist/css/swiper.min.css'
import Handsontable from "handsontable-pro"
import 'handsontable-pro/dist/handsontable.full.css'
import zhCN from 'handsontable-pro/languages/zh-CN';
//接口
import {
  getBuildSelect, //根据项目ID获得建筑列表
  getFloor, //根据建筑id获取楼层id
  getPT, //根据时间、建筑名称、楼层查询点位标签
  getPoint, //获取点位标签详情
  updatePoint, //修改点位标签
  getTabFamily, //获取tab标签
  getTableHeader, //获取表格数据头部
  getTableMain, //获取表格主体内容
  upDateTableMain, //提交修改设备资产
  delErrAssets, //删除设备资产
  getAllFamily, //获取所有设备族
  defaultFloor, //获取默认楼层
  getdelMain, //获取过滤掉后的表格主体
  getBasicMatch, //获取完全匹配的厂商库id
  // buildingQuery, //数据中心-建筑查询
  // floorQuery, //数据中心-楼层查询
} from "@/api/scan/request";
import { buildingQuery } from '@/api/object/build';
// todo buildingQuery
import { floorQuery } from '@/api/object/floor';
import { mapGetters, mapActions } from "vuex"

export default {
  components: {
    "build-time": buildTime,
    "drag": drag,
    recommend
  },
  data() {
    return {
      buildList: [],
      buildId: "",
      floorList: [],
      floorId: "",
      timeArr: ["一个月内", "一周内", "近三天", "昨天", "今天"],
      checkTimeArr: [],
      PTArr: [],
      value: "", //select的值
      swiper: "", //点位标签的swiper
      labelChecked: "请选择点位标签！", //按钮文案
      labelShow: true, //头部的点位标签的显示
      swiper2: "", //图片的swiper
      dialogTableVisible: false, //编辑点位标签弹窗显示
      dialogVisible: false, //请求错误弹窗
      ajaxMsg: "", //请求错误提示
      picShow: false, //最底层图片窗
      pointList: "", //点位标签详情数组
      pointId: "", //点位标签详情查询需求的id
      // ProjId: this.$route.query.projId, //项目id
      // UserId: this.$route.query.userId, //用户id
      checkPointClass: "all", //点击点位标签的当前标签
      pointCheck: "", //当前点击到的点位标签
      checked: 0, //审核标志
      facilityList: [], //设备list
      myHotArr: [], //Handsontable实例数组
      code: "", //被选中的设备族
      myHotHeaderArr: [], //表格实例的头部数组
      myHotMainArr: [], //表格实例的主体内容数组
      tabChecked: 0, //tab当前被选中的
      currentPageArr: [], //当前选中页数数组
      pageCount: [], //总共数据条数
      pageSizeArrs: [10, 30, 50, 100], //下拉页数个数
      pageSizeArr: [], //数组当前页个数
      currentPage: [], //当前页数
      loading: false, //loading动画
      deldialog: false, //删除提示
      delArr: [], //需要删除的Fmid
      tablePicArr: {
        Pic: []
      }, //底部pic的数组
      tabAvtive: "table0", //tab活跃页
      deepArr: [], //删除存储数组
      iframeSrc: "", //iframe的src
      iframeShow: false, //iframe的显示
      tableLoading: false, //table的loading
      AllFamily: [], //所有的Family
      filtersArr: [], //表格数据被过滤后的下标
      tablePicMsg: "", //设备照片提示语
      rowArr: "", //鼠标单击表格时的位置
      nameShow: false, //点位标签名的勾号是否显示
      noShow: false, //点位标签no是否显示
      defaultFloorData: "", //默认楼层
      imgList: [], //点位标签的图片数组
      floorName: "", //被选中的楼层名
      buildMsgShow: false, //提示显示与否
      buildMsg: false, //是否跳动
      picHeight: 180, //图片容器的高度
      dragShow: false, //拖拽容器的显示
      dragSrc: '', //拖拽元素的src
      infos: "", //点击时的信息
    };
  },
  created() {
    //默认时间赋值
    this.checkTimeArr = [
      this.getNowFormatDate(new Date().setHours(0, 0, 0, 0)),
      this.getNowFormatDate(new Date())
    ];
    // 获取建筑信息
    this.getBuilding();
    //获取所有所有的设备族
    this.getAllFamily();
  },
  computed: {
    ...mapGetters("layout", [
      "projectId",
      "userId",
      "secret"
    ])
  },
  methods: {
    //获取所有设备族
    getAllFamily() {
      getAllFamily().then(result => {
        if (result.data.Result == "success") {
          this.AllFamily = this.changeArr(result.data.Content);
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    //重新获取数据loadhot
    loadData() {
      let param = {
        BeginTime: this.checkTimeArr[0],
        BuildId: this.buildId,
        Checked: this.checked,
        EndTime: this.checkTimeArr[1],
        Family: this.code,
        FloorId: this.floorId,
        PageNum: this.currentPage[this.tabChecked],
        PageSize: this.pageSizeArr[this.tabChecked],
        PointId: this.pointCheck,
        ProjId: this.projectId,
        UserId: this.userId
      };
      getdelMain(param).then(res => {
        if (res.data.Result == "success") {
          let data = res.data.FmList
          if (data && data.length) {
            //如果数据存在，有localname取localname，否则取随机生成name
            data = data.map(item => {
              item.Infos.EquipLocalName = item.Infos.EquipLocalName || item.Infos.EquipName
              return item
            })
          }
          this.myHotMainArr[this.tabChecked] = data;
          this.pageCount[this.tabChecked] = res.data.Count;
          let dom = this.myHotArr[this.tabChecked];
          //存储一个数组防止删除操作找寻不到删除的该数组
          this.tableLoading = false;
          this.deepArr = this.deepCopy(data);
          if (!!this.myHotArr[this.tabChecked]) {
            this.myHotArr[this.tabChecked].loadData(data)
            this.myHotMainArr[this.tabChecked] = data
          } else {
            console.log("创建实例", this.tabChecked,
              data,
              this.myHotHeaderArr[this.tabChecked])
            this.createHot(
              this.tabChecked,
              data,
              this.myHotHeaderArr[this.tabChecked]
            );
          }
          this.loading = false
        } else {
          this.$message.error("请求错误：" + res.data.ResultMsg)
        }
      })
      // .catch(_ => {
      //     this.$message.error("请求错误")
      // })
    },
    //删除图片
    delPic(index) {
      let param = {}
      if (!!this.tablePicArr && this.tablePicArr.Pic.length) {
        this.$confirm("<p>你确定删除此照片吗？</p><div style='height:200px;'><img style='display: block;margin: auto;' src='/image-service/common/image_get?systemId=dataPlatform&width=200&height=200&key=" + this.tablePicArr.Pic[index].key + "' /></div>",
          "删除图片", {
            dangerouslyUseHTMLString: true
          }).then(() => {
          if (this.tablePicArr.Pic[index].name == "铭牌照片") {
            this.delPicPost("Nameplate", this.tablePicArr.Pic[index].key)
          } else {
            this.delPicPost("Pic", this.tablePicArr.Pic[index].key)
          }
        }).catch(_ => {
          this.$message("取消删除")
        })
      } else {
        this.$message.error("请确定该资产有pic信息")
      }
    },
    delPicPost(name, key) {
      let myInfos = this.infos.Infos[name].map(item => {
        if (item.Key == key) {
          return undefined
        } else {
          return item
        }
      }).filter(b => b);
      let param = {}
      param.BuildId = this.infos.BuildId
      param.BuildName = this.infos.BuildName
      param.Checked = this.infos.Checked
      param.CodeType = this.infos.CodeType
      param.CreateTime = this.infos.CreateTime
      param.Family = this.infos.Family
      param.FamilyName = this.infos.FamilyName
      param.FloorId = this.infos.FloorId
      param.FmId = this.infos.FmId
      param.FmName = this.infos.FmName
      param.LastUpdate = this.infos.LastUpdate
      param.ProjId = this.infos.ProjId
      param.X = this.infos.X
      param.Y = this.infos.Y
      param.Infos = {}
      if (!!this.infos.Infos.Pic && this.infos.Infos.Pic.length) {
        param.Infos.Pic = tools.copyArr(this.infos.Infos.Pic)
      }
      if (!!this.infos.Infos.Nameplate && this.infos.Infos.Nameplate.length) {
        param.Infos.Nameplate = tools.copyArr(this.infos.Infos.Nameplate)
      }
      param.Infos[name] = myInfos
      let Pj = {
        ProjId: this.projectId,
        UserId: this.userId
      }
      upDateTableMain(Pj, [param]).then(res => {
        if (res.data.Result == "success") {
          if (!!param.Infos.Nameplate) {
            this.tablePicArr.Pic = param.Infos.Nameplate.concat(param.Infos.Pic)
          } else {
            this.tablePicArr.Pic = param.Infos.Pic
          }
          this.$message.success("删除成功")
          this.getTableMain()
        } else {
          this.$message.error("请求错误:" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },
    //图片div移动事件
    drag(el) {
      let picDiv = this.$refs["picview"];
      let startY = el.clientY;
      const _this = this;
      document.onmousemove = function (e) {
        e.preventDefault();
        let endY = e.clientY;
        // let headerH = _this.$refs['header'].offsetHeight + 48 + _this.$refs['operate'].offsetHeight + 300
        // if (headerH > endY) {
        //     _this.mouseUp()
        // }
        _this.picHeight = _this.picHeight - endY + startY;
        if (_this.picHeight > 245) {
          _this.mouseUp()
        }
        startY = endY;
        //如果图片容器高度大于表格最小高度，停止拖拽
      };
    },
    //移动图片容器的时候鼠标up时触发重新渲染表格高度
    mouseUp(el) {
      document.onmousemove = null;
      if (this.myHotArr[this.tabChecked]) {
        let windowH = document.documentElement.clientHeight
        let headerH = this.$refs["header"].offsetHeight;
        let pointH = this.$refs["point"].offsetHeight;
        let operateH = this.$refs["operate"].offsetHeight;
        let picH = this.$refs["picview"].offsetHeight;
        let height = windowH - headerH - 48 - operateH - picH - 32 - 32 - 32;
        this.myHotArr[this.tabChecked].container.children[0].style.height = height + 'px'
        this.myHotArr[this.tabChecked].container.parentNode.style.height = height + 'px'
      }
      this.createPicSwiper();
    },
    //获取建筑列表
    getBuilding() {
      buildingQuery({
        pageNumber: 1,
        pageSize: 1000,
        orders: "localName asc",
        Projection: ["id", "localName"]
      }, res => {
        this.buildList = res.content;
      });
    },
    //获取点位标签详情
    getPointDetail() {
      let param = {
        PointId: this.pointId,
        UserId: this.userId,
        ProjId: this.projectId
      };
      getPoint(param).then(result => {
        if (result.data.Result == "success") {
          this.pointList = result.data.PointList[0];
          this.imgList = this.delImage(result.data.PointList[0].ImageList);
          this.dialogTableVisible = true;
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    delImage(imageList) {
      let list = {
        place: [],
        nameplate: [],
        ahead: [],
        qrCodeLooger: [],
        left: [],
        right: [],
        bottom: [],
        video: [],
        else: [],
        qrCode: [],
        panorama: []
      };
      let imgList = imageList;
      for (let i = 0; i < imgList.length; i++) {
        switch (imgList[i].name) {
          case "安装位置":
            list.place.push(imgList[i]);
            break;
          case "铭牌照片":
            list.nameplate.push(imgList[i]);
            break;
          case "设备正面照片":
            list.ahead.push(imgList[i]);
            break;
          case "带二维码的设备远景照片":
            list.qrCodeLooger.push(imgList[i]);
            break;
          case "设备左侧照片":
            list.left.push(imgList[i]);
            break;
          case "设备右侧照片":
            list.right.push(imgList[i]);
            break;
          case "设备背面照片":
            list.right.push(imgList[i]);
            break;
          case "带二维码的设备近景照片":
            list.qrCode.push(imgList[i]);
            break;
          case "视频":
            list.video.push(imgList[i]);
            break;
          case "全景照片":
            list.panorama.push(imgList[i]);
            break;
          default:
            list.else.push(imgList[i]);
        }
      }
      return list;
    },
    //获取楼层列表
    getFloorData() {
      let param = {
        filters: `buildingId='${this.buildId}'`,
        orders: 'id desc'
      };
      floorQuery(param, res => {
        this.floorList = res.content
        this.floorList.unshift({
          name: "全部",
          localName: "全部",
          floorId: "all"
        }, {
          name: "未明确楼层",
          localName: "未明确楼层",
          floorId: "noKnow"
        })
      });
    },
    //保存点位标签详情的修改
    savePoint() {
      let param = {
        ProjId: this.projectId,
        UserId: this.userId,
        PointList: this.pointList
      };
      updatePoint(param).then(result => {
        if (result.data.Result == "success") {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          return;
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    //获取点位标签
    getPT() {
      let param = {
        BeginTime: this.checkTimeArr[0],
        EndTime: this.checkTimeArr[1],
        BuildId: this.buildId,
        FloorId: this.floorId,
        ProjId: this.projectId,
        UserId: this.userId
      };
      getPT(param).then(result => {
        if (result.data.Result == "success") {
          this.PTArr = result.data.PointList;
          // this.labelShow = true
          //赋予swiper重新操作
          this.labelShow = true;
          this.createPTSwiper();
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    //保存设备资产的更新
    upDateTableMain(paramList) {
      let param = {
        ProjId: this.projectId,
        UserId: this.userId
      };
      console.log("data修改")
      upDateTableMain(param, paramList).then(result => {
        if (result.data.Result == "success") {
          return;
        } else {
          this.dialogVisible = true;
          this.ajaxMsg = "保存出错";
        }
      });
    },
    //获取设备族列表
    getTabFamily() {
      let param = {
        ProjId: this.projectId,
        UserId: this.userId,
        BeginTime: this.checkTimeArr[0],
        EndTime: this.checkTimeArr[1],
        PointId: this.pointId,
        FloorId: this.floorId,
        Checked: this.checked,
        BuildId: this.buildId
      };
      getTabFamily(param).then(result => {
        if (result.data.Result == "success") {
          //赋予页面arr的数组长度和默认数据
          this.myHotArr.length = this.myHotMainArr.length = this.myHotMainArr.length = this.pageCount.length = this.currentPageArr.length = this.pageSizeArr.length = this.currentPage.length =
            result.data.FamilyList.length;
          for (let i = 0; i < this.pageCount.length; i++) {
            this.pageCount[i] = 10;
            this.currentPageArr[i] = 1;
            this.pageSizeArr[i] = 10;
            this.currentPage[i] = 1;
          }
          if (this.facilityList.length == result.data.FamilyList.length) {
            this.facilityList = result.data.FamilyList;
            this.createHotBtn({
              index: this.tabAvtive.split("table")[1]
            });
          } else {
            this.facilityList = result.data.FamilyList;
            this.createHotBtn({
              index: 0
            });
          }
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    //点击刷新图片
    refreshImg(index) {
      if (this.PTArr[index].Image.indexOf("time") != "-1") {
        let url = this.PTArr[index].Image.split("time");
        this.PTArr[index].Image = url[0] + "time=" + new Date().getTime();
      } else {
        this.PTArr[index].Image =
          this.PTArr[index].Image + "&time=" + new Date().getTime();
      }
    },
    //第一个输入框失去焦点
    nameNotShow() {
      let that = this;
      let timer = window.setTimeout(function () {
        that.nameShow = false;
        if (!that.nameShow) {
          window.clearTimeout(timer);
        }
      }, 1000);
    },
    //第二个输入框失去焦点
    noNotShow() {
      let that = this;
      let timer = window.setTimeout(function () {
        that.noShow = false;
        if (!that.noShow) {
          window.clearTimeout(timer);
        }
      }, 1000);
    },
    //修改底部图片url
    changeImgUrl(name, index) {
      let data = this.tablePicArr[name][index];
      if (data.key.indexOf("time") != "-1") {
        let url = data.key.split("time");
        data.key = url[0] + "time=" + new Date().getTime();
      } else {
        data.key = data.key + "&time=" + new Date().getTime();
      }
    },
    labelShowBtn() {
      this.labelShow = !this.labelShow;
    },
    //弹窗图片刷新
    changeImage(index) {
      let data = this.pointList.ImageList[index];
      if (data.key.indexOf("time") != "-1") {
        let url = data.key.split("time");
        data.key = url[0] + "time=" + new Date().getTime();
      } else {
        data.key = data.key + "&time=" + new Date().getTime();
      }
    },
    //图片加载失败替换url
    setErrorImg(e) {
      let el = e.path[0];
      el.style.cssText = "width:100%;height100%;display:block;";
    },
    //获取表格头部内容与下拉内容
    getTableHeader() {
      let param = {
        code: this.code,
        ProjId: this.projectId
      };
      if (!!this.code) {
        getTableHeader(param).then(result => {
          if (result.data.Result == "success") {
            this.myHotHeaderArr[this.tabChecked] = result.data.Content;
            this.getTableMain();
          } else {
            this.dialogVisible = true;
            this.ajaxMsg = "请求出错";
          }
        });
      }
    },
    //获取表格主体内容
    async getTableMain() {
      let param = {
        BeginTime: this.checkTimeArr[0],
        BuildId: this.buildId,
        Checked: this.checked,
        EndTime: this.checkTimeArr[1],
        Family: this.code,
        FloorId: this.floorId,
        PageNum: this.currentPage[this.tabChecked],
        PageSize: this.pageSizeArr[this.tabChecked],
        PointId: this.pointCheck,
        ProjId: this.projectId,
        UserId: this.userId
      };
      getdelMain(param).then(res => {
        if (res.data.Result == "success") {
          //   let paramData = res.data.FmList.map(item => {
          //       return {
          //           id: item.FmId,
          //           family: item.Family,
          //           infos: item.Infos
          //       }
          //   })
          //   let data = await this.getIdForVender({
          //       "criterias":paramData
          //   })
          //   let updateData = data.map(item => {
          //       return {
          //           FmId: item.id,
          //           Family: item.family,
          //           Infos: item.infos
          //       }
          //   })
          this.updateBusiness(res.data.FmList)
        } else {
        }
      })
    },
    getTabsData2() {
      let param = {
        BeginTime: this.checkTimeArr[0],
        BuildId: this.buildId,
        Checked: this.checked,
        EndTime: this.checkTimeArr[1],
        Family: this.code,
        FloorId: this.floorId,
        PageNum: this.currentPage[this.tabChecked],
        PageSize: this.pageSizeArr[this.tabChecked],
        PointId: this.pointCheck,
        ProjId: this.projectId,
        UserId: this.userId
      }
      getdelMain(param).then(result => {
        this.buildMsgShow = false;
        if (result.data.Result == "success") {
          let data = result.data.FmList
          if (data && data.length) {
            //如果数据存在，有localname取localname，否则取随机生成name
            data = data.map(item => {
              item.Infos.EquipLocalName = item.Infos.EquipLocalName || item.Infos.EquipName
              return item
            })
          }
          this.myHotMainArr[this.tabChecked] = result.data.FmList;
          this.pageCount[this.tabChecked] = result.data.Count;
          let dom = this.myHotArr[this.tabChecked];
          //存储一个数组防止删除操作找寻不到删除的该数组
          this.tableLoading = false;
          this.deepArr = this.deepCopy(result.data.FmList);
          if (!result.data.Count) {
            // this.loading = false;
            // this.myHotArr[this.tabChecked].loadData(result.data.FmList);
          } else {
            this.$nextTick(() => {
              if (this.myHotArr[this.tabChecked] && this.myHotArr[this.tabChecked] != '') {
                this.myHotArr[this.tabChecked].destroy()
              }
              this.createHot(
                this.tabChecked,
                result.data.FmList,
                this.myHotHeaderArr[this.tabChecked]
              );
            });
          }
          this.loading = false;
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    download() {
      if (!!this.myHotArr[this.tabChecked]) {
        let fileName = ''
        this.buildList.map(item => {
          if (item.id == this.buildId) {
            fileName += item.localName
          }
        })
        this.floorList.map(item => {
          if (item.id == this.floorId) {
            fileName += '-' + item.localName
          }
        })
        this.facilityList.map((item, index) => {
          if (index == this.tabChecked) {
            fileName += '-' + item.Name + item.Total
          }
        })
        this.myHotArr[this.tabChecked].getPlugin('exportFile').downloadFile("csv", {
          filename: fileName,
          columnHeaders: true,
          exportHiddenRows: true,
          exportHiddenColumns: true,
          rowHeaders: true
        })
      } else {
        this.$message("请确定存在表格")
      }
    },
    //删除资产
    delErrAssets() {
      let param = {
        ProjId: this.projectId,
        UserId: this.userId
      };
      let paramList = this.delArr;
      delErrAssets(param, paramList).then(result => {
        if (result.data.Result == "success") {
          this.deldialog = false;
          this.getTabFamily();
          return;
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    delVideo(key) {
      return key
    },
    //修改撕码状态
    changeAeestsCode() {
      let param = {
        ProjId: this.projectId,
        UserId: this.userId
      };
      let paramList = this.delArr;
      paramList.map(item => {
        item.CodeType = 3
        return item
      })
      upDateTableMain(param, paramList).then(result => {
        if (result.data.Result == "success") {
          this.deldialog = false;
          this.getTabFamily();
          return;
        } else {
          // this.dialogVisible = true;
          // this.ajaxMsg = "请求出错";
          this.$message.error("请求出错")
        }
      });
    },
    //关闭点位标签详情
    closeDialog() {
      this.getPT();
    },
    //点击tab创建对应的表格
    createHotBtn(tab) {
      this.loading = true;
      this.tabChecked = tab.index;
      this.rowArr = "";
      this.code = this.facilityList.length ? this.facilityList[tab.index].Code : null;
      this.getTableHeader();
    },
    //创建点位标签swiper
    createPTSwiper() {
      this.$nextTick(() => {
        if (this.$refs['swiperPoint']) {
          this.$refs['swiperPoint'].style.transform = ''
        }
        this.swiper = "";
        this.swiper = new Swiper("#swiper", {
          slidesPerView: 4,
          spaceBetween: 30
        });
      });
    },
    //生成图片查看swiper
    createPicSwiper() {
      let sizeNum;
      if (this.picHeight <= 200) {
        sizeNum = 5;
      } else if (this.picHeight < 400) {
        sizeNum = 4;
      } else if (this.picHeight < 600) {
        sizeNum = 3;
      } else {
        sizeNum = 2;
      }
      this.$nextTick(() => {
        this.swiper2 = new Swiper("#swiperPic", {
          slidesPerView: sizeNum,
          spaceBetween: 30
        });
      });
    },
    //点位标签详情中的enter事件
    savePointChange() {
      this.savePoint();
    },
    //点击点位标签整个swiper事件
    checkPoint(val, id, name) {
      // this.labelShow = false
      name = name || "";
      if (name == "") {
        this.labelChecked = "请选择点位标签！";
      } else if (name == "all") {
        this.labelChecked = "全部";
      } else {
        this.labelChecked = name;
      }
      this.checkPointClass = val;
      if (id) {
        this.pointId = id;
      } else {
        this.pointId = "";
      }
      this.pointCheck = id;
      this.changeChecked(0);
      // let id = document.getElementById('table' + this.tabChecked)
    },
    getTable(pointId, index) {
      this.pointId = pointId;
      // this.loading = true
      this.getPointDetail();
    },
    //表格实例的单击事件
    tableDown(el, rowArr) {
      if (rowArr.row < 0) {
        return
      }
      //else{
      //     let infos = this.myHotMainArr[this.tabChecked][rowArr.row].Infos
      // this.tablePicArr = infos.Pic || []
      // this.tablePicMsg = '该设备照片为空'
      // this.picShow = true
      // this.createPicSwiper()
      // }
      let filter = this.filtersArr[this.tabChecked];
      //被筛选过后的数组
      let trimmedArr = this.trimmedRows();
      //是否启用了排序
      let isSort = this.myHotArr[this.tabChecked]
        .getPlugin("columnSorting")
        .isSorted();
      if (trimmedArr.length && isSort) {
        let sortArr = this.myHotArr[this.tabChecked].getPlugin("columnSorting")
          .rowsMapper.__arrayMap;
        let infos = this.myHotMainArr[this.tabChecked][
          trimmedArr[sortArr[rowArr.row]]
          ];
        this.getInfors(infos, rowArr);
      } else if (isSort) {
        //排序后的数组
        let sortArr = this.myHotArr[this.tabChecked].getPlugin("columnSorting")
          .rowsMapper.__arrayMap;
        let infos = this.myHotMainArr[this.tabChecked][sortArr[rowArr.row]];
        this.getInfors(infos, rowArr);
      } else if (trimmedArr.length) {
        let infos = this.myHotMainArr[this.tabChecked][trimmedArr[rowArr.row]];
        this.getInfors(infos, rowArr);
      } else {
        let infos = this.myHotMainArr[this.tabChecked][rowArr.row];
        this.getInfors(infos, rowArr);
      }
    },
    getInfors(data, rowArr, falg = false) {
      let val = this.myHotArr[this.tabChecked].getActiveEditor().prop;
      this.$refs.recommend.randerData(data, val, this.myHotHeaderArr[this.tabChecked])
      let infos = data.Infos
      if (infos.Pic || infos.Nameplate) {
        if (!!infos.Nameplate) {
          this.tablePicArr.Pic = infos.Nameplate.concat(infos.Pic) || [];
        } else {
          this.tablePicArr.Pic = infos.Pic || [];
        }
      } else {
        this.tablePicArr.Pic = infos.Pic || [];
      }
      if (this.tablePicArr.Pic && this.tablePicArr.Pic.length) {
        this.dragSrc =
          process.env.BASE_URL + ":8890/photo-View.html?type=" +
          // process.env.BASE_URL + "/photo-View.html?type=" +
          // "http://172.16.0.181:8890/photo-View.html?type=" +
          this.tablePicArr.Pic[0].type +
          "&key=" +
          this.tablePicArr.Pic[0].key +
          "&name=" +
          this.tablePicArr.Pic[0].name;
      }
      this.infos = tools.deepClone(data)
      this.tablePicMsg = "该设备照片为空";
      this.picShow = true;
      this.createPicSwiper();
      this.rowArr = rowArr;
    },
    //下层的弹窗不显示
    picNoShow() {
      this.picShow = false;
    },
    //修改楼层
    changeFloor() {
      this.checkPointClass = -1;
      for (let i = 0; i < this.floorList.length; i++) {
        if (this.floorId == this.floorList[i].floorId) {
          this.floorName = this.floorList[i].localName;
        }
      }
      this.getPT();
      this.checkPoint("all", this.pointId);
    },
    //切换时间事件
    checkTime(val) {
      this.checkTimeArr = val;
      this.getPT();
      this.checkPoint("all", this.pointId);
      this.refresh();
    },
    //swiper点击label切换按钮事件
    turn(val) {
      if (val) {
        this.swiper.slideNext();
      } else {
        this.swiper.slidePrev();
      }
    },
    //swiper切换照片按钮事件
    turnPic(val) {
      if (val) {
        this.swiper2.slideNext();
      } else {
        this.swiper2.slidePrev();
      }
    },
    //头部建筑名称切换事件
    changeBuild() {
      this.getFloorData();
    },
    //获取现在的时间
    getNowFormatDate(str) {
      var date = new Date(str);
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes() +
        seperator2 +
        date.getSeconds();
      return currentdate;
    },
    //点击图片查看大图
    seeBig(key, name, type) {
      this.dragSrc =
        process.env.BASE_URL + ":8890/photo-View.html?type=" +
        // process.env.BASE_URL + "/photo-View.html?type=" +
        type +
        "&key=" +
        key +
        "&name=" +
        name;
      this.dragShow = true
    },
    //改变页条数
    handleSizeChange(val) {
      this.tableLoading = true;
      this.pageSizeArr[this.tabChecked] = val;
      this.clearHot();
      this.getTableMain();
    },
    //改变当前页
    handleCurrentChange(val) {
      this.tableLoading = true;
      this.currentPageArr[this.tabChecked] = val;
      this.clearHot();
      this.getTableMain();
    },
    //改变checked,全部未完成修订
    changeChecked(val) {
      this.checked = val;
      this.tabChecked = 0;
      this.tabAvtive = "table0";
      this.clearHot();
      this.getTabFamily();
      // this.createHotBtn({index:0})
    },
    //当表格中的内容被修改
    tdChange(changeData, source) {
      // 修改了的数据
      //过滤条件
      // if(changeData[0][1] == "Family"){
      //   this.buildMsgShow = true
      // }
      let filter = this.filtersArr[this.tabChecked];
      if (changeData) {
        let trimmedArr = this.trimmedRows();
        let param = handsonUtils.getParam(changeData, source, this.myHotArr[this.tabChecked], trimmedArr);
        let data = [];
        //获取第一个点击的数组
        let firstObj = handsonUtils.getUnshiftParam(changeData, source, this.myHotArr[this.tabChecked], trimmedArr);
        for (let i = 0; i < param.length; i++) {
          data.push(param[i]);
        }
        //如果data中包含/且data长度为1,将其转换成.
        if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
          changeData[0][1] = changeData[0][1].split("/").join(".")
        }
        console.log(data)
        //存在data进行修改请求
        if (data && data.length) {
          this.updateBusiness(data, changeData, firstObj);
        }
      }
    },
    //修改请求
    async updateBusiness(data, change, obj) {
      console.log(data, change, obj, "obj")
      //   let param = []
      //生成对应修改数据
      let infoArr = ["Brand", "Specification", "Manufacturer", "Supplier", "Maintainer", "Insurer"]
      let versArr = ["Manufacturer", "Supplier", "Maintainer", "Insurer"]
      let falg = true
      let param = data.map(item => {
        let obj = {}
        obj.id = item.FmId
        obj.Checked = item.Checked
        obj.family = item.Family
        obj.infos = item.Infos
        return obj
      })
      console.log(param, "param")
      let changeParam = await this.getIdForVender({
        "projectId": this.projectId,
        "criterias": param
      })
      console.log(changeParam, "changeParam")
      let lastData = changeParam.map(item => {
        return {
          FmId: item.id,
          Checked: param.find((value) => {
            return value.id === item.id
          }).Checked,
          Family: item.family,
          Infos: item.infos
        }
      })
      upDateTableMain({
        ProjId: this.projectId,
        UserId: this.userId
      }, lastData).then(res => {
        if (falg) {
          this.loadData()
        }
      })
    },
    //判断文案是否相同
    async getIdForVender(param) {
      return await getBasicMatch(param).then(res => {
        if (res.data.result == "success") {
          return res.data.content
        } else {
          this.$message.error("请求错误" + res.data.resultMsg)
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
    getParam(changeData, source) {
      let param = "";
      //被筛选过后的数组
      let trimmedArr = this.trimmedRows();
      //是否启用了排序
      let isSort = this.myHotArr[this.tabChecked]
        .getPlugin("columnSorting")
        .isSorted();
      if (trimmedArr.length && isSort) {
        //排序后的数组
        let sortArr = this.myHotArr[this.tabChecked].getPlugin(
          "columnSorting"
        ).rowsMapper.__arrayMap;
        param = changeData.map(item => {
          return this.myHotArr[this.tabChecked].getSourceDataAtRow(
            trimmedArr[sortArr[item[0]]]
          );
        });
      } else if (isSort) {
        //排序后的数组
        let sortArr = this.myHotArr[this.tabChecked].getPlugin(
          "columnSorting"
        ).rowsMapper.__arrayMap;
        param = changeData.map(item => {
          return this.myHotArr[this.tabChecked].getSourceDataAtRow(
            sortArr[item[0]]
          );
        });
      } else if (trimmedArr.length) {
        param = changeData.map(item => {
          return this.myHotArr[this.tabChecked].getSourceDataAtRow(
            trimmedArr[item[0]]
          );
        });
      } else {
        param = changeData.map(item => {
          return this.myHotArr[this.tabChecked].getSourceDataAtRow(item[0]);
        });
      }
      return param
    },
    //处理右键删除
    romoveFm(index, amout) {
      let delData = tools.differenceArr(this.myHotMainArr[this.tabChecked], this.deepArr)
      this.$confirm('确认删除？')
        .then(_ => {
          let param = {
            ProjId: this.projectId,
            UserId: this.userId
          };
          let paramList = delData.map(item => {
            item.CodeType = 3
            return item
          })
          upDateTableMain(param, paramList).then(result => {
            if (result.data.Result == "success") {
              this.deldialog = false;
              this.getTabFamily();
              return;
            } else {
              this.dialogVisible = true;
              this.ajaxMsg = "请求出错";
            }
          });
        })
        .catch(_ => {
          this.$message("取消删除")
        });
    },
    // 刷新当前表格
    refresh() {
      this.deldialog = false;
      this.loading = true;
      if (this.myHotArr[this.tabChecked]) {
        this.myHotArr[this.tabChecked].destroy();
      }
      this.myHotArr[this.tabChecked] = "";
      this.getTableMain();
    },
    //确定要删除
    delTrue() {
      //删除
      // this.delErrAssets();
      //撕码
      this.changeAeestsCode()
    },
    //撤回操作
    undo() {
      this.myHotArr[this.tabChecked].undo();
    },
    //创建表格实例
    createHot(variableNum, data, headerArr) {
      if (!headerArr) {
        return
      }
      let maxRow = "";
      //当当前页数*当前页个数小于总个数时，当前表格行数为当前页数
      if (
        this.pageCount[this.tabChecked] >=
        this.pageSizeArr[this.tabChecked] * this.currentPage[this.tabChecked]
      ) {
        maxRow = this.pageSizeArr[this.tabChecked];
      } else {
        maxRow =
          this.pageCount[this.tabChecked] % this.pageSizeArr[this.tabChecked];
      }
      let containter = document.getElementById("table" + variableNum);
      let height = 0;
      let winHeight = document.documentElement.clientHeight;
      let headerH = this.$refs["header"].offsetHeight;
      let pointH = this.$refs["point"].offsetHeight;
      let operateH = this.$refs["operate"].offsetHeight;
      let picH = this.$refs["picview"].offsetHeight;
      console.log(winHeight, headerH, operateH, picH)
      height = winHeight - headerH - 48 - operateH - picH - 32 - 32 - 32 - 155;
      let headers = this.delHeader(headerArr)
      let customBorders = data.map((item, index) => {
        //铭牌识别标志
        if (item.Nametemplate == 1) {
          return {
            range: {
              from: {
                row: index,
                col: 0
              },
              to: {
                row: index,
                col: headers.length
              }
            },
            left: {
              width: 2,
              color: "red"
            },
            right: {
              width: 2,
              color: "red"
            },
            top: {
              width: 2,
              color: "red"
            },
            bottom: {
              width: 2,
              color: "red"
            }
          }
        } else {
          return undefined
        }
      }).filter(d => d)
      console.log(customBorders)
      let options = {
        data: data,
        colHeaders: headers,
        manualColumnResize: true,
        manualColumnMove: true,
        maxRows: maxRow,
        height: height,
        columnSorting: true, //添加排序
        sortIndicator: true, //添加排序
        renderAllRows: true,
        autoColumnSize: true,
        fixedColumnsLeft: 5,
        language: "zh-CN",
        contextMenu: this.onlyRead ? false : {
          items: {
            remove_row: {
              name: "删除资产"
            }
          }
        },
        // customBorders: customBorders,
        columns: this.getType(headerArr),
        afterOnCellMouseDown: this.tableDown, //鼠标单击
        afterChange: this.tdChange, //修改后
        afterRemoveRow: this.romoveFm, //右键删除
        dropdownMenu: [
          "filter_by_condition",
          "filter_by_value",
          "filter_action_bar"
        ],
        filters: true,
        afterFilter: this.trimmedRows,
        afterDocumentKeyDown: this.afterDocumentKeyDown
      };
      console.log(options, variableNum)
      this.myHotArr[variableNum] = new Handsontable(containter, options);
      //存在点击tab后分页不正确的问题，使用0转换
      this.tabChecked = 0;
      this.tabChecked = variableNum;
      let pro = document.getElementById("hot-display-license-info");
      pro.parentNode.removeChild(pro);
      // this.loading = false
      // this.$nextTick(
      // document.getElementById('hot-display-license-info').style.display = 'none'
      // )
    },
    afterDocumentKeyDown(e) {
      //   this.$nextTick(() => {
      let activeEditer = this.myHotArr[this.tabChecked].getActiveEditor(), td, row, prop,
        val = e.realTarget.value,
        infoArr = ["Brand", "Specification", "Manufacturer", "Supplier", "Maintainer", "Insurer", "SupplierContactor", "SupplierPhone", "SupplierEmail", "SupplierWeb", "SupplierFax", "MaintainerContactor", "MaintainerPhone", "MaintainerEmail", "MaintainerWeb", "MaintainerFax", "InsurerContactor", "InsurerPhone", "InsurerEmail", "InsurerWeb", "InsurerFax"];
      if (activeEditer) {
        td = activeEditer.TD
        row = activeEditer.row
        prop = activeEditer.prop
      } else {
        return false
      }
      let filter = this.filtersArr[this.tabChecked];
      // console.log(activeEditer, val, document.getElementsByClassName("handsontableInput")[0].value)
      //被筛选过后的数组
      if (e.which == 8) {
        console.log("val", val)
        val = val.substring(0, val.length - 1)
        console.log("val1", val)
      }
      let trimmedArr = this.trimmedRows();
      //是否启用了排序
      let isSort = this.myHotArr[this.tabChecked]
        .getPlugin("columnSorting")
        .isSorted();
      let infos = "";
      //   if (infoArr.indexOf(prop.split('.')[1]) < 0) {
      //     return false
      //   }
      if (trimmedArr.length && isSort) {
        let sortArr = this.myHotArr[this.tabChecked].getPlugin("columnSorting")
          .rowsMapper.__arrayMap;
        infos = this.myHotMainArr[this.tabChecked][
          trimmedArr[sortArr[row]]
          ];
      } else if (isSort) {
        //排序后的数组
        let sortArr = this.myHotArr[this.tabChecked].getPlugin("columnSorting")
          .rowsMapper.__arrayMap;
        infos = this.myHotMainArr[this.tabChecked][sortArr[row]];
      } else if (trimmedArr.length) {
        infos = this.myHotMainArr[this.tabChecked][trimmedArr[row]];
      } else {
        infos = this.myHotMainArr[this.tabChecked][row];
      }
      if (this.$refs.recommend) {
        this.$refs.recommend.randerData(infos, prop, this.myHotHeaderArr[this.tabChecked], true, val)
      }
      //   })
    },
    //获取被筛选掉的行号
    trimmedRows() {
      // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
      var plugin = this.myHotArr[this.tabChecked].getPlugin("trimRows")
        .trimmedRows;
      let dataLength = this.pageSizeArr[this.tabChecked];
      let dataArr = new Array();
      for (let i = 0; i < dataLength; i++) {
        dataArr.push(i);
      }
      if (plugin.length <= 0) {
        dataArr = undefined;
      } else {
        dataArr = this.array_diff(dataArr, plugin);
      }
      this.filtersArr[this.tabChecked] = dataArr;
      return dataArr || [];
      // var DataArray = new Array();
      // for (var i = 0; i < plugin.length; i++) {
      //     // 通过行号获取数据
      //     DataArray.push(this.myHotArr[this.tabChecked].getSourceDataAtRow(plugin[i]));
      // }
    },
    //去除数组中相同的元素
    array_diff(a, b) {
      for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < a.length; j++) {
          if (a[j] == b[i]) {
            a.splice(j, 1);
            j = j - 1;
          }
        }
      }
      return a;
    },
    //清空所有实例
    clearHot() {
      this.myHotArr = this.myHotArr.map(item => {
        if (item) {
          return item.destroy();
        } else {
          return;
        }
      });
    },
    //处理头部header方法
    delHeader(arr) {
      let readArr = ["A1", "A2", "B1", "C5", "D1", "D2", "X", "L", "L1", "L2", "M"]
      let data = showTools.changeHeader(arr, readArr, false, false, true, true, true)
      data.unshift("标记", "点位标签", "设备族");
      console.log(data)
      return data;
    },
    //通过header生成columns
    getType(arr) {
      let data = showTools.changeTypes(arr, false, false, true, true, true)
      data.unshift({
        type: "checkbox",
        checkedTemplate: 1,
        uncheckedTemplate: 0,
        data: "Checked",
        label: {
          position: "after",
          value: "完成修订"
        }
      }, {
        data: "PointName",
        readOnly: true
      }, {
        editor: "chosen",
        data: "Family",
        renderer: tools.customDropdownRenderer,
        chosenOptions: {
          data: this.AllFamily
        }
      });
      data = data.filter(item => item)
      console.log(data)
      return data;
    },
    changeArr(arr) {
      if (arr.length) {
        return arr.map(item => {
          return {
            Code: item.code,
            Name: item.Name
          };
        });
      } else {
        return "";
      }
    },
    //工具函数浅复制深拷贝，防止共用存储空间
    deepCopy(obj) {
      var out = [],
        i = 0,
        len = obj.length;
      for (; i < len; i++) {
        if (obj[i] instanceof Array) {
          out[i] = deepcopy(obj[i]);
        } else out[i] = obj[i];
      }
      return out;
    }
  },
  watch: {
    projectId() {
      //默认时间赋值
      this.checkTimeArr = [
        this.getNowFormatDate(new Date().setHours(0, 0, 0, 0)),
        this.getNowFormatDate(new Date())
      ];

      this.buildId = ""
      this.floorId = ""
      this.buildList = []
      this.floorList = []

      this.tabAvtive = "table0"
      this.labelChecked = "请选择点位标签！"
      // 获取建筑信息
      this.getBuilding();
      //获取所有所有的设备族
      this.getAllFamily();
      this.checked = 0
    }
  }
};
</script>


<style lang="scss" scoped>
.page-content {
  position: relative;
}

@import "../../../components/data_admin/buildData/style.scss";
</style>

<style lang="scss" scoped>
#buildData {
  .el-tabs__header {
    width: 100%;
  }

  .el-dialog {
    width: 900px;
    height: auto;
  }

  .center {
    text-align: center
  }

  .el-radio-button__inner {
    width: 90px;
  }

  .build_label {
    .label_view {
      padding: 0 4rem;
      box-sizing: border-box;
    }
  }

  .build_pic {
    .turn_right {
      right: 0;
    }
  }
}

.content_box {
  max-height: 440px;
  overflow-y: auto;
}
</style>