From 14e02654e0545ee69456d64aef2f35c7c219d708 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Fri, 07 May 2021 11:26:49 +0800
Subject: [PATCH] 地图模式设备状态修改
---
src/views/system/cs.vue | 436 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 390 insertions(+), 46 deletions(-)
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index a4d1ba8..15c292f 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -20,6 +20,7 @@
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
+ @row-click="rowClick"
>
<template slot="menuLeft">
<el-button
@@ -88,10 +89,53 @@
@submit="handleDatasourceSubmit"
/>
</el-dialog>
+ <!-- 右侧弹窗，业主的设备 -->
+ <el-dialog
+ :title="onceData.tenantName"
+ :visible.sync="dialogVisible"
+ width="780px"
+ :before-close="handleClose"
+ modal-append-to-body="false"
+ append-to-body="true"
+ class="right-open"
+ >
+ <el-divider></el-divider>
+ <div class="r-o-our">
+ <avue-crud
+ :option="options"
+ @on-load="onLoads"
+ :data="datas"
+ :page="pages"
+ @search-change="searchChanges"
+ @search-reset="searchResets"
+ @row-click="rowClicks"
+ @current-change="currentChanges"
+ @size-change="sizeChanges"
+ >
+ <template slot="states" slot-scope="scope">
+ <el-tag
+ :class="[
+ scope.row.states == '掉线'
+ ? 'diaoxianl'
+ : scope.row.states == '在线'
+ ? 'zaixianl'
+ : scope.row.states == '故障'
+ ? 'guzhagnl'
+ : scope.row.states == '预警'
+ ? 'baojinl'
+ : '',
+ ]"
+ >{{ scope.row.states }}</el-tag
+ >
+ </template>
+ </avue-crud>
+ </div>
+ </el-dialog>
</basic-container>
</template>
<script>
+import { getListliu, getListliuc } from "@/api/client/client";
import {
getList,
getDetail,
@@ -128,6 +172,89 @@
loading: true,
box: false,
datasourceBox: false,
+ dialogVisible: false, //右侧弹窗
+ onceData: {}, //数据
+ datas: [], //cc
+ loadings: true, //等待
+ querys: {}, //搜索
+ isEdit:false,
+ pages: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ options: {
+ //表格数据
+ addBtn: false,
+ height: "auto",
+ indexLabel: "序号",
+ index: true,
+ card: true,
+ menu: false,
+ header: false,
+ searchShow: true,
+ searchMenuSpan: 8,
+ searchSpan: 8,
+ searchEnter: true,
+ calcHeight: 80,
+ stripe: true,
+ title: "表格的标题",
+ titleSize: "h3",
+ titleStyle: {
+ color: "red",
+ },
+ align: "center",
+ menuAlign: "center",
+ column: [
+ {
+ label: "设备名称",
+ width: 200,
+ prop: "deviceName",
+ searchPlaceholder: "设备名称/编号",
+ search: true,
+ sortable: false,
+ rules: [
+ {
+ required: true,
+ message: "请输入设备名称",
+ trigger: "blur",
+ },
+ ],
+ },
+ {
+ label: "设备编号",
+ prop: "deviceNumber",
+ width: 110,
+ },
+ {
+ label: "使用方",
+ prop: "pid",
+ width: 200,
+ search: true,
+ hide: true,
+ type: "select",
+ // dicUrl: "/api/blade-system/dept/trees",
+ dicData: [], //getUser中直接赋值
+ },
+ {
+ label: "使用方",
+ prop: "deptName",
+ width: 200,
+ },
+ {
+ label: "布撤防状态",
+ prop: "stateSevicestate",
+ width: 110,
+ },
+ {
+ label: "设备状态",
+ prop: "states",
+ width: 90,
+ slot: true,
+ // className: "cityClass1",
+ },
+ ],
+ },
page: {
pageSize: 10,
currentPage: 1,
@@ -135,7 +262,7 @@
},
option: {
height: "auto",
- calcHeight: 80,
+ calcHeight: 54,
size: "mini",
tip: false,
searchShow: true,
@@ -253,9 +380,20 @@
},
{
label: "地址",
- prop: "map",
+ prop: "address",
+ span: 10,
+ // labelWidth: '60',
hide: true,
- span: 24,
+ },
+ {
+ label: null,
+ prop: "map",
+ labelWidth: "0",
+ searchSpan: 0,
+ maxlength: 0,
+ hide: true,
+ span: 2,
+ // display:false,
component: "AvueMap",
},
{
@@ -263,12 +401,15 @@
hide: true,
addDisplay: false,
prop: "wd",
+ span: 6,
},
{
label: "经度",
+ labelWidth: "50",
hide: true,
addDisplay: false,
prop: "jd",
+ span: 5,
},
{
label: "账号额度",
@@ -366,17 +507,6 @@
],
},
{
- label: "地址",
- prop: "had",
- rules: [
- {
- required: true,
- message: "请输入地址",
- trigger: "blur",
- },
- ],
- },
- {
label: "介绍",
prop: "content",
rules: [
@@ -440,16 +570,6 @@
],
},
{
- label: "地址",
- prop: "had",
- rules: [
- {
- required: true,
- message: "请输入地址",
- },
- ],
- },
- {
label: "介绍",
prop: "content",
span: 24,
@@ -503,16 +623,6 @@
{
required: true,
message: "请输入开发商",
- },
- ],
- },
- {
- label: "地址",
- prop: "had",
- rules: [
- {
- required: true,
- message: "请输入地址",
},
],
},
@@ -616,11 +726,37 @@
watch: {
"form.map": {
// form是表单或者表格绑定的数据集，v-model='form'
-
handler(val) {
if (val) {
- this.form.wd = val.latitude;
- this.form.jd = val.longitude;
+ if(that.isEdit){
+ getDetail(this.form.id).then((res) => {
+ this.form = res.data.data;
+ this.form.wd = val.latitude;
+ this.form.jd = val.longitude;
+ });
+ }
+ //地址截取，从县/区开始截取,并且取从县区第一个出现的位置开始
+ var address = val.formattedAddress.toString();
+ if (address.search("县") != -1) {
+ this.form.address = address.substring(
+ address.indexOf("县") + 1,
+ address.length
+ );
+ }
+ if (address.search("区") != -1) {
+ this.form.address = address.substring(
+ address.indexOf("区") + 1,
+ address.length
+ );
+ }
+ //写入新的省市区
+ that.form.province = val.addressComponent.province;
+ if (val.addressComponent.city == "") {
+ that.form.city = val.addressComponent.province;
+ } else {
+ that.form.city = val.addressComponent.city;
+ }
+ that.form.district = val.addressComponent.district;
}
},
immediate: true,
@@ -652,9 +788,10 @@
add(row).then(
() => {
if (row.type == "0") {
+ console.log(123);
instery(
row.dj,
- row.had,
+ // row.had,
row.ht,
row.ctime,
row.content,
@@ -664,7 +801,7 @@
insertss(
row.dj,
row.nature,
- row.had,
+ // row.had,
row.motto,
row.ctime,
row.content,
@@ -676,7 +813,7 @@
row.category,
row.attributes,
row.developers,
- row.had,
+ // row.had,
row.housetype,
row.content,
row.hn
@@ -768,6 +905,7 @@
},
beforeOpen(done, type) {
if (["edit"].includes(type)) {
+ that.isEdit=true;
getDetail(this.form.id).then((res) => {
if (this.form.type == "1") {
const data = res.data.data;
@@ -777,17 +915,18 @@
data.dj = re.data.data[0].dj;
data.motto = re.data.data[0].motto;
data.ctime = re.data.data[0].ctime;
- data.had = re.data.data[0].had;
+ //data.had = re.data.data[0].had;
data.content = re.data.data[0].content;
this.form = data;
});
} else if (this.form.type == "0") {
selectTy(this.form.tenantName).then((re) => {
+ console.log(re, 123);
const data = res.data.data;
data.dj = re.data.data[0].dj;
data.ht = re.data.data[0].ht;
data.ctime = re.data.data[0].ctime;
- data.had = re.data.data[0].had;
+ //.had = re.data.data[0].had;
data.content = re.data.data[0].content;
this.form = data;
});
@@ -798,7 +937,7 @@
data.category = re.data.data[0].category;
data.attributes = re.data.data[0].attributes;
data.developers = re.data.data[0].developers;
- data.had = re.data.data[0].had;
+ //data.had = re.data.data[0].had;
data.housetype = re.data.data[0].housetype;
data.content = re.data.data[0].content;
this.form = data;
@@ -813,7 +952,7 @@
data.nature = re.data.data[0].nature;
data.motto = re.data.data[0].motto;
data.ctime = re.data.data[0].ctime;
- data.had = re.data.data[0].had;
+ //data.had = re.data.data[0].had;
data.content = re.data.data[0].content;
if (!(data.accountNumber > 0)) {
data.accountNumber = "不限制";
@@ -829,7 +968,7 @@
data.dj = re.data.data[0].dj;
data.ht = re.data.data[0].ht;
data.ctime = re.data.data[0].ctime;
- data.had = re.data.data[0].had;
+ //data.had = re.data.data[0].had;
data.content = re.data.data[0].content;
if (!(data.accountNumber > 0)) {
data.accountNumber = "不限制";
@@ -845,7 +984,7 @@
data.category = re.data.data[0].category;
data.attributes = re.data.data[0].attributes;
data.developers = re.data.data[0].developers;
- data.had = re.data.data[0].had;
+ //data.had = re.data.data[0].had;
data.housetype = re.data.data[0].housetype;
data.content = re.data.data[0].content;
if (!(data.accountNumber > 0)) {
@@ -858,6 +997,10 @@
});
}
});
+ }
+
+ if (["edit"].includes(type)) {
+ that.isEdit=false;
}
done();
},
@@ -981,6 +1124,8 @@
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
+ // console.log(res);
+ // this.onceData = res.data.data.records[0];
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
@@ -988,7 +1133,133 @@
this.selectionClear();
});
},
+ rowClick(val) {
+ //行点击事件 //右侧弹窗事件
+ this.onceData = val;
+ this.dialogVisible = true;
+ },
+ rowClicks(val) {
+ //弹窗行点击事件
+ // console.log(val);
+ // this.$router.push({ path: "/dataL/dataL", query: val });
+ let routeData = this.$router.resolve({
+ path: "/datalOnce",
+ query: val,
+ });
+ window.open(routeData.href, "_blank");
+ },
+ changeDataOpen(dat) {
+ //处理弹出框数据
+ console.log(dat);
+ if (dat.length > 0) {
+ for (var key in dat) {
+ let states;
+ if (dat[key].state != "") {
+ states = "故障";
+ } else {
+ if (dat[key].jtype != 1) {
+ if (dat[key].onlineStatus == 1) {
+ states = "在线";
+ } else {
+ states = "掉线";
+ }
+ } else {
+ states = "预警";
+ }
+ }
+ // console.log(states);
+ dat[key].states = states;
+ dat[key].stateSevicestate =
+ dat[key].devicestate == "0"
+ ? "撤防"
+ : dat[key].devicestate == "1"
+ ? "布防"
+ : "无";
+ }
+ }
+ },
+ getMout(fid) {
+ getListliuc(fid).then((res) => {
+ // console.log(res.data.data);
+ this.getUser(res.data.data);
+ });
+ },
+ getUser(dat) {
+ //建立使用方搜索关键词
+ // console.log(dat);
+ if (dat.length > 0) {
+ this.users = [];
+ for (var key in dat) {
+ this.users.push({
+ label: dat[key].title,
+ value: dat[key].id,
+ });
+ }
+ }
+ // this.users.push([
+ // {
+
+ // }
+ // ])
+ this.options.column[2].dicData = this.users;
+ },
+ searchResets() {
+ //清空搜索框中的内容
+ this.querys = {};
+ //清空this.$route.query
+ this.$router.push({ querys: {} });
+ this.onLoads(this.pages);
+ },
+ searchChanges(params, done) {
+ //搜索
+ console.log(params, done, 222);
+ this.querys = params;
+ this.pages.currentPage = 1;
+ this.onLoads(this.pages, params);
+ done();
+ },
+ currentChanges(currentPage) {
+ //分页改变时候触发
+ this.pages.currentPage = currentPage;
+ },
+ sizeChanges(pageSize) {
+ this.pages.pageSize = pageSize;
+ },
+ onLoads(pages, params = {}) {
+ // this.$message.success("分页信息:" + JSON.stringify(pages));
+ // this.pages.total = 40;
+ // console.log(1)
+ this.loadings = true;
+ // console.log(2)
+ let values = {
+ ...params,
+ };
+ // console.log(3)
+ // getListliu(1, 10, {}, val.id).then((res) => {
+ var useId = this.onceData.deptId;
+ // console.log(4)
+ getListliu(pages.currentPage, pages.pageSize, values, useId).then(
+ (res) => {
+ // console.log(5)
+ // console.log(pages.currentPage, pages.pageSize, values, useId,332332)
+ // console.log(this.datas);
+ // getListliu('1', '10', {}, '1353972967828533249').then((res) => {
+ //拿到数据
+ this.datas = res.data.data.records;
+ // console.log(this.datas);
+ // console.log(pages.currentPage);
+ // console.log(pages.pageSize);
+ // console.log(this.onceData);
+ const data = res.data.data;
+ this.pages.total = data.total;
+ this.changeDataOpen(this.datas);
+ this.getMout(this.onceData.deptId);
+ this.loadings = false;
+ }
+ );
+ },
},
+ mounted() {},
};
</script>
@@ -1106,4 +1377,77 @@
.el-input__inner {
width: aotu;
}
+.right-open {
+ //右侧弹窗样式
+ display: flex;
+ justify-content: center;
+ align-items: Center;
+ overflow: hidden;
+
+ .el-dialog {
+ margin: 0 auto !important;
+ height: 100%;
+ overflow: hidden;
+ position: fixed;
+ top: 0;
+ right: 0;
+ .el-dialog__body {
+ position: absolute;
+ left: 0;
+ top: 54px;
+ bottom: 0;
+ right: 0;
+ padding: 0;
+ z-index: 1;
+ overflow: hidden;
+ overflow-y: auto;
+ }
+ }
+ @keyframes dialog-fade-in {
+ 0% {
+ transform: translate3d(0, 0, 0, 100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translate3d(0, 0, 0, 0);
+ opacity: 1;
+ }
+ }
+ @keyframes dialog-fade-out {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+ 100% {
+ transform: translate3d(0, 0, 0);
+ opacity: 0;
+ }
+ }
+ .r-o-our {
+ width: calc(100% - 2px);
+ height: calc(100% - 28px);
+ // border: hotpink 1px solid;
+ overflow: auto;
+ }
+}
+.diaoxianl {
+ border: 1px solid #fff;
+ color: #fff;
+ background-color: #cdcdcd;
+}
+.zaixianl {
+ border: 1px solid #fff;
+ color: #fff;
+ background-color: #32c1a2;
+}
+.guzhagnl {
+ border: 1px solid #fff;
+ color: #fff;
+ background-color: #f49966;
+}
+.baojinl {
+ border: 1px solid #fff;
+ color: #fff;
+ background-color: #f35b5b;
+}
</style>
--
Gitblit v1.9.3