diff --git a/src/assets/companyFile/add.png b/src/assets/companyFile/add.png new file mode 100644 index 0000000..2006e08 Binary files /dev/null and b/src/assets/companyFile/add.png differ diff --git a/src/assets/companyFile/btn08.png b/src/assets/companyFile/btn08.png new file mode 100644 index 0000000..9cfc000 Binary files /dev/null and b/src/assets/companyFile/btn08.png differ diff --git a/src/assets/companyFile/camera03.png b/src/assets/companyFile/camera03.png new file mode 100644 index 0000000..1aa04e9 Binary files /dev/null and b/src/assets/companyFile/camera03.png differ diff --git a/src/assets/companyFile/intelligence02.png b/src/assets/companyFile/intelligence02.png new file mode 100644 index 0000000..be05251 Binary files /dev/null and b/src/assets/companyFile/intelligence02.png differ diff --git a/src/assets/companyFile/minus.png b/src/assets/companyFile/minus.png new file mode 100644 index 0000000..7246fbd Binary files /dev/null and b/src/assets/companyFile/minus.png differ diff --git a/src/views/systemManagement/companyList/components/companyDataDialog.vue b/src/views/systemManagement/companyList/components/companyDataDialog.vue index 9872aa7..0355a57 100644 --- a/src/views/systemManagement/companyList/components/companyDataDialog.vue +++ b/src/views/systemManagement/companyList/components/companyDataDialog.vue @@ -76,15 +76,13 @@ - - - - - - - - - + {{ item.label }} + @@ -258,6 +256,19 @@ export default { return { dialogTitle: "", visible: false, + checkList: [ + { id: "1", label: "剧毒" }, + { id: "2", label: "易制毒" }, + { id: "3", label: "易制爆" }, + { id: "4", label: "放射源" }, + { id: "5", label: "消防重点" }, + { id: "6", label: "所管消防" }, + { id: "7", label: "治安重点" }, + { id: "8", label: "创安单位" }, + { id: "9", label: "外资合资" }, + ], + arr:[], + cancel_arr:[], // 企业工商信息上半部分 form: { // 企业工商信息上半部分 @@ -342,9 +353,12 @@ export default { policeDistrictCn: "", policeDistrictCode: "", belongingArea: "", + companyTypes: [], // 非下拉List, 记录复选框的 + values: [], + id: [], }; this.imageUrl = ""; - Object.assign(this.form, newForm) + Object.assign(this.form, newForm); } else if (num === 3) { this.dialogTitle = "编辑"; console.log("item", item); @@ -357,9 +371,8 @@ export default { areaCode: "0", }; common(params).then((res) => { - console.log('res1', res); + console.log("res1", res); this.form.province = res.data; - console.log('this.form.province',JSON.stringify(this.form.province)); }); }, // 省下拉选中后，获取市级下拉 @@ -421,21 +434,35 @@ export default { this.form.jurisdiction = res.data; }); }, + company_choice(e, item) { + // this.form.companyType是后台传送过来的字符串，我们需要转成数组 + const company_arr = this.form.companyType.split(",") + if (e) { + this.arr.push(item.id); + company_arr.concat(this.arr) // 已选中的，和本次点击选中的 + const new_arr = Array.from(new Set(company_arr.concat(this.arr))) // 去重 + const sort_arr = new_arr.sort() // 重新排序 + this.form.companyType = sort_arr.toString() + } else { + company_arr.filter(val =>val != item.id) // 点击取消选中复选框时删除对应的 + this.form.companyType = company_arr.filter(val =>val != item.id).toString() + } + }, // 确定数据 saveFormData() { const params = this.form; - console.log("this.form", this.form); + console.log("this.form3", this.form); if (this.dialogTitle === "新建") { postCompanyList(params).then((res) => { console.log(res); - this.$message.success("新建成功"); - this.visible = false; + this.$message.success("新建成功"); + this.visible = false; }); } else if (this.dialogTitle === "编辑") { putCompanyList(params).then((res) => { console.log(res); - this.$message.success("编辑成功"); - this.visible = false; + this.$message.success("编辑成功"); + this.visible = false; }); } this.$emit("back"); diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue index e68642f..d33e634 100644 --- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue +++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue @@ -141,6 +141,7 @@ export default { return { table_title: "视频监控设备列表", // 表格主题 display_search: true, // 判断展示对应查询项 + search_params_table: {}, // 承接传过来的表格查询入参 search: { equipment: "", ip: "", @@ -168,8 +169,8 @@ export default { ], // 智能表头 tableColumn_preception: [ - { prop: "deviceName", label: "设备名称",width: "270" }, - { prop: "devicePerceptionParentTypeCn", label: "设备类型" }, + { prop: "deviceName", label: "设备名称", width: "270" }, + { prop: "devicePerceptionSubTypeCn", label: "设备类型" }, { prop: "deviceIp", label: "设备IP" }, // { prop: "longitude", label: "设备经度" }, // { prop: "latitude", label: "设备维度" }, @@ -192,6 +193,7 @@ export default { this.tableColumn = this.tableColumn_preception; } this.pushTableData = data.pushTableData; + this.search_params_table = data.search_params; }); }, methods: { @@ -204,12 +206,8 @@ export default { deviceName: this.search.equipment, }; getPerceptionList(val).then((res) => { - if (res.code === 200) { - // res.row传给右下方表格数据 - this.pushTableData = res.rows; - } else { - this.$message.warning("查询智能感知设备列表失败"); - } + // res.row传给右下方表格数据 + this.pushTableData = res.rows; }); }, reset() { @@ -237,13 +235,10 @@ export default { deviceIp: this.search.equipemnt_ip, deviceName: this.search.equipment, }; + Object.assign(val, this.search_params_table); getVideoList(val).then((res) => { - if (res.code === 200) { - // res.row传给右下方表格数据 - this.pushTableData = res.rows; - } else { - this.$message.warning("查询视频监控设备列表失败"); - } + // res.row传给右下方表格数据 + this.pushTableData = res.rows; }); }, resetVideo() { @@ -254,14 +249,14 @@ export default { const val = { pageSize: 4, pageNum: 1, + gbsChannelNo: this.search.channel_code, + deviceIp: this.search.equipemnt_ip, + deviceName: this.search.equipment, }; + Object.assign(val, this.search_params_table); getVideoList(val).then((res) => { - if (res.code === 200) { // res.row传给右下方表格数据 this.pushTableData = res.rows; - } else { - this.$message.warning("查询视频监控设备列表失败"); - } }); }, openDialog(num, row) { @@ -280,7 +275,7 @@ export default { if (this.table_title === "视频监控设备列表") { this.$refs.addVideoDialog.open(num, row); } else if (this.table_title === "智能感知设备列表") { - this.$refs.addPerceptionDialog.open(num,row); + this.$refs.addPerceptionDialog.open(num, row); } } else if (num === "3") { // 导入弹窗 @@ -288,14 +283,13 @@ export default { } else if (num === "4") { // 导出弹窗 this.$refs.deriveDialog.open(); - } - else if (num === "5") { + } else if (num === "5") { // 编辑弹窗 console.log("rowww", row); if (this.table_title === "视频监控设备列表") { this.$refs.addVideoDialog.open(num, row); } else if (this.table_title === "智能感知设备列表") { - this.$refs.addPerceptionDialog.open(num,row); + this.$refs.addPerceptionDialog.open(num, row); } } }, diff --git a/src/views/systemManagement/correlationEquipment/components/searchBox.vue b/src/views/systemManagement/correlationEquipment/components/searchBox.vue index 0324a11..684283e 100644 --- a/src/views/systemManagement/correlationEquipment/components/searchBox.vue +++ b/src/views/systemManagement/correlationEquipment/components/searchBox.vue @@ -2,9 +2,12 @@
-
+ -
+ {{ searchBoxData.img_text }}
@@ -12,7 +15,7 @@ class="searchBox_btn" v-for="item in searchBoxData.btnList" :key="item.value" - @change="sendClearList(item.type, item.value)" + @change="sendClearList($event, item.type, item.value)" :label="item.name" name="type" > @@ -34,50 +37,155 @@ export default { pushValue: { title: "", pushTableData: [], + search_params:{}, // 最新的查询入参 }, + types_params_list: [], // 选中视频企业类型对应的id + per_types_params_list: [], // 选中智能企业类型对应的id }; }, created() {}, methods: { - async sendClearList(item, value) { + async sendClearList(e, item, value) { + if (e) { + // 单点确定要查询的时候 + // 复选框单独点击时查询表格数据 + this.$emit("clearList"); // 先执行清空邻复选框 + // 切换表格标题 + console.log("item123", item); + if (item === "1") { + this.types_params_list.push(value); + this.pushValue.title = "视频监控设备列表"; + // 根据企业标签查询视频数据 + this.pushValue.search_params = { + pageSize: 4, + pageNum: 1, + deviceVideoSubTypes: "", + }; + this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString(); + await getVideoList(this.pushValue.search_params).then((res) => { + console.log("resVideoList1", res.rows); + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; + }); + } else if (item === "2") { + this.per_types_params_list.push(value); + this.pushValue.title = "智能感知设备列表"; + this.pushValue.search_params = { + pageSize: 4, + pageNum: 1, + devicePerceptionSubTypes: "", + }; + this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list + .sort() + .toString(); + await getPerceptionList(this.pushValue.search_params).then((res) => { + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; + }); + } + bus.$emit("send", this.pushValue); + console.log("value", value); + } else { + // 复选框单独点击时查询表格数据 + console.log("e1111", e); + this.$emit("clearList"); // 先执行清空邻复选框 + // 切换表格标题 + console.log("item123", item); + if (item === "1") { + console.log("this.types_params_list2", this.types_params_list); + console.log("value", value); + this.types_params_list = this.types_params_list.filter( + (val) => val != value + ); // 取消选中的标签查询 + console.log("this.types_params_list3", this.types_params_list); + this.pushValue.title = "视频监控设备列表"; + // 根据企业标签查询视频数据 + this.pushValue.search_params = { + pageSize: 4, + pageNum: 1, + deviceVideoSubTypes: "", + }; + this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString(); + await getVideoList(this.pushValue.search_params).then((res) => { + console.log("resVideoList1", res.rows); + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; + }); + } else if (item === "2") { + this.per_types_params_list = this.per_types_params_list.filter( + (item) => item != value + ); + this.pushValue.title = "智能感知设备列表"; + this.pushValue.search_params = { + pageSize: 4, + pageNum: 1, + devicePerceptionSubTypes: "", + }; + this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list + .sort() + .toString(); + await getPerceptionList(this.pushValue.search_params).then((res) => { + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; + }); + } + bus.$emit("send", this.pushValue); + } + }, + async change_types(num) { + // 标签按钮左侧图标点击 this.$emit("clearList"); // 先执行清空邻复选框 - // 切换表格标题 - if (item === "1") { + this.types_params_list = []; // 点击按钮全查的时候，要让单点查询的记录清空掉 + this.per_types_params_list = []; + this.searchBoxData.company_types = []; + if (num === "1") { + // 视频监控全标签查 this.pushValue.title = "视频监控设备列表"; - // 根据企业标签查询视频数据 - const val = { + this.pushValue.search_params = { pageSize: 4, pageNum: 1, - deviceVideoSubType: value, + deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9", }; - await getVideoList(val).then((res) => { - if (res.code === 200) { - console.log("resVideoList1", res.rows); - // res.row传给右下方表格数据 - this.pushValue.pushTableData = res.rows; - } else { - this.$message.warning("查询视频监控设备列表失败"); - } + await getVideoList(this.pushValue.search_params).then((res) => { + console.log("resVideoList1", res.rows); + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; }); - } else if (item === "2") { + } else if (num === "2") { + console.log("num123", num); + // 智能感知全标签查 this.pushValue.title = "智能感知设备列表"; - const val = { + this.pushValue.search_params = { pageSize: 4, pageNum: 1, - devicePerceptionSubType: value, + devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11", }; - await getPerceptionList(val).then((res) => { - if (res.code === 200) { - // res.row传给右下方表格数据 - this.pushValue.pushTableData = res.rows; - } else { - this.$message.warning("查询智能感知设备列表失败"); - } + await getPerceptionList(this.pushValue.search_params).then((res) => { + // res.row传给右下方表格数据 + this.pushValue.pushTableData = res.rows; }); } bus.$emit("send", this.pushValue); - console.log("value", value); - // deviceVideoSubType + // const types_arr = this.searchBoxData.btnList.map((item) => ({ + // name: item.name, + // })); + // const types_text = types_arr.map((item) => item.name); + // console.log("types_text", types_text); + // console.log( + // "this.searchBoxData.company_types", + // this.searchBoxData.company_types.length + // ); + // // 全选或者全不选操作 + // if (this.searchBoxData.company_types.length === 9) { + // this.searchBoxData.company_types = []; // 置空，全不选 + // } else if ( + // this.searchBoxData.company_types.length != 0 && + // this.searchBoxData.company_types.length != 9 + // ) { + // this.searchBoxData.company_types = types_text; // 没全选，则全选 + // } else if (this.searchBoxData.company_types.length === 0) { + // this.searchBoxData.company_types = types_text; // 没选，也全选 + // } }, }, }; @@ -91,22 +199,30 @@ export default { display: flex; justify-content: center; flex-direction: column; - width: 19.8%; - height: 53%; - padding-top: 8%; - padding-left: 3%; + width: 22%; + height: 100%; color: #fff; text-align: center; font-size: 15px; .searchBox_img_top { - width: 78%; - height: 100%; + background: url("~@/assets/companyFile/btn08.png") no-repeat !important; + background-size: 100% 100% !important; + width: 5vw; + height: 10vh; margin: 0px auto; + display: flex; + justify-content: center; + align-items: center; + border: 0px; img { - width: 100%; - height: 100%; + width: 1.8vw; + height: 3.6vh; } } + .searchBox_img_top:focus, + .searchBox_img_top:hover { + filter: brightness(170%); + } span { margin-top: 7%; } diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue index bd757c0..b47c4b6 100644 --- a/src/views/systemManagement/correlationEquipment/index.vue +++ b/src/views/systemManagement/correlationEquipment/index.vue @@ -25,7 +25,6 @@
-
+ + + + {{ node.label }} @@ -107,7 +120,7 @@ export default { }; getAllData(params).then((res) => { if (res.code === 200) { - console.log("res", res); + console.log("resning", res); // 树形赋值 this.companyTreeData = res.data; console.log("this.companyTreeData1", this.companyTreeData); @@ -130,37 +143,39 @@ export default { // 给子查询盒子传递字符和图片地址 // 左边盒子 this.searchBox_left_text = { - src: require("@/assets/companyFile/camera.png"), + src: require("@/assets/companyFile/camera03.png"), img_text: "视频监控设备", btnList: [ - { value: "1", name: "公共区域", type: "1" }, - { value: "2", name: "地下车库", type: "1" }, - { value: "3", name: "全景监控", type: "1" }, - { value: "5", name: "人脸抓拍", type: "1" }, - { value: "6", name: "电梯监控", type: "1" }, - { value: "7", name: "人体测温", type: "1" }, - { value: "8", name: "车辆抓拍", type: "1" }, - { value: "9", name: "人脸门禁", type: "1" }, - { value: "4", name: "高空抛物", type: "1" }, + { value: 1, name: "公共区域", type: "1" }, + { value: 2, name: "地下车库", type: "1" }, + { value: 3, name: "全景监控", type: "1" }, + { value: 5, name: "人脸抓拍", type: "1" }, + { value: 6, name: "电梯监控", type: "1" }, + { value: 7, name: "人体测温", type: "1" }, + { value: 8, name: "车辆抓拍", type: "1" }, + { value: 9, name: "人脸门禁", type: "1" }, + { value: 4, name: "高空抛物", type: "1" }, ], company_types: [], + typesAll: "1", }; // 右边盒子 this.searchBox_right_text = { - src: require("@/assets/companyFile/intelligence.png"), + src: require("@/assets/companyFile/intelligence02.png"), img_text: "智能感知设备", btnList: [ - { value: "2", name: "车辆抓拍", type: "2" }, - { value: "1", name: "人脸抓拍", type: "2" }, - { value: "3", name: "门禁设备", type: "2" }, - { value: "4", name: "高抛抓拍", type: "2" }, - { value: "6", name: "全结构化", type: "2" }, - { value: "7", name: "智能烟感", type: "2" }, - { value: "8", name: "访客机", type: "2" }, - { value: "10", name: "多维设备", type: "2" }, - { value: "11", name: "WIFI设备", type: "2" }, + { value: 2, name: "车辆抓拍", type: "2" }, + { value: 1, name: "人脸抓拍", type: "2" }, + { value: 3, name: "门禁设备", type: "2" }, + { value: 4, name: "高抛抓拍", type: "2" }, + { value: 6, name: "全结构化", type: "2" }, + { value: 7, name: "智能烟感", type: "2" }, + { value: 8, name: "访客机", type: "2" }, + { value: 10, name: "多维设备", type: "2" }, + { value: 11, name: "WIFI设备", type: "2" }, ], company_types: [], + typesAll: "2", }; }, methods: { @@ -287,7 +302,8 @@ export default { } } .cardBodyLeft_footer { - height: 71.7vh; + margin-top: 3vh; + height: 71vh; .el-tree { /* 树形数据过长添加滚动条 */ height: 100%; @@ -297,7 +313,6 @@ export default { background: #293738; color: #fff !important; /deep/.el-tree-node__content { - border: 0.5px dashed white; height: 50px; } .el-tree-node__label.node-label { @@ -356,8 +371,8 @@ export default { .cardBodyRight_search { display: flex; justify-content: space-evenly; - width: 100%; - height: 25%; + width: 63vw; + height: 20vh; .video { width: 48%; height: 100%; @@ -367,7 +382,7 @@ export default { .intelligence { width: 48%; height: 100%; - background: #2c4046; + background: #3b5153; border-radius: 4px; } }