From e2234fabe971a539fcffd1e0dec1f5cedd6078fa Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 12 Apr 2021 09:39:38 +0800
Subject: [PATCH] 修改，图例，top长度，省份间距，标题文字
---
src/views/realTimePolice/real.vue | 24 ++++
src/components/liu-legend/Legend.vue | 54 ++++++++++
src/views/dataL/dataL.vue | 126 +++++++++++++++++++-----
src/views/clientManagement/clientManagement.vue | 18 +++
src/views/system/cs.vue | 53 ++++++----
5 files changed, 227 insertions(+), 48 deletions(-)
diff --git a/src/components/liu-legend/Legend.vue b/src/components/liu-legend/Legend.vue
new file mode 100644
index 0000000..72570c6
--- /dev/null
+++ b/src/components/liu-legend/Legend.vue
@@ -0,0 +1,54 @@
+<template>
+ <span id="l-legendOur">
+ <span v-for="(value,index) in datas" :key="index" class="l-l-o">
+ <span class="l-l-Img" :style="{backgroundColor: value.color}"></span>
+ <span class="l-l-Text">{{value.text}}</span>
+ </span>
+ </span>
+</template>
+<script>
+import { color } from "echarts"
+
+
+export default ({
+ props:['datas'],
+ data(){
+ return{
+ datalist:[//示例数据格式
+ {
+ color: 'rgb(233, 39, 25)',
+ text: '掉线'
+ },
+ {
+ color: 'black',
+ text: '在线'
+ }
+ ]
+ }
+ }
+})
+</script>
+
+<style lang="scss" >
+#l-legendOur{
+ position: absolute;
+ right: 0;
+ .l-l-o{
+ color: rgba($color: #000000, $alpha: .5);
+ position: relative;
+ right: 150px;
+ margin-left: 10px;
+ font-size: 12px;
+ font-weight: 300;
+ font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
+ }
+ .l-l-Img{
+ display: inline-block;
+ width: 7px;
+ height: 7px;
+ // border: 1px solid rgb(17, 198, 253);
+ border-radius: 7px;
+ margin-right: 7px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index 2f1ee48..5612908 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -37,6 +37,9 @@
v-if="permission.clientManagement_delete"
@click="handleDelete">删 除
</el-button>
+ <span><!--图例 components-->
+ <Legend :datas="datalistLIU"></Legend>
+ </span>
</template>
@@ -193,13 +196,28 @@
import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client";
import {mapGetters} from "vuex";
import axios from "axios";
+ import Legend from '../../components/liu-legend/Legend'
export default {
+ components:{
+ Legend,
+ },
created() {
//this.payWin();
},
data() {
return {
+ //legend-liu数据
+ datalistLIU:[
+ {
+ color: 'rgb(233, 39, 25)',
+ text: '掉线'
+ },
+ {
+ color: 'black',
+ text: '在线'
+ }
+ ],
form: {},
query: {},
showMap: false,
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index c415d3c..32577e2 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -12,7 +12,8 @@
:class="{
'l-t-s-grey': state == dataState[0],
'l-t-s-green': state == dataState[1],
- 'l-t-s-red': state == dataState[2],
+ 'l-t-s-yewllo': state == dataState[3],
+ 'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
></span>
@@ -133,7 +134,7 @@
{{ value.year }}年
</p>
<div class="l-m-2-m-tablemain">
- <el-table :data="value.data" style="width: 100%">
+ <el-table :data="value.data" style="width: 100%" highlight-current-row @current-change="handleCurrentChange"><!--highlight-current-row: 单选，current-change单选事件-->
<el-table-column type="index"> </el-table-column>
<el-table-column label="日期" prop="day">
</el-table-column>
@@ -158,8 +159,9 @@
<el-tag>{{ props.row.state }}</el-tag>
</template>
</el-table-column>
- <el-table-column label="跳转实时" prop="">
- </el-table-column>
+ <!-- <el-table-column label="跳转实时" prop="">
+
+ </el-table-column> -->
</el-table>
</div>
</div>
@@ -436,8 +438,6 @@
></el-input>
</el-form-item>
</el-col>
- </el-row>
- <el-row>
<el-col span="12">
<el-form-item label="心跳时间">
<el-input
@@ -534,7 +534,7 @@
width="100%"
height="100%"
></iframe> -->
-
+ <!-- <button @click="re">刷新</button> -->
<iframe
id="detailMap"
ref="detailMap"
@@ -591,7 +591,13 @@
isRecord: true,
screens: false,
//复选框
- dataState: ["掉线", "在线", "报警"], //[grey,green,red][0,1,2]
+ dataState: ["掉线", "在线", '故障', "预警"],
+ // [grey,green,red][
+ // onlineStatus = 0,
+ // onlineStatus = 1,
+ // state!= "",
+ // jtype != 2
+ // ]
checkAll: false,
checkedCities: [], //选择的
cities: cityOptions,
@@ -839,9 +845,9 @@
this.myChart.setOption(option);
this.myChart.hideLoading();
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener("resize", function () {
- myChart.resize();
- });
+ // window.addEventListener("resize", function () {
+ // this.myChart.resize();
+ // });
},
modifyl() {
//right 修改按钮
@@ -933,12 +939,28 @@
},
stetDetails(d) {
this.name = "无数据" && d.deviceName;
- this.state =
- "无数据" && this.a.dtype == 0
- ? this.dataState[0]
- : this.a.dtype == 1
- ? this.dataState[1]
- : this.dataState[2];
+ //设备状态
+ // [grey,green,red][
+ // onlineStatus = 0,
+ // onlineStatus = 1,
+ // state!= "",
+ // jtype != 2
+ // ]
+ var states,
+ o = this.a.onlineStatus,
+ s = this.a.state,
+ j = this.a.jtype;
+ if(o == 0){
+ states = '掉线';
+ }else if(o == 1){
+ states = '在线';
+ }else if(s != ""){
+ states = '故障';
+ }else if(j != 2){
+ states = '预警';
+ }
+ this.state = "无数据" && states;
+
this.evaluate = "空气质量";
this.machineCode = "无数据" && d.deviceNumber;
this.smoke = "烟雾";
@@ -947,7 +969,8 @@
this.contacts = "无数据" && d.oneContacts;
this.calls = "无数据" && d.onePhone;
this.labels = ["无数据"] && [d.deviceType];
- this.imgsl = ["no"];
+ var imgD = ["no"];
+ this.imgsl = ["no"] && imgD;
this.deploymentTime = "无数据" && d.stime;
this.detailsData = {
@@ -1037,6 +1060,18 @@
creates(i, tData);
}
}
+ for(var k1 in Num){//添加序号
+ var n2 = Num[k1];
+ for(var k2 in n2){
+ if(k2 == 'year'){continue};
+ // console.log(n2[k2])
+ var n3 = n2[k2];
+ for(var k3 in n3){
+ // console.log(+k3 + 1);
+ n3[k3].i = +k3 + 1;
+ }
+ }
+ }
// console.log(Num);
this.eventDetaill = Num;
this.eventDetails = this.eventDetaill; //载入历史事件数据
@@ -1060,6 +1095,22 @@
// console.log(dataM);
this.numdatalist = dataM;
this.startEcharts01();
+ },
+ getMap() {
+ window.frames[0].init("DetailMap", {
+ x: this.a.jd,
+ y: this.a.wd,
+ });
+ },
+ re() {
+ // var _body = window.parent;
+ // var _iframe1=_body.document.getElementById('detailMap');
+ // window.onbeforeunload=function(){};
+ // _iframe1.contentWindow.location.reload(true);
+ location.reload();
+ },
+ handleCurrentChange(val){
+ console.log(val.i)
}
},
created() {
@@ -1068,7 +1119,7 @@
this.a = this.$route.query;
this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
this.myDeviceNumber = this.$route.query.deviceNumber;
-
+ // console.log(this.a);
// console.log(this.myDeviceNumber);
this.getdata();
this.getdataG();
@@ -1078,12 +1129,19 @@
this.loginEcharts01(); //载入折线图等待数据
// this.eventDetails = this.eventDetaill;//载入历史事件数据
// this.doEvents();
- this.$refs.detailMap.onload = () => {
- window.frames[0].init("DetailMap", {
- x: this.a.jd,
- y: this.a.wd,
- });
- };
+ // var timel = setTimeout(() => {
+ this.$refs.detailMap.onload = () => {
+ // window.frames[0].init("DetailMap", {
+ // x: this.a.jd,
+ // y: this.a.wd,
+ // });
+ if (window.frames[0].init) {
+ this.getMap();
+ } else {
+ // this.re();
+ this.getMap();
+ }
+ };
},
};
</script>
@@ -1160,8 +1218,11 @@
.l-t-s-green {
background-color: rgb(41, 202, 135);
}
+ .l-t-s-yewllo{
+ background-color: rgb(240, 181, 20);
+ }
.l-t-s-red {
- background-color: rgb(243, 75, 75);
+ background-color: rgba(247, 28, 28, 0.877);
}
}
}
@@ -1271,7 +1332,12 @@
.l-m-2-main {
width: 100%;
height: 370px;
- overflow: scroll;
+ // overflow: scroll;
+ overflow-y: scroll;//滚动条
+ scrollbar-color: transparent transparent;
+ scrollbar-track-color: transparent;
+ -ms-scrollbar-track-color: transparent;
+
// border: 1px solid rg b(23, 66, 209);
.l-m-2-m-not {
display: flex;
@@ -1368,7 +1434,9 @@
display: flex;
align-items: center;
justify-content: space-between;
+ // border: 1px solid rgb(148, 199, 159);
padding: 10px 0 10px 0;
+ margin-bottom: 5px;
}
.r-b-t-left {
display: block;
@@ -1401,8 +1469,10 @@
}
.r-b-map {
height: 500px;
- border: 1px solid rgba(109, 109, 109, 0.2);
+ // border: 1px solid rgba(109, 109, 109, 0.2);
#detailMap {
+ position: relative;
+ top: 25px;
width: 100%;
height: 500px;
}
diff --git a/src/views/realTimePolice/real.vue b/src/views/realTimePolice/real.vue
index c46d4ef..3b88a0f 100644
--- a/src/views/realTimePolice/real.vue
+++ b/src/views/realTimePolice/real.vue
@@ -66,6 +66,9 @@
@click="getQBdata(3)"
>全部
</el-button>
+ <span>
+ <Legend :datas="datalistLIU"></Legend>
+ </span>
</template>
<template slot-scope="{ row }" slot="jtype">
@@ -408,9 +411,30 @@
import Recorder from "js-audio-recorder";
+import Legend from '../../components/liu-legend/Legend'
+
export default {
+ components:{
+ Legend,
+ },
data() {
return {
+ //legend-liu数据
+ datalistLIU:[
+ {
+ color: 'rgb(233, 39, 25)',
+ text: '未处理'
+ },
+ {
+ color: 'rgb(17, 198, 253)',
+ text: '处理中'
+ },
+ {
+ color: 'black',
+ text: '已处理'
+ }
+ ],
+
showMap: false,
hls: "",
videoSource: "",
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index aef990b..af4bced 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -104,6 +104,7 @@
viewBtn: true,
//dialogType: 'drawer',
dialogClickModal: false,
+ // searchSize: 'mini',
column: [
{
label: "客户ID",
@@ -124,6 +125,7 @@
search: true,
width: 190,
span: 12,
+ searchSpan: 3,
rules: [{
required: true,
message: "请输入参数名称",
@@ -135,6 +137,7 @@
prop: "linkman",
width: 100,
search: true,
+ searchSpan: 3,
rules: [{
required: true,
message: "请输入联系人",
@@ -200,23 +203,23 @@
className: "cityClass3"
},
{
- label: '坐标',
+ label: '地址',
prop: 'map',
hide: true,
span: 24,
component: "AvueMap",
},
{
- label: '经度',
- hide: true,
- addDisplay: false,
- prop: 'jd',
- },
- {
label: '纬度',
hide: true,
addDisplay: false,
prop: 'wd',
+ },
+ {
+ label: '经度',
+ hide: true,
+ addDisplay: false,
+ prop: 'jd',
},
{
label: "账号额度",
@@ -528,15 +531,16 @@
}
};
},
- watch:{
- 'form.map':{// form是表单或者表格绑定的数据集，v-model='form'
- handler(val){
- this.form.jd = val.latitude
- this.form.wd = val.longitude
- },
- immediate: true
- }
- },
+ //报错: TypeError: val is undefined 处理时间2021.4.10，处理人 liuyg
+ // watch:{
+ // 'form.map':{// form是表单或者表格绑定的数据集，v-model='form'
+ // handler(val){
+ // this.form.jd = val.latitude
+ // this.form.wd = val.longitude
+ // },
+ // immediate: true
+ // }
+ // },
computed: {
...mapGetters(["userInfo", "permission"]),
permissionList() {
@@ -849,42 +853,49 @@
};
</script>
-<style>
+<style lang="scss">
+$city-m-l: 10px;
/*页面样式*/
.el-card__body .cityClass1 {
width: 155px;
padding-right: 0px !important;
+ margin-left: $city-m-l;
}
.el-card__body .cityClass2 {
width: 100px;
padding-left: 0px !important;
padding-right: 0px !important;
+ margin-left: $city-m-l;
}
.el-card__body .cityClass3 {
width: 100px;
padding-left: 0px !important;
padding-right: 0px !important;
+ margin-left: $city-m-l;
}
/*新增窗体样式*/
.el-dialog .cityClass1 {
width: 220px;
padding-right: 0px !important;
+ margin-left: $city-m-l;
}
.el-dialog .cityClass2 {
- width: 110px;
+ width: 130px;
padding-left: 5px !important;
padding-right: 5px !important;
+ margin-left: $city-m-l;
}
.el-dialog .cityClass3 {
- width: 110px;
+ width: 130px;
padding-left: 0px !important;
padding-right: 0px !important;
+ margin-left: $city-m-l;
}
.cityClass2 div label {
@@ -899,5 +910,7 @@
font-size: 15px;
}
-
+.el-input__inner{
+ width: aotu;
+}
</style>
--
Gitblit v1.9.3