添加锦汇企业编码. 修复点位列表平铺的bug

zhangzengfei

2023-08-30 b2d0ac2db80c08783fd848933230618cc30d76a2

 src/views/dataPush/components/point.vue

@@ -1,28 +1,62 @@
<template>
  <div class="sub-account" v-if="!isShowAdd">
    <div class="search">
      <div class="left">
        <div class="id">
          点位名称/企业编码/场景
          <el-input v-model="inputText" placeholder="请输入" clearable></el-input>
        </div>
      </div>

      <div class="right">
        <div class="button searchBtn" @click="checkCamerasList(1)">搜索</div>
      </div>
    </div>
    <div class="btns">
      <div class="button add" @click="addPoint">
        <span class="iconfont">&#xe614;</span>
        <span>添加点位</span>
      </div>
    </div>

    <div class="switchBox">
      <span style="margin-right:10px">开启上报</span>
      <el-switch v-model="value1" active-color="#0065ff" @change="changeAll($event)"> </el-switch>
    </div>
    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        v-loading="tbLoading"
        id="pointTable"
        ref="pointTable"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        :default-sort="{ prop: 'companyCode', order: 'ascending' }"
      >
        <el-table-column prop="cameraName" label="点位名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelCode" label="报警通道编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="companyCode" label="企业编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="scenes" label="推送场景" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updatedAt" label="推动时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cameraName" label="点位名称" width="130px" show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="channelCode"
          label="报警通道编码"
          min-width="250px"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="companyCode" label="企业编码" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.companyCode | fillCompanyCode(companyCodeOptions) }}
          </template>
        </el-table-column>
        <el-table-column prop="scenes" label="推送场景" min-width="100px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updatedAt" label="推送时间" width="100px" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.startTime }}-{{ scope.row.endTime }}</template>
        </el-table-column>
        <el-table-column prop="Enable" label="开关" width="60px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" active-color="#0065ff">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <span class="iconfont option" @click="editCameras(scope.row)">编辑</span>
            <span class="iconfont option" style="color:red" @click="delCameras(scope.row)">删除</span>
          </template>
        </el-table-column>
@@ -48,12 +82,11 @@
      :rules="rules"
      :label-position="'left'"
      ref="ruleForm"
      label-width="100px"
      label-width="120px"
      class="add-ruleForm"
    >
      <el-form-item label="点位名称" prop="CameraName">
        <!-- <el-input v-model="ruleForm.CameraName" placeholder="请输入点位名称" style="width: 350px"></el-input> -->
        <el-select style="width: 350px" v-model="ruleForm.CameraName" placeholder="请选择">
        <el-select filterable style="width: 350px" v-model="ruleForm.CameraName" placeholder="请选择">
          <el-option v-for="item in cameraOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
        </el-select>
      </el-form-item>
@@ -61,7 +94,10 @@
        <el-input v-model="ruleForm.ChannelCode" placeholder="请输入报警通道编码" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="企业编码" prop="CompanyCode">
        <el-input v-model="ruleForm.CompanyCode" placeholder="请输入企业编码" style="width: 350px"></el-input>
        <el-select style="width: 350px" v-model="ruleForm.CompanyCode" placeholder="请选择">
          <el-option v-for="item in companyCodeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推送场景" prop="Sceneslist">
        <el-select multiple style="width: 350px" v-model="ruleForm.Sceneslist" filterable placeholder="请选择">
@@ -69,7 +105,7 @@
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推动时间">
      <el-form-item label="推送时间" required>
        <el-col :span="12" style="width: 175px">
          <el-form-item prop="StartTime">
            <el-time-select
@@ -79,7 +115,8 @@
              :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '23:30'
                end: ruleForm.EndTime ? ruleForm.EndTime : '24:00',
                maxTime: ruleForm.EndTime
              }"
            >
            </el-time-select>
@@ -92,9 +129,10 @@
              placeholder="结束时间"
              v-model="ruleForm.EndTime"
              :picker-options="{
                start: '00:00',
                start: ruleForm.StartTime ? ruleForm.StartTime : '00:00',
                step: '00:30',
                end: '23:30'
                end: '24:00',
                minTime: ruleForm.StartTime
              }"
            >
            </el-time-select>
@@ -103,7 +141,7 @@
      </el-form-item>
    </el-form>
    <div class="right">
      <div class="button searchBtn" @click="saveUser">保存</div>
      <div class="button searchBtn" @click="save">保存</div>
      <div class="button resetBtn" @click="resetUser">重置</div>
      <div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
    </div>
@@ -113,62 +151,27 @@
<script>
import { getLocalCameraTree } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"
import { camerasList, camerasCreate, camerasDelete } from "@/api/report"
import { camerasList, camerasCreate, camerasConfig, camerasSwitch, camerasUpdate, camerasDelete } from "@/api/report"
import { traverse } from "./point/point"
import "./point/point.scss"

export default {
  filters: {
    fillCompanyCode(key, opts) {
      let obj = opts.find((t) => t.value == key)
      return obj ? obj.label : key
    }
  },
  data() {
    return {
      tbLoading: false,
      activeColor: "",
      inactiveColor: "#f0f3f5",
      value1: false,
      query: {},
      inputText: "", //输入框内容
      cameraOptions: [],
      scene_nameOptions: [
        {
          value: "明火",
          label: "明火"
        },
        {
          value: "烟雾",
          label: "烟雾"
        },
        {
          value: "翻越围栏",
          label: "翻越围栏"
        },
        {
          value: "区域入侵",
          label: "区域入侵"
        },
        {
          value: "人员撤离",
          label: "人员撤离"
        },
        {
          value: "人员离岗",
          label: "人员离岗"
        },
        {
          value: "人员聚集",
          label: "人员聚集"
        },
        {
          value: "打电话",
          label: "打电话"
        },
        {
          value: "抽烟",
          label: "抽烟"
        },
        {
          value: "未佩戴安全帽",
          label: "未佩戴安全帽"
        },
        {
          value: "未穿着工作服",
          label: "未穿着工作服"
        },
        {
          value: "睡岗",
          label: "睡岗"
        }
      ],
      scene_nameOptions: [],
      isShowAdd: false, //是否展示新增弹窗
      ruleForm: {
        CameraName: "", // 摄像机名称
@@ -181,85 +184,193 @@

        CameraId: "", // 摄像机id
        Level: "",
        Enable: true
        Enable: false,
        createdAt: "",
        updatedAt: "",
        id: ""
      },

      dataList: [],

      tip: 1,
      tip: 1, // 区分保存还是编辑 但是现在没有编辑
      rules: {
        CameraName: [{ required: true, message: "请选择设备名称", trigger: "change" }],
        CameraName: [{ required: true, message: "请选择点位名称", trigger: "change" }],
        ChannelCode: [{ required: true, message: "请输入报警通道编码", trigger: "blur" }],
        CompanyCode: [{ required: true, message: "请输入企业编码", trigger: "blur" }],
        Sceneslist: [{ type: "array", required: true, message: "请选择推送场景", trigger: "change" }]
        // StartTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
        // EndTime: [{ required: true, message: "请选择结束时间", trigger: "change" }]
        Sceneslist: [{ type: "array", required: true, message: "请选择推送场景", trigger: "change" }],
        StartTime: [{ type: "string", required: true, message: "请选择开始时间", trigger: "change" }],
        EndTime: [{ type: "string", required: true, message: "请选择结束时间", trigger: "change" }]
      },
      page: 1,
      size: 10, //分页相关
      total: 0 //总数,
      size: 20, //分页相关
      total: 0, //总数
      companyCodeOptions: [
        {
          value: "370300010",
          label: "370300010/汇丰"
        },
        {
          value: "370300450",
          label: "370300450/海益"
        },
        {
          value: "370300440",
          label: "370300440/金汇丰"
        },
        {
          value: "370300480",
          label: "370300480/中汇"
        },
        {
          value: "370380545",
          label: "370380545/锦汇"
        }
      ]
    }
  },
  created() {
    this.checkCamerasList()
    this.aaaaa()
  async created() {
    let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
    this.query = query
    let res = await camerasList(query)
    this.dataList = res.data
    this.total = res.total
    this.scene_nameOptions = this.Constants.sceneNameOptions
    this.pageInit()
  },

  // const rsp: any = await getLocalCameraTree(params)
  // console.log(rsp, "rsp")
  methods: {
    async aaaaa() {
    async changeAll(val) {
      let enable
      val ? (enable = 1) : (enable = 0)
      let rsp = await camerasSwitch({ enable: enable })
      if (rsp && rsp.success) {
        this.$message({
          type: "success",
          message: "成功!"
        })
        // this.checkCamerasList()
      }
    },
    changeSwitch(val, row) {
      let params = {
        CameraName: row.cameraName,
        ChannelCode: row.channelCode,
        CompanyCode: row.companyCode,
        Scenes: row.scenes,
        StartTime: row.startTime,
        EndTime: row.endTime,
        CameraId: row.cameraId, //
        Level: row.level,
        Enable: val,
        createdAt: row.createdAt,
        updatedAt: row.updatedAt,
        id: row.id
      }
      camerasUpdate(params).then((res) => {
        if (res && res.success) {
          this.$message({
            type: "success",
            message: res.msg
          })
        }
      })
    },
    editCameras(row) {
      this.tip = 2
      this.isShowAdd = true
      this.resetUser()
      this.ruleForm.StartTime = row.startTime
      this.ruleForm.EndTime = row.endTime
      this.ruleForm.CameraName = row.cameraName
      this.ruleForm.ChannelCode = row.channelCode
      this.ruleForm.CompanyCode = row.companyCode
      this.ruleForm.Sceneslist = row.scenes.split(",")

      this.ruleForm.Level = row.level
      this.ruleForm.Enable = row.enable
      this.ruleForm.createdAt = row.createdAt
      this.ruleForm.updatedAt = row.updatedAt
      this.ruleForm.id = row.id
    },
    async pageInit() {
      // 进入页面前的初始化
      let res = await camerasConfig()
      // 总开关
      if (res && res.success) {
        res.data.enable === 0 ? (this.value1 = false) : (this.value1 = true)
      }
      let clusterId = ""
      let clusterReq = await getClusterDevList()
      // 查询
      if (clusterReq && clusterReq.success) {
        if (clusterReq.data.clusterList.length > 0) {
          clusterId = clusterReq.data.clusterList[0].cluster_id
        }
      }
      console.log(clusterId)
      let camereReq = await getLocalCameraTree({ clusterId: clusterId })
      console.log(camereReq.data.treeMenu, "camereReqcamereReqcamereReq")
      let array = camereReq.data.treeMenu
      for (let i = 0; i < array.length; i++) {
        console.log(array[i].children, "11111111")
        for (let j = 0; j < array[i].children.length; j++) {
          this.cameraOptions.push(array[i].children[j])
        }
      }
      console.log(this.cameraOptions, "arrrrrrrrrrrrrrrr")
      // 这个是 添加时的点位 是从摄像机页面 来的
      let array = []
      this.cameraOptions = traverse(camereReq.data.treeMenu, array)
    },
    addPoint() {
      this.isShowAdd = true
      this.tip = 1
      this.resetUser()
    }, //y
    saveUser() {
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
          console.log(obj, "dddddddd")
          let params = {
            CameraName: this.ruleForm.CameraName,
            ChannelCode: this.ruleForm.ChannelCode,
            CompanyCode: this.ruleForm.CompanyCode,
            Scenes: this.ruleForm.Sceneslist.toString(),
            StartTime: this.ruleForm.StartTime,
            EndTime: this.ruleForm.EndTime,
            CameraId: obj.id, //
            Level: this.ruleForm.Level,
            Enable: this.ruleForm.Enable
          }
          console.log(params, "paramsv")
          camerasCreate(params).then((res) => {
            console.log(res, "res")
            if (res && res.success) {
              this.$message({
                type: "success",
                message: res.msg
              })
              this.goback()
          if (this.tip !== 1) {
            // tip1 是添加 其他是编辑
            let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
            let params = {
              CameraName: this.ruleForm.CameraName,
              ChannelCode: this.ruleForm.ChannelCode,
              CompanyCode: this.ruleForm.CompanyCode,
              Scenes: this.ruleForm.Sceneslist.toString(),
              StartTime: this.ruleForm.StartTime,
              EndTime: this.ruleForm.EndTime,
              CameraId: obj.id, //
              Level: this.ruleForm.Level,
              Enable: this.ruleForm.Enable,
              createdAt: this.ruleForm.createdAt,
              updatedAt: this.ruleForm.updatedAt,
              id: this.ruleForm.id
            }
          })
            //  编辑
            camerasUpdate(params).then((res) => {
              if (res && res.success) {
                this.$message({
                  type: "success",
                  message: res.msg
                })
                this.goback()
                this.checkCamerasList()
              }
            })
          } else {
            let obj = this.cameraOptions.find((item) => item.name === this.ruleForm.CameraName)
            let params = {
              CameraName: this.ruleForm.CameraName,
              ChannelCode: this.ruleForm.ChannelCode,
              CompanyCode: this.ruleForm.CompanyCode,
              Scenes: this.ruleForm.Sceneslist.toString(),
              StartTime: this.ruleForm.StartTime,
              EndTime: this.ruleForm.EndTime,
              CameraId: obj.id, //
              Level: this.ruleForm.Level,
              Enable: this.ruleForm.Enable
            }
            // 新建
            camerasCreate(params).then((res) => {
              if (res && res.success) {
                this.$message({
                  type: "success",
                  message: res.msg
                })
                this.goback()
                this.checkCamerasList()
              }
            })
          }
        } else {
          return false
        }
@@ -267,12 +378,12 @@
    },
    handleSizeChange(size) {
      this.size = size
      this.checkCamerasList()
      this.checkCamerasList(1)
    },
    //分页功能
    refrash(page) {
      this.page = page
      this.checkCamerasList()
      this.checkCamerasList(1)
    },
    delCameras(row) {
      this.$confirm("确认要删除该点位吗, 是否继续?", "提示", {
@@ -290,20 +401,32 @@
        this.checkCamerasList()
      })
    },
    async checkCamerasList() {
      let res = await camerasList({ pageIndex: this.page, pageSize: this.size })
      this.dataList = res.data
      this.total = res.total
    async checkCamerasList(val) {
      this.tbLoading = true
      if (val === 1) {
        let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
        this.query = query
        let res = await camerasList(query)
        this.dataList = res.data
        this.total = res.total
      } else {
        let res = await camerasList(this.query)
        this.dataList = res.data
        this.total = res.total
      }

      setTimeout(() => {
        this.tbLoading = false
      }, 300)
    },
    resetUser() {
      this.ruleForm = {
        CameraName: "",
        ChannelCode: "",
        CompanyCode: "",
        Sceneslist: [],
        StartTime: "",
        EndTime: ""
      }
      // this.ruleForm. = {
      this.ruleForm.CameraName = ""
      this.ruleForm.ChannelCode = ""
      this.ruleForm.CompanyCode = ""
      this.ruleForm.Sceneslist = []
      this.ruleForm.StartTime = ""
      this.ruleForm.EndTime = ""
    },
    goback() {
      this.isShowAdd = false
@@ -476,6 +599,8 @@
    display: flex;
    margin: 20px 0;
    text-align: center;
    justify-content: space-between;

    .add {
      margin-right: 20px;
      width: 126px;
@@ -502,7 +627,15 @@
      }
    }
  }

  .switchBox {
    display: flex;
    align-items: center;
    float: right;
    position: absolute;
    right: 20px;
    top: 130px;
    font-size: 14px;
  }
  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;
@@ -605,6 +738,13 @@
</style>

<style>
/* .el-switch__core {
  height: 32px !important;
}
.el-switch__core::after {
  height: 30px !important;
  width: 30px !important;
} */
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
@@ -619,4 +759,17 @@
  color: #0065ff;
  border-color: #0065ff;
}

/* .el-switch__core {
  width: 40px !important;
  height: 20px;
}
.el-switch__core::after {
  width: 16px;
  height: 16px;
  margin-top: -1px;
}
.el-switch.is-checked .el-switch__core::after {
  margin-left: -17px;
} */
</style>