fire_control/src/view/dispatch/index.vue

<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="84px" inline="true" >
      <el-form-item label="项目编号：">
        <el-input v-model="search.state.projectSn" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="起火对象：">
        <el-input v-model="search.state.projectName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="起火地址：">
        <el-input v-model="search.state.projectAdrress" placeholder="请输入起火地址"></el-input>
      </el-form-item>
      <el-form-item label="起火场所：">
        <el-cascader
          style="width: 100%"
          v-model="sprojectSite"
          placeholder="起火场所"
          :options="[{label: '全部', value: ''}].concat(place)"
          :props="{ expandTrigger: 'hover', checkStrictly: true }"></el-cascader>
      </el-form-item>
      <el-form-item label="承办单位：">
        <com-company v-model="search.state.deptId" />
      </el-form-item>
      <el-form-item label="事故日期：">
        <el-date-picker type="date" v-model="queryAccidentDate" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="火灾原因：">
        <el-cascader
          style="width: 100%"
          v-model="sfireReason"
          placeholder="火灾原因："
          :options="[{label: '全部', value: ''}].concat(reason)"
          :props="{ expandTrigger: 'hover', checkStrictly: true }"></el-cascader>
      </el-form-item>
      <el-form-item label="项目状态：">
        <el-select placeholder="请选择" v-model="search.state.status" showAll>
          <el-option value="" label="全部"></el-option>
          <el-option value="1" label="已认定"></el-option>
          <el-option value="0" label="未认定"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="searh-btns" style="grid-area:1/4/4/5">
        <el-button type="primary" @click="search.submit">查询</el-button>
        <el-button type="primary" plain @click="search.reset">重置</el-button>
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button type="primary" @click="search.submit">查询</el-button>
        <el-button type="primary" plain @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>
  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden;">项目列表</h3>
      <div class="table-ctrl-right">
        <template v-if="isTeaching">
          <el-button type="primary" @click="revokeTeaching()" :disabled="getRoke('cancel') && !dataList.selectRows.length" v-power="'cancel'">撤销教学</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="insertProject" :disabled="getRoke('add')"  v-power="'add'">新增火调项目</el-button>
          <!-- :disabled="!dataList.selectRows.length" -->
          <el-button type="primary" @click="setTeaching" :disabled="getRoke('teach')"  v-power="'teach'" >设为教学项目</el-button>
        </template>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      id="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      class="table"
      @selection-change="dataList.changeSelectRows"
    >
      <el-table-column type="selection" width="50" :selectable="checkSelectable"></el-table-column>
      <el-table-column label="序号" width="50" v-slot:default="{ $index }">
        <div style="text-align: center">{{ pag.state.size * (pag.state.currPage - 1) + $index + 1 }}</div>
      </el-table-column>
      <el-table-column label="项目编号" prop="projectSn"></el-table-column>
      <el-table-column label="起火对象" prop="projectName" v-slot:default="{ row }" >
        <el-tooltip class="item" effect="dark" :content="row.projectName" placement="bottom-start" v-if="row.projectName && row.projectName.length > 15">
          <p class="tip oper-user">{{row.projectName}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{row.projectName}}</p>
      </el-table-column>
      <el-table-column label="起火地址" prop="projectAddress" v-slot:default="{ row }" >
        <el-tooltip class="item" effect="dark" :content="row.projectAddress" placement="bottom-start" v-if="row.projectAddress && row.projectAddress.length > 15">
          <p class="tip oper-user">{{row.projectAddress}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{row.projectAddress}}</p></el-table-column>
      <el-table-column label="起火场所" prop="projectSite" v-slot:default="{ row }" >
        <el-tooltip class="item" effect="dark" :content="row.projectSite" placement="bottom-start" v-if="row.projectSite && row.projectSite.length > 10">
          <p class="tip oper-user">{{row.projectSite}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{row.projectSite}}</p></el-table-column>
      <el-table-column label="承办单位" prop="organizerDeptName"></el-table-column>
      <el-table-column label="事故日期" prop="accidentDate"></el-table-column>
      <el-table-column label="火灾原因" prop="fireReason" v-slot:default="{ row }" >
        <el-tooltip class="item" effect="dark" :content="row.fireReason" placement="bottom-start" v-if="row.fireReason && row.fireReason.length > 15">
          <p class="tip oper-user">{{row.fireReason}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{row.fireReason}}</p></el-table-column>
      <el-table-column label="项目状态" v-slot:default="{ row }" >
        {{row.status === 0 ? '未认定' : '已认定'}}
      </el-table-column>
        <!--详情 v-if="user.info.id == row.creatorId || user.roleKey == 'admin-dept'" 带看 v-if="row.sceneNum && !isTeaching" :class="{disable: (user.info.id == row.creatorId || user.roleKey == 'admin-dept')}"
        撤销 click=" user.roleKey === ADMIN_USER_ID && “  :class="{disable: user.roleKey !== ADMIN_USER_ID}" 分享 :class="{disable: !row.sceneNum}" 
        -->
      <el-table-column label="操作" v-slot:default="{ row }" :width="isTeaching ? 280 : 320">
        <span class="oper-span" @click="queryDetail(row)"  v-power="{...row,roleType:'view'}">详情</span>
        <span class="oper-span" @click="archivesHandle(row)" v-power="{...row,roleType:'doc:look'}" >档案</span>
        <!-- <span class="oper-span" @click="queryScene(row)" v-power="'readFile'" >场景</span> :class="{disable: !row.sceneNum}"-->
        <span class="oper-span" v-power="{...row,roleType:'vrmodel:look'}"  v-if="!isTeaching" @click="takeLook(row)">带看</span>
        <template v-if="isTeaching">
          <span class="oper-span" v-power="{...row,roleType:'message:look'}" @click="leaveMsgHandle(row)">留言</span>
          <span class="oper-span" v-power="{...row,roleType:'cancel'}" @click="revokeTeaching(row)" style="color: var(--primaryColor)">撤销</span>
        </template>
        <!-- -if="user.info.id == row.creatorId || user.roleKey == 'admin-dept'" -->
        <template v-else>
          <span class="oper-span" v-power="{...row,roleType:'share'}" @click="shareHandle(row)">分享</span>
          <span class="oper-span" v-power="{...row,roleType:'edit'}" @click="auth.update && user.info.deptId == row.deptId && editInfo(row)" :class="{disable: !(auth.update && user.info.deptId == row.deptId)}">编辑</span>
          <span class="oper-span" 
            @click="auth.delete && user.info.deptId == row.deptId && dataList.delete(row)" 
            :class="{disable: !(auth.delete && user.info.deptId == row.deptId)}"
            v-power="{...row,roleType:'del'}"
            style="color: var(--primaryColor)">
          删除
          </span>
        </template>

      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>
  
  <com-archives @referList="dataList.refer()" v-model:show="showArchives.show" v-if="showArchives.data && showArchives.show" :deptId="showArchives.deptId" :data="showArchives.data" />
  
  <com-dialog
    title="分享"
    enterText="复制链接及密码"
    v-model:show="share.show"
    @submit="copyShare"
  >
    <el-form ref="form" :model="form" label-width="80px" class="share-from">
      <el-form-item label="链接">
        <el-input :modelValue="share.shareLink" placeholder="请输入项目编号" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input :modelValue="share.data.randCode" @input="val => filterPSW(val)" placeholder="请输入密码" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item>
        <p class="maker">注：链接可发送给有需要的人员，需使用密码访问。有效期<b style="color: #26559B">14</b>天，过期后不可访问。</p>
      </el-form-item>
    </el-form>
  </com-dialog>

  <com-dialog
    :title="(oper.state.id ? '编辑' : '新增') + '火调项目'"
    v-model:show="oper.state.show"
    @submit="submit"
  >
    <el-form ref="form" :model="form" label-width="84px" class="camera-from">
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="项目编号" class="mandatory">
            <el-input v-model="oper.state.projectSn" maxlength="18" placeholder="请输入项目编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起火对象" class="mandatory">
            <el-input v-model="oper.state.projectName" maxlength="50" placeholder="请输入起火对象"></el-input>
          </el-form-item>
        </el-col>
      </div>
      <el-form-item label="起火地址" class="mandatory">
        <el-input v-model="oper.state.projectAddress" maxlength="50" placeholder="请输入起火地址"></el-input>
      </el-form-item>
      <el-form-item label="起火场所" class="mandatory">
        <el-cascader
          style="width: 100%"
          v-model="projectSite"
          placeholder="起火场所"
          :options="place"
          :props="{ expandTrigger: 'hover' }"></el-cascader>
      </el-form-item>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="承办单位" class="mandatory">
            <com-company :modelValue="oper.state.deptId" hideAll :notUpdate="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承办人员" class="mandatory" placeholder="请输入承办人员">
            <el-input v-model="oper.state.organizerUsers" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
      </div>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="事故日期" class="mandatory" placeholder="请选择事故日期">
            <el-date-picker type="date" v-model="oper.state.accidentDate" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="火灾原因" class="mandatory">
          <el-cascader
            style="width: 100%"
            v-model="fireReason"
            placeholder="火灾原因："
            :options="reason"
            :props="{ expandTrigger: 'hover' }"></el-cascader>
          </el-form-item>
        </el-col>
      </div>
      <el-form-item label="火调场景">
        <el-select
          v-model="oper.state.sceneNum"
          filterable
          remote
          placeholder="请输入关键词"
          :remote-method="searchScene"
          clearable
          :loading="searchLoading">
          <el-option
            v-for="item in searchOptions"
            :key="item.sceneNum"
            :label="item.title"
            :value="item.sceneNum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <p class="maker">注：请确保已在“场景管理”制作火调场景</p>
      </el-form-item>
    </el-form>
  </com-dialog>


  <com-dialog
    title="火调项目详情"
    v-model:show="detail.show"
    :hideFloor="true"
    v-if="detail.data"
    @submit="detail.show = false"
  >
    <el-form ref="form" :model="form" label-width="100px" class="dispatch-detial">
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="项目编号">
            <el-tooltip class="item" effect="dark" :content="detail.data.projectSn" placement="bottom-start" v-if="detail.data.projectSn.length > 15">
              <p class="tip oper-user">{{detail.data.projectSn}}</p>
            </el-tooltip>
            <p class="tip" v-else>{{detail.data.projectSn}}</p>
            
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起火对象">
            <el-tooltip class="item" effect="dark" :content="detail.data.projectName" placement="bottom-start" v-if="detail.data.projectName.length > 15">
              <p class="tip oper-user">{{detail.data.projectName}}</p>
            </el-tooltip>
            <p class="tip" v-else>{{detail.data.projectName}}</p>
          </el-form-item>
        </el-col>
      </div>
      <el-form-item label="起火地址">
        <el-tooltip class="item" effect="dark" :content="detail.data.projectAddress" placement="bottom-start" v-if="detail.data.projectAddress.length > 38">
          <p class="tip oper-user">{{detail.data.projectAddress}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{detail.data.projectAddress}}</p>
      </el-form-item>
      <el-form-item label="起火场所">
        <el-tooltip class="item" effect="dark" :content="detail.data.projectSite" placement="bottom-start" v-if="detail.data.projectSite.length > 38">
          <p class="tip oper-user">{{detail.data.projectSite}}</p>
        </el-tooltip>
        <p class="tip" v-else>{{detail.data.projectSite}}</p>
      </el-form-item>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="承办单位">
            <el-tooltip class="item" effect="dark" :content="detail.data.organizerDeptName" placement="bottom-start" v-if="detail.data.organizerDeptName.length > 15">
              <p class="tip oper-user">{{detail.data.organizerDeptName}}</p>
            </el-tooltip>
            <p class="tip" v-else>{{detail.data.organizerDeptName}}</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承办人员">
            <el-tooltip class="item" effect="dark" :content="detail.data.organizerUsers" placement="bottom-start" v-if="detail.data.organizerUsers.length > 15">
              <p class="tip oper-user">{{detail.data.organizerUsers}}</p>
            </el-tooltip>
            <p class="tip" v-else>{{detail.data.organizerUsers}}</p>
          </el-form-item>
        </el-col>
      </div>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="事故日期">
            <p class="tip">{{detail.data.accidentDate}}</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="火灾原因">
            <el-tooltip class="item" effect="dark" :content="detail.data.fireReason" placement="bottom-start" v-if="detail.data.fireReason.length > 15">
              <p class="tip oper-user">{{detail.data.fireReason}}</p>
            </el-tooltip>
            <p class="tip" v-else>{{detail.data.fireReason}}</p>
          </el-form-item>
        </el-col>
      </div>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="项目状态">
            {{detail.data.status === 0 ? '未认定' : '已认定'}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否教学项目">
            {{detail.data.isTeached ? '是' : '否'}}
          </el-form-item>
        </el-col>
      </div>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="创建人">
            {{detail.data.creatorName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            {{detail.data.createTime}}
          </el-form-item>
        </el-col>
      </div>
      <div class="el-form-item">
        <el-col :span="12">
          <el-form-item label="编辑人">
            {{detail.data.editorName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最新编辑时间">
            {{detail.data.editTime}}
          </el-form-item>
        </el-col>
      </div>
      <el-form-item label="火调场景" v-power="'vrmodel:look'">
        <a :href="detail.data.vrLink" target="_blank">{{detail.data.sceneName}}</a>
      </el-form-item>
    </el-form>
  </com-dialog>
  
  <com-leave-msg v-if="showLeaveMsg.data && showLeaveMsg.show" v-model:show="showLeaveMsg.show" :data="showLeaveMsg.data" />
  
</template>

<script>
import { computed, reactive, ref, watch } from "vue";
import getTableState from "@/state/tableRef";
import user from "@/state/user";
import auth from "@/state/viewAuth";
import comDialog from "@/components/dialog";
import comPagination from "@/components/pagination";
import comLeaveMsg from "./leaveMsg";
import comCompany from "@/components/company-select";
import comHead from "@/components/head";
import comArchives from "./archives";
import { copyText, dateFormat,getRoke } from '@/util'
import {
  getFireList,
  insertFire,
  updateFire,
  setTeach,
  fireSetPsw,
  setUnTeach,
  fireDetail,
  getSceneByTitle,
  getFirePsw
} from '@/request/config'
import {PLACE, REASON, ADMIN_USER_ID, getPlaceCode} from '@/constant'
import {EPSW} from '@/constant/REG'

import axios from 'axios';
import { getApp } from '../../app';

export default {
  name: 'camera',
  setup() {
    const state = getTableState({
      updateUrl: updateFire,
      insertUrl: insertFire,
      getUrl: getFireList,
      searchAttr: { 
        projectSn: '', projectName: '',
        __projectSite: '', projectAdrress: '',
        deptId: '', accidentDate: null,
        status: '', projectSiteCode: '',
        fireReason: '', sceneNum: '', organizerUsers: '',
        isTeached: '', queryType: ''
      },
      operAttr: {
        projectSn: '', projectName: '',
        projectSite: '', projectAddress: '',
        deptId: '', accidentDate: '',
        projectSiteCode: '',
        fireReason: '', sceneNum: '', organizerUsers: ''
      },
      delMsg: '删除火调项目，相关档案也会一并删除，确定要删除吗？'
    });
    const types = ref([{ name: "我的相机", value: 2 }])
    const time = ref(null)
    const checkSelectable = (row) => {
      console.log('row',row)
      // this.checkSelectable
    }
    const showArchives = ref({show: false, data: 0})
    const showLeaveMsg = ref({show: false, data: 0})
    const share = ref({show: false, data: {randCode: ''} })
    const detail = reactive({show: false, data: null})
    const queryAccidentDate = ref(null)


    watch(queryAccidentDate, () => {
      if (queryAccidentDate.value) {
        state.search.value.state.accidentDate = dateFormat(new Date(queryAccidentDate.value), 'yyyy-MM-dd')
      } else {
        state.search.value.state.accidentDate = null
      }
    })

    watch(state.search.value, () => {
      if (!state.search.value.state.accidentDate) {
        queryAccidentDate.value = null
      }
      if (state.search.value.state.__projectSite) {
        state.search.value.state.projectSiteCode = getPlaceCode(state.search.value.state.__projectSite)
      } else {
        state.search.value.state.projectSiteCode = '0'
      }
    })

    const fireReason = computed({
      get() {
        return state.oper.value.state.fireReason.split('>')
      },
      set(val) {
        state.oper.value.state.fireReason = val.join('>')
      }
    })
    const projectSite = computed({
      get() {
        return state.oper.value.state.projectSite.split('>')
      },
      set(val) {
        state.oper.value.state.projectSite = val.join('>')
      }
    })
    const sfireReason = computed({
      get() {
        return state.search.value.state.fireReason.split('>')
      },
      set(val) {
        state.search.value.state.fireReason = val.join('>')
      }
    })
    const sprojectSite = computed({
      get() {
        return state.search.value.state.__projectSite.split('>')
      },
      set(val) {
        state.search.value.state.__projectSite = val.join('>')
      }
    })


    watch(time, () => {
      if (time.value) {
        state.search.value.state.startTime = dateFormat(new Date(time.value[0]), 'yyyy-MM-dd hh:mm:ss')
        state.search.value.state.endTime = dateFormat(new Date(time.value[1]), 'yyyy-MM-dd 23:59:59')
      } else {
        state.search.value.state.startTime = state.search.value.state.endTime = ''
      }
    })
    watch(
      [() => state.search.value.state.startTime, () => state.search.value.state.endTime],
      () => {
        if (!state.search.value.state.startTime || !state.search.value.state.endTime) {
          time.value = null
        }
      }
    )
    watch(state.oper.value, () => {
      if (new Date(state.oper.value.state.accidentDate).getTime() > Date.now()) {
        state.oper.value.state.accidentDate = null
        return getApp().$message.error('事故日期不正确，必须在当日之前！')
      }
    })

    

    return { 
      ...state, time, auth, types,  user,getRoke,
      showArchives, showLeaveMsg, sfireReason, 
      sprojectSite, share, fireReason, ADMIN_USER_ID,
      projectSite, place: PLACE, reason: REASON, queryAccidentDate,
      detail, __init: {...state.search.value.state},
      checkSelectable
    };
  },
  data() {
    return {
      searchLoading: false, 
      searchOptions: []
    }
  },
  methods: {
    filterPSW(val) {
      if (val.length > 4) {
        return;
      } else if(EPSW.REG.test(val.substr(val.length - 1))) {
        this.share.data.randCode = val
      } else {
        this.$message.error(EPSW.tip, '提示')
      }
      
    },
    takeLook(row) {
      if(!row.sceneNum){
        return this.$message.error('暂未生成场景', '提示')
      }
        let routeData = this.$router.resolve({name: 'sceneInitiator', query: {sceneNum:row.sceneNum,id: row.id}})
        window.open(routeData.href, '_blank');
    },
    editInfo(row) {
      this.searchScene('')
      this.oper.readyUpdate(row)
      if (row.sceneNum) {
        this.searchOptions = [
          {
            sceneNum: row.sceneNum,
            title: row.sceneName,

            vrLink: row.vrLink
          }
        ]
      }
    },
    insertProject() {
      this.oper.readyInsert()
      this.oper.state.deptId = user.value.info.deptId
      // 
      this.searchScene('')
    },
    async searchScene(query) {
      this.searchLoading = true
      try {
        let res = await axios.get(getSceneByTitle, {
          params: {
            sceneTitle: query, 
            pageNum: 1,
            pageSize: 20
          }
        })

        this.searchOptions =  res.data.records || res.data.list 
      } catch (e) {
        console.error(e)
      } finally {
        this.searchLoading = false
      }
    },
    archivesHandle(row) {
      this.showArchives.data = row.id
      this.showArchives.deptId = row.deptId
      this.showArchives.show = true
    },
    submit() {
      if (!this.oper.state.projectAddress || !this.oper.state.projectAddress.trim()) {
        return this.$message.error('起火地址不能为空！', '提示')
      } else if (!this.oper.state.projectSn || !this.oper.state.projectSn.trim()) {
        return this.$message.error('项目编号不能为空！', '提示')
      } else if (!this.oper.state.projectName || !this.oper.state.projectName.trim()) {
        return this.$message.error('起火对象不能为空！', '提示')
      } else if (!this.oper.state.projectSite || !this.oper.state.projectSite.trim()) {
        return this.$message.error('起火场所不能为空！', '提示')
      } else if (!this.oper.state.deptId || !this.oper.state.deptId.trim()) {
        return this.$message.error('承办单位不能为空！', '提示')
      } else if (!this.oper.state.organizerUsers || !this.oper.state.organizerUsers.trim()) {
        return this.$message.error('承办人员不能为空！', '提示')
      } else if (!this.oper.state.accidentDate) {
        return this.$message.error('事故日期不能为空！', '提示')
      } else if (!this.oper.state.fireReason || !this.oper.state.fireReason.trim()) {
        return this.$message.error('火灾原因不能为空！', '提示')
      }

      if (typeof this.oper.state.accidentDate === 'object') {
        this.oper.state.accidentDate = dateFormat(this.oper.state.accidentDate, 'yyyy-MM-dd')
      }

      this.oper.state.projectSiteCode = getPlaceCode(this.oper.state.projectSite)

      let add = {...this.oper.state}
      if (this.oper.state.sceneNum) {
        let item = this.searchOptions.find(({sceneNum}) => sceneNum === this.oper.state.sceneNum)
        if (item) {
          add.sceneNum = item.sceneNum
          add.vrLink = item.vrLink
        }
      }

      this.oper.state.id ? this.oper.update(add) : this.oper.insert(add)
    },
    leaveMsgHandle(row) {
      this.showLeaveMsg.data = row.id
      this.showLeaveMsg.show = true
    },
    async queryDetail(data) {
      let res = await axios.get(fireDetail, {params: {projectId: data.id}})
      this.detail.data = res.data
      this.detail.show = true
    },
    async setTeaching() {
      let items = this.dataList.selectRows || []
      if (!items.length) {
        return this.$message.error("请先选择操作项", "提示");
      }
      if (!(await this.$confirm('将火调场景设为教学项目后，所有用户均可查看。设置后可在教学平台取消设置。', '设为教学项目'))) {
        return
      }
      await axios.post(setTeach, {ids: items.map(({id}) => id).join(',')})
      this.dataList.refer()
      this.$message({
        type: 'success',
        message: '已成功设置' +items.length +'个火调项目到教学平台，已设置的项目不重复设置。',
      })
    },
    async revokeTeaching(data) {
      if (!(await this.$confirm('撤销教学，火调项目将不再显示在教学平台。（火调项目不会删除）', '撤销教学'))) {
        return
      }
      let items = data ? [data] : this.dataList.selectRows

      console.log(this.dataList.selectRows)
      await axios.post(setUnTeach, {ids: items.map(({id}) => id).join(',')})
      this.dataList.refer()
      this.$message({
        type: 'success',
        message: items.map(({projectSn}) => projectSn).join(',')+ '已成功从教学项目撤销',
      })
    },
    // takeLook(item){
    //   window.open(process.env.VUE_APP_DOMAIN + '/fire-rtc-live.html?m=' + item.sceneNum+'&p_id=' + item.id)
    // },
    queryScene(item) {
      if (!item.sceneNum) {
        return this.$message.error('当前火调项目暂未录入场景链接', '提示')
      } else {
      // window.open(process.env.VUE_APP_DOMAIN + '/spc.html?m=' + item.sceneNum)
        this.$router.push({name: 'scene', params: {projectId: item.id}})
      }
    },
    async copyShare() {
      if (!this.share.data.randCode || this.share.data.randCode.length !== 4) {
        return this.$message.error('请输入四位数的密码！', '提示')
      }
      if (this.randCode !== this.share.data.randCode) {
        await axios.post(fireSetPsw, {projectId: this.share.data.id, randCode: this.share.data.randCode})
      }
      copyText(`链接:${this.share.shareLink} 密码:${this.share.data.randCode}`)
      this.$message('链接复制成功');
      this.share.show = false
    },
    async shareHandle(item) {
      if(!item.sceneNum){
        return this.$message.error('暂未生成场景', '提示')
      }
      let res = await axios.get(getFirePsw, {params: {projectId: item.id}})
      
      this.share.show = true
      this.share.data = item
      this.share.data.randCode = res.data.randCode
      this.randCode = res.data.randCode
      this.share.shareLink = location.origin + location.pathname + '#scene/' + item.id
    },
    reset() {
      let queryType = this.search.state.queryType
      let isTeached = this.search.state.isTeached
      this.search.reset()
      this.search.state.queryType = queryType
      this.search.state.isTeached = isTeached
    }
  },
  computed: {
    isTeaching() {
      return this.$route.name === 'teaching'
    },
    headList() {
      return this.isTeaching ? [{ name: "教学平台", value: 2 }] : [{ name: "火调管理", value: 2 }]
    }
  },
  mounted() {
    document.querySelector('#multipleTable .el-table__body-wrapper')
      .addEventListener('scroll', () => {
        Array.from(document.querySelectorAll('.table .tip'))
          .forEach(dom => {
            let $tip = document.querySelector('#' + dom.getAttribute('ariadescribedby'))

            if ($tip) {
              $tip.style.display = 'none'
            }
          })
      })
  },
  watch: {
    isTeaching: {
      immediate: true,
      handler(newV, oldV) {
        console.log('---', this.isTeaching, newV)
        let newKey = newV ? '__teaching': '__project'
        let oldKey = oldV ? '__teaching': '__project'

        this[oldKey] = { ...this.search.state }
        let oldData = this[newKey] || this.__init
        for (let [key, val] of Object.entries(oldData)) {
          this.search.state[key] = val
        }
        this.search.state.queryType = this.isTeaching ? 2 : 1
        this.search.state.isTeached = this.isTeaching ? 1 : ''
      }
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-company": comCompany,
    "com-head": comHead,
    "com-leave-msg": comLeaveMsg,
    "com-pagination": comPagination,
    "com-archives": comArchives
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.camera-from {
  margin: 0 50px;
}
.share-from {
  width: 500px;
  margin: 0 auto;
}
.maker {
  font-weight: 400;
  color: #969799;
  line-height: 20px;
}
.oper-user {
  height: 40px;
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //溢出用省略号显示
  white-space:nowrap; //溢出不换行
  cursor: pointer;
  line-height: 25px;
}
</style>

<style>
.camera-from  .el-select,
.dispatch-file-from .el-select {
  width: 100%;
}

.dispatch-detial .el-form-item__content {
  color: #323233;
}
.dispatch-detial .el-form-item__label {
  color: #646566;
}

.table .tip {
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 50px; */
  padding: 5px 0;
  white-space: initial
}
</style>