| | |
| | | <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 class="button resetBtn" @click="reset">重置</div> --> |
| | | </div> |
| | | </div> |
| | | <div class="btns"> |
| | |
| | | <span class="iconfont"></span> |
| | | <span>添加点位</span> |
| | | </div> |
| | | <div class="switchBox"> |
| | | <el-switch |
| | | v-model="value1" |
| | | width="60" |
| | | @change="changeAll($event)" |
| | | active-text="总点位开" |
| | | inactive-text="总点位关" |
| | | > |
| | | </el-switch> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="switchBox"> |
| | | 开启上报 |
| | | <el-table-column prop="Enable" label="开关" width="70px" show-overflow-tooltip> |
| | | <el-switch v-model="value1" active-color="#0065ff" @change="changeAll($event)"> </el-switch> |
| | | </el-table-column> |
| | | </div> |
| | | <div class="table-area"> |
| | | <el-table |
| | | id="multipleTable" |
| | | ref="multipleTable" |
| | | :data="dataList" |
| | | :fit="true" |
| | | :default-sort="{ prop: 'createTime', order: 'descending' }" |
| | | :default-sort="{ prop: 'companyCode', order: 'ascending' }" |
| | | > |
| | | <el-table-column prop="cameraName" label="点位名称" width="130px" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="channelCode" label="报警通道编码" show-overflow-tooltip></el-table-column> |
| | |
| | | </el-table-column> |
| | | <el-table-column prop="Enable" label="开关" width="70px" show-overflow-tooltip> |
| | | <template slot-scope="scope"> |
| | | <el-switch |
| | | v-model="scope.row.enable" |
| | | @change="changeSwitch($event, scope.row)" |
| | | active-color="#13ce66" |
| | | inactive-color="#f0f3f5" |
| | | > |
| | | <el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" active-color="#0065ff"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | class="add-ruleForm" |
| | | > |
| | | <el-form-item label="点位名称" prop="CameraName"> |
| | | <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> |
| | |
| | | :picker-options="{ |
| | | start: '00:00', |
| | | step: '00:30', |
| | | end: ruleForm.EndTime ? ruleForm.EndTime : '23:30', |
| | | end: ruleForm.EndTime ? ruleForm.EndTime : '24:00', |
| | | maxTime: ruleForm.EndTime |
| | | }" |
| | | > |
| | |
| | | :picker-options="{ |
| | | start: ruleForm.StartTime ? ruleForm.StartTime : '00:00', |
| | | step: '00:30', |
| | | end: '23:30', |
| | | end: '24:00', |
| | | minTime: ruleForm.StartTime |
| | | }" |
| | | > |
| | |
| | | |
| | | <script> |
| | | import { getLocalCameraTree } from "@/api/area" |
| | | import { traverse } from "./point" |
| | | import { getClusterDevList } from "@/api/clusterManage" |
| | | import { camerasList, camerasCreate, camerasConfig, camerasSwitch, camerasUpdate, camerasDelete } from "@/api/report" |
| | | import "./point.scss" |
| | | import { traverse } from "./point/point" |
| | | import "./point/point.scss" |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | activeColor: "", |
| | | inactiveColor: "#f0f3f5", |
| | | value1: false, |
| | | query: {}, |
| | | inputText: "", //输入框内容 |
| | |
| | | dataList: [], |
| | | 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" }], |
| | |
| | | total: 0 //总数, |
| | | } |
| | | }, |
| | | // computed: { |
| | | // // activeColor() { |
| | | // // return this.value1 ? "#13ce66" : "#f0f3f5" |
| | | // // } |
| | | // }, |
| | | // watch: { |
| | | // value1: { |
| | | // handler(newVal, oldVal) { |
| | | // console.log(newVal, oldVal, "newVal, oldVal") |
| | | // newVal ? (this.activeColor = "#13ce66") : (this.activeColor = "#f0f3f5") |
| | | // }, |
| | | // deep: true |
| | | // } |
| | | // }, |
| | | async created() { |
| | | let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText } |
| | | this.query = query |
| | |
| | | |
| | | methods: { |
| | | async changeAll(val) { |
| | | console.log(val) |
| | | let enable |
| | | val ? (enable = 1) : (enable = 0) |
| | | let rsp = await camerasSwitch({ enable: enable }) |
| | |
| | | } |
| | | }, |
| | | changeSwitch(val, row) { |
| | | console.log(val, row, "val, rowval, row") |
| | | let params = { |
| | | CameraName: row.cameraName, |
| | | ChannelCode: row.channelCode, |
| | |
| | | id: row.id |
| | | } |
| | | camerasUpdate(params).then((res) => { |
| | | console.log(res, "res") |
| | | if (res && res.success) { |
| | | this.$message({ |
| | | type: "success", |
| | |
| | | }) |
| | | }, |
| | | editCameras(row) { |
| | | console.log(row, "row") |
| | | this.tip = 2 |
| | | this.isShowAdd = true |
| | | this.resetUser() |
| | |
| | | // 总开关 |
| | | if (res && res.success) { |
| | | res.data.enable === 0 ? (this.value1 = false) : (this.value1 = true) |
| | | console.log(this.value1) |
| | | } |
| | | let clusterId = "" |
| | | let clusterReq = await getClusterDevList() |
| | |
| | | clusterId = clusterReq.data.clusterList[0].cluster_id |
| | | } |
| | | } |
| | | console.log(clusterId) |
| | | let camereReq = await getLocalCameraTree({ clusterId: clusterId }) |
| | | // 这个是 添加时的点位 是从摄像机页面 来的 |
| | | let array = [] |
| | |
| | | if (this.tip !== 1) { |
| | | // tip1 是添加 其他是编辑 |
| | | 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, |
| | |
| | | updatedAt: this.ruleForm.updatedAt, |
| | | id: this.ruleForm.id |
| | | } |
| | | // 编辑 |
| | | camerasUpdate(params).then((res) => { |
| | | console.log(res, "res") |
| | | if (res && res.success) { |
| | | this.$message({ |
| | | type: "success", |
| | |
| | | }) |
| | | } else { |
| | | 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, |
| | |
| | | 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", |
| | |
| | | this.ruleForm.Sceneslist = [] |
| | | this.ruleForm.StartTime = "" |
| | | this.ruleForm.EndTime = "" |
| | | |
| | | // Scenes: "", |
| | | // CameraId: "", // 摄像机id |
| | | // Level: "", |
| | | // Enable: false, |
| | | // createdAt: "", |
| | | // updatedAt: "", |
| | | // id: "" |
| | | // } |
| | | }, |
| | | goback() { |
| | | this.isShowAdd = false |
| | |
| | | } |
| | | </script> |
| | | |
| | | // |
| | | <style scoped lang="scss"> |
| | | // |
| | | </style> |
| | | <style scoped lang="scss"> |
| | | .sub-account { |
| | | padding: 20px; |
| | |
| | | margin: 20px 0; |
| | | text-align: center; |
| | | justify-content: space-between; |
| | | .switchBox { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .add { |
| | | margin-right: 20px; |
| | | width: 126px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | |
| | | 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> |