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 | 238 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 138 insertions(+), 100 deletions(-)
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index aa0c4b8..15c292f 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -99,20 +99,35 @@
append-to-body="true"
class="right-open"
>
- <el-divider content-position="left">点击查看详情</el-divider>
+ <el-divider></el-divider>
<div class="r-o-our">
<avue-crud
:option="options"
- :data="datas"
- :table-loading="loadings"
- :page="pages"
@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>
@@ -120,7 +135,7 @@
</template>
<script>
-import { getAll, getListliu } from "@/api/client/client";
+import { getListliu, getListliuc } from "@/api/client/client";
import {
getList,
getDetail,
@@ -159,9 +174,10 @@
datasourceBox: false,
dialogVisible: false, //右侧弹窗
onceData: {}, //数据
- datas: "", //cc
+ datas: [], //cc
loadings: true, //等待
querys: {}, //搜索
+ isEdit:false,
pages: {
pageSize: 10,
currentPage: 1,
@@ -173,6 +189,7 @@
height: "auto",
indexLabel: "序号",
index: true,
+ card: true,
menu: false,
header: false,
searchShow: true,
@@ -209,46 +226,21 @@
prop: "deviceNumber",
width: 110,
},
- // {
- // label: "使用方",
- // search: true,
- // // searchValue: this.getAnimalType(),
- // prop: "deptId",
- // width: 200,
- // type: "select",
- // dicUrl: "/api/blade-system/dept/trees",
- // dicData: [], //getUser中直接赋值
- // // [
- // // {
- // // label: "正常",
- // // value: 0
- // // },
- // // {
- // // label: "异常",
- // // value: 1
- // // }
- // // ],
- // },
{
- label: "使用方",
- prop: "deptId",
- width: 200,
- type: "tree",
- dicUrl: "/api/blade-system/dept/trees",
- multiple: true,
- dicData: [],
- checkStrictly:true,
- props: {
- label: "title"
- },
- rules: [
- {
- required: true,
- message: "请选择使用方",
- trigger: "click"
- }
- ]
- },
+ 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",
@@ -258,6 +250,8 @@
label: "设备状态",
prop: "states",
width: 90,
+ slot: true,
+ // className: "cityClass1",
},
],
},
@@ -384,30 +378,30 @@
labelWidth: "0",
className: "cityClass3",
},
- {
- label: "地址",
- prop: "address",
- span:10,
- // labelWidth: '60',
- hide: true,
- },
- {
- label: null,
- prop: "map",
- labelWidth: "0",
- searchSpan:0,
- maxlength:0,
- hide: true,
- span: 2,
- // display:false,
- component: "AvueMap"
- },
+ {
+ label: "地址",
+ prop: "address",
+ span: 10,
+ // labelWidth: '60',
+ hide: true,
+ },
+ {
+ label: null,
+ prop: "map",
+ labelWidth: "0",
+ searchSpan: 0,
+ maxlength: 0,
+ hide: true,
+ span: 2,
+ // display:false,
+ component: "AvueMap",
+ },
{
label: "纬度",
hide: true,
addDisplay: false,
prop: "wd",
- span:6
+ span: 6,
},
{
label: "经度",
@@ -415,7 +409,7 @@
hide: true,
addDisplay: false,
prop: "jd",
- span:5
+ span: 5,
},
{
label: "账号额度",
@@ -734,22 +728,34 @@
// form是表单或者表格绑定的数据集，v-model='form'
handler(val) {
if (val) {
- getDetail(this.form.id).then((res) => {
- this.form = res.data.data;
- })
- 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
+ );
}
- 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;
- that.form.city = val.addressComponent.city;
+ if (val.addressComponent.city == "") {
+ that.form.city = val.addressComponent.province;
+ } else {
+ that.form.city = val.addressComponent.city;
+ }
that.form.district = val.addressComponent.district;
}
},
@@ -899,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;
@@ -990,6 +997,10 @@
});
}
});
+ }
+
+ if (["edit"].includes(type)) {
+ that.isEdit=false;
}
done();
},
@@ -1139,6 +1150,7 @@
},
changeDataOpen(dat) {
//处理弹出框数据
+ console.log(dat);
if (dat.length > 0) {
for (var key in dat) {
let states;
@@ -1166,21 +1178,29 @@
}
}
},
+ 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 = [];
- var a = null;
for (var key in dat) {
- if (a != dat[key].ownership) {
- this.users.push({
- label: dat[key].ownership,
- value: dat[key].ownership,
- });
- }
- a = dat[key].ownership;
+ this.users.push({
+ label: dat[key].title,
+ value: dat[key].id,
+ });
}
}
+ // this.users.push([
+ // {
+
+ // }
+ // ])
this.options.column[2].dicData = this.users;
},
searchResets() {
@@ -1208,40 +1228,38 @@
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(res);
- console.log(pages.currentPage);
- console.log(pages.pageSize);
- console.log(values);
- console.log(this.onceData);
+ // 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.getUser(this.datas);
+ this.getMout(this.onceData.deptId);
this.loadings = false;
}
);
},
},
- mounted() {
- // getAll().then((res) => {
- // //测试数据
- // this.datas = res.data.data;
- // this.changeDataOpen(this.datas);
- // this.getUser(this.datas)
- // console.log(this.datas);
- // });
- },
+ mounted() {},
};
</script>
@@ -1368,10 +1386,10 @@
.el-dialog {
margin: 0 auto !important;
- height: 98%;
+ height: 100%;
overflow: hidden;
position: fixed;
- top: 1%;
+ top: 0;
right: 0;
.el-dialog__body {
position: absolute;
@@ -1412,4 +1430,24 @@
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