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

<template>
  <div class="photoGraphicDevice">
    <div class="photoBox">
      <div class="photoGraphicBtnGroup">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
          >新增</el-button
        >
      </div>
      <div class="photoGraphicTable">
        <el-table
          ref="multipleTable"
          :data="terminalTableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          v-loading="loading"
        >
          <el-table-column
            prop="displayName"
            label="显示名"
            show-overflow-tooltip
            width="160px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.hadisplayNamesPan == ''">{{
                scope.row.hadisplayNamesPan
              }}</span>
              <span v-else>{{ scope.row.cmdid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="图像监测装置ID"
            show-overflow-tooltip
            width="160px"
          >
          </el-table-column>
          <el-table-column prop="lineid" label="线路编号"> </el-table-column>
          <el-table-column prop="towerid" 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="updateTime"
            label="修改时间"
            :show-overflow-tooltip="true"
            :formatter="dateFormat"
            width="160px"
          >
          </el-table-column>
          <el-table-column prop="equipName" label="装置名称"> </el-table-column>
          <el-table-column prop="model" label="装置型号"> </el-table-column>
          <el-table-column label="经维度">
            <template slot-scope="scope" v-if="scope.row.longitude">
              <span>({{ scope.row.longitude }},</span>
              <span>{{ scope.row.latitude }})</span>
            </template>
          </el-table-column>

          <el-table-column prop="orgId" label="原始ID"> </el-table-column>
          <el-table-column
            prop="essentialInfoVersion"
            label="装置基本信息版本号"
            width="140px"
          >
          </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="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
            :formatter="dateFormat"
          >
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleRevisePhoto(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout=" prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </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: {}, //弹窗传值
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
    };
  },
  methods: {
    ////获取拍照装置列表数据
    terminalList(page, pageSize) {
      this.loading = true;
      getTerminalJoggle({
        pageindex: page,
        pagesize: pageSize,
      })
        .then((res) => {
          console.log(res);
          this.terminalTableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击行选中当前行
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取选中的行
    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(data) {
      this.photoDialog = true;
      this.photoDialogTitle = "修改";
      this.formphotoInfo = Object.assign({}, data);
    },
    //新建弹窗取消按钮 关闭弹窗
    photoDialogClose(flag) {
      if (flag) {
        //更新列表
        this.terminalList(this.page, this.pageSize);
      }
      this.photoDialog = false;
      this.formphotoInfo = {};
    },
    //删除数据
    handleDelete(data) {
      console.log(data);
      this.deleteArr.push({
        termid: data.id,
      });
      console.log(this.deleteArr);
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 行设置向后台请求删除数据
          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
            console.log(res);
            this.terminalList(this.page, this.pageSize); //刷新
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.terminalList(val, this.pageSize); //刷新
      //this.getTableList();
    },
  },
  created() {
    this.terminalList(this.page, this.pageSize);
  },
};
</script>
<style lang="less">
.photoGraphicDevice {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: @color-white;
  .photoBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
  }
  .photoGraphicBtnGroup {
    display: flex;
    justify-content: flex-end;
  }

  .photoGraphicTable {
    margin-top: 16px;
    height: calc(100% - 48px);
  }
}
</style>