fire_control/src/view/camera/index.vue

<template>
  <com-head :options="headList" >
    <el-form label-width="97px" inline="true">
      <el-form-item label="所属架构：">
        <com-select v-model="search.state.deptId" />
      </el-form-item>
      <el-form-item label="S/N码：">
        <el-input v-model="search.state.snCode" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="绑定管理员：">
        <el-input v-model="search.state.searchKey" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area: 1 / 4 / 2 / 4;">
        <el-button type="primary" @click="search.submit">查询</el-button>
        <el-button type="primary" plain @click="search.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">
        <!-- <el-input placeholder="关键词" suffix-icon="el-icon-search" class="search-scene" v-model="search.state.searchKey" style="width: auto" /> -->
        <el-button
          type="primary"
          @click="oper.readyInsert"
          v-if="auth.add"
          v-power="'bind'"
          >绑定相机</el-button
        >
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="dataList.selectRow"
    >
      <el-table-column label="序号" width="55" v-slot:default="{ $index }">
        <div style="text-align: center">{{ pag.state.size * (pag.state.currPage - 1) + $index + 1 }}</div>
      </el-table-column>usedSpace totalSpace
      <el-table-column label="S/N码" prop="snCode"></el-table-column>
      <el-table-column label="所属架构" prop="deptName"></el-table-column>
      <el-table-column label="云容量使用情况" v-slot:default="{ row }">
        {{row.usedSpaceStr}} 
        <!-- / {{row.totalSpaceStr}} -->
      </el-table-column>
      <el-table-column label="绑定管理员" prop="nickName"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }" v-if="auth.unbind || auth.update">
        <!-- <span class="oper-span" @click="oper.readyUpdate(row)" v-if="auth.update">编辑</span> -->
        <span class="oper-span" @click="unbindCamrea(row)" v-power="'unbind'" style="color: var(--primaryColor)">
         解绑
        </span>
      </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-dialog
    :title="(oper.state.id ? '编辑' : '绑定') + '相机'"
    v-model:show="oper.state.show"
    enterText="确 定"
    @submit="submit"
    width="500"
  >
    <el-form ref="form" :model="form" label-width="75px" class="camera-from">
      <el-form-item label="SN码：" class="mandatory">
        <el-input :modelValue="oper.state.snCode" placeholder="请输入相机底部SN码，如214D5RE2G8" @update:modelValue="val => oper.state.snCode = val.trim()"></el-input>
      </el-form-item>
      <el-form-item label="管理员：" label-width="75px" class="mandatory">
        <el-select v-model="oper.state.userId" placeholder="请选择">
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.nickName"
            :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </com-dialog>

</template>

<script>
import { reactive, ref, watch,onMounted,toRefs } from "vue";
import getTableState from "@/state/tableRef";
import auth from "@/state/viewAuth";
import comDialog from "@/components/dialog";
import comPagination from "@/components/pagination";
import comSelect from "@/components/company-select";
import comHead from "@/components/head";
import { dateFormat } from '@/util'
import {
  getCameraList,
  insertCamera,
  deleteCamera,
  unbindCamera,
  updateCamera,
  getUserListSelect
} from '@/request/config'
import axios from 'axios';

export default {
  name: 'camera',
  setup() {
    const state = getTableState({
      insertUrl: insertCamera,
      updateUrl: updateCamera,
      getUrl: getCameraList,
      delUrl: deleteCamera,
      searchAttr: { deptId: '', snCode: '',type:'2',searchKey:'' },
      operAttr: { snCode: '', cameraSn: '',userId:'',searchKey:'' },
      delMsg: '解绑相机，该相机拍摄的场景也将一并解绑（场景在云端存储，不会删除）确定要解绑吗？'
    });
    const headList = ref([{ name: "相机管理", value: 2 }]);
    const userList = reactive({
      list:[]
    })
    const time = ref(null)
    const getuserlist = async () =>{
      let res = await axios.get(getUserListSelect, {})
      userList.list = res.data || []
    }
    watch(state.oper.value.state, () => {
      state.oper.value.state.cameraSn = state.oper.value.state.snCode
    })

    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
        }
      }
    )
    onMounted(async ()=>{
        getuserlist()
    })
    return { ...state,...toRefs(userList), headList, time, auth,getuserlist, };
  },
  methods: {
    async unbindCamrea(data) {
      if (await this.$confirm('解绑相机，该相机拍摄的场景也将一并解绑（场景在云端存储，不会删除）确定要解绑吗？', '提示')) {
        await axios.post(unbindCamera, {cameraSn: data.snCode})
        this.dataList.refer()
        
      }
    },
    submit() {
      if (!this.oper.state.snCode.trim()) {
        return this.$message.error('S/N码不能为空！', '提示')
      }
      if (!this.oper.state.userId) {
        return this.$message.error('请选择管理员', '提示')
      }

      this.oper.state.id ? this.oper.update() : this.oper.insert()
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-head": comHead,
    "com-pagination": comPagination,
    "com-select": comSelect
  },
};


</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 {
//   width: 420px;
//   margin: 0 auto;
// }
</style>