frontend/src/views/management/monitoringEquipment/photographicDevice/index.vue

<template>
  <div class="photoGraphicDevice">
    <div class="photoGraphicBtnGroup">
      <el-button type="primary" @click="handleAddPhoto()">新增</el-button>
      <el-button type="primary" @click="handleRevisePhoto()">修改</el-button>
      <el-button type="primary" @click="handleDelete()">删除</el-button>
    </div>
    <!-- <div class="searchForm">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="单位:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="DY等级:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="XL名称:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="GT名称:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质保到期日:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="装置类型:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网络类型:">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="是否已使用">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码:">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="photoGraphicTable">
      <el-table
        ref="multipleTable"
        :data="terminalTableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 40px)"
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="index" width="55"> </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="出厂编号">
          <template slot-scope="scope">{{ scope.row.bsIdentifier }}</template>
        </el-table-column>
        <el-table-column prop="bsManufacturer" label="生产厂家">
        </el-table-column>
        <el-table-column
          prop="bsProductionDate"
          label="生产日期"
          :show-overflow-tooltip="true"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column
          prop="cmdid"
          label="图像监测装置ID"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :show-overflow-tooltip="true"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column prop="displayName" label="显示名"> </el-table-column>
        <el-table-column prop="equipName" label="装置名称"> </el-table-column>
        <el-table-column prop="essentialInfoVersion" label="装置基本信息版本号">
        </el-table-column>
        <el-table-column prop="hasPan" label="是否带云台">
          <template slot-scope="scope">
            <span v-if="scope.row.hasPan == 0">否</span>
            <span v-if="scope.row.hasPan == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="latitude" label="维度"> </el-table-column>
        <el-table-column prop="lineid" label="线路编号"> </el-table-column>
        <el-table-column prop="longitude" label="经度"> </el-table-column>
        <el-table-column prop="model" label="装置型号"> </el-table-column>
        <el-table-column prop="orgId" label="原始ID"> </el-table-column>
        <el-table-column prop="towerid" label="杆塔编号"> </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          :show-overflow-tooltip="true"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"
              >修改</el-button
            >
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addPhotoDialog
      :photoDialog="photoDialog"
      :photoDialogTitle="photoDialogTitle"
      @photoDialogClose="photoDialogClose"
      :formItem="formphotoInfo"
    ></addPhotoDialog>
  </div>
</template>
<script>
import { getTerminalJoggle, deleteTerminalJoggle } from "@/utils/api/index";
import moment from "moment";
import addPhotoDialog from "./components/addPhotoDialog.vue";
export default {
  components: {
    addPhotoDialog,
  },
  data() {
    return {
      terminalTableData: [], //表格数据
      photoDialog: false, //新增弹窗
      photoDialogTitle: "", //弹窗标题
      deleteArr: [], //删除数组
      multipleSelection: [], //当前选中数组
      formphotoInfo: {}, //弹窗传值
    };
  },
  methods: {
    ////获取拍照装置列表数据
    terminalList() {
      getTerminalJoggle()
        .then((res) => {
          console.log(res);
          this.terminalTableData = res.data.list;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击行选中当前行
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
      // console.log(column, row, event);
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //时间转化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    //新建弹窗handleAddPhoto
    handleAddPhoto() {
      this.photoDialog = true;
      this.photoDialogTitle = "新增";
    },
    //修改弹窗handleRevisePhoto
    handleRevisePhoto() {
      if (this.multipleSelection.length !== 1) {
        this.$message({
          showClose: true,
          message: "请选择要操作的记录最多只能选择一条！",
          type: "warning",
        });
      } else {
        this.photoDialog = true;
        this.photoDialogTitle = "修改";
        console.log(this.multipleSelection);
        this.formphotoInfo = Object.assign({}, this.multipleSelection[0]);
      }
    },
    //新建弹窗取消按钮 关闭弹窗
    photoDialogClose(flag) {
      if (flag) {
        //更新列表
        this.terminalList();
      }
      this.photoDialog = false;
    },
    //删除数据
    handleDelete() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择要操作的记录！",
          type: "warning",
        });
      } else {
        console.log(this.multipleSelection);
        for (let i in this.multipleSelection) {
          console.log(i);
          this.deleteArr.push({
            id: this.multipleSelection[i].id,
          });
        }
        console.log(this.deleteArr);
        this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 行设置向后台请求删除数据
            deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
              console.log(res);
              this.terminalList(); //刷新
            });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
  created() {
    this.terminalList();
  },
};
</script>
<style lang="less">
.photoGraphicDevice {
  width: 100%;
  height: 100%;
  background: @color-white;
  .photoGraphicBtnGroup {
    padding: 16px 8px;
  }
  .searchForm {
    padding: 0px 8px;
    .el-form {
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
  .photoGraphicTable {
    padding: 16px 8px 0 8px;
    height: calc(100% - 80px);
  }
}
</style>