From 9af0ba7e5a51b187f762234755ed1559ab91f5f5 Mon Sep 17 00:00:00 2001
From: yupan <yupanx@163.com>
Date: Mon, 07 Nov 2022 16:23:37 +0800
Subject: [PATCH] 1、监测因子趋势时间控件修改 2、监测因子对比echarts显示修改
---
src/views/car/index.vue | 230 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 113 insertions(+), 117 deletions(-)
diff --git a/src/views/car/index.vue b/src/views/car/index.vue
index 9c5198a..7ed41bd 100644
--- a/src/views/car/index.vue
+++ b/src/views/car/index.vue
@@ -1,10 +1,13 @@
<template>
<div class="main_body">
- <el-container style="height: 100%">
+ <el-container
+ style="height: 100%"
+ >
<el-aside
- v-if="this.$store.state.aside"
- width="300px"
- style="background-color: rgb(238, 241, 246); padding-top: 10px"
+ v-if="this.$store.state.aside"
+ width="300px"
+ style="background-color: rgb(238, 241, 246);padding-top:10px"
+
>
<span
style="
@@ -17,17 +20,12 @@
>
<el-menu style="margin-top: 10px">
<el-menu-item
- v-for="(item, index) in defaultData"
- :key="index"
- style="
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 0;
- border-bottom: 1px solid #eee;
- "
- :index="(index + 1 + '-' + index + 1).toString()"
- @click="changeCarData(item)"
+
+ v-for="(item,index) in defaultData"
+ :key="index"
+ style="display: flex;justify-content: space-between;align-items: center;padding-right: 0;border-bottom:1px solid #eee"
+ :index="(index+1 + '-' + index + 1).toString()"
+ @click="changeCarData(item)"
>
<span>{{ item.name }}</span>
<i
@@ -57,20 +55,21 @@
>
</span>
<span
- v-for="(item, index) in snesorParams"
- :key="index"
- class="left"
- :class="{ click: changeColor == index }"
- @click="changeCode(index)"
- >{{ item }}
+
+ v-for="(item, index) in snesorParams"
+ :key="index"
+ class="left"
+ :class="{ click: changeColor == index }"
+ @click="changeCode(index)"
+ >{{ item }}
</span>
<span
- v-for="(item, index) in viewOptions"
- :key="index + '-only'"
- class="right"
- :class="{ click: changeColor1 == index }"
- @click="changeCode1(index)"
- >{{ item }}
+ v-for="(item,index) in viewOptions"
+ :key="index+ '-only'"
+ class="right"
+ :class="{ click: changeColor1 == index }"
+ @click="changeCode1(index)"
+ >{{ item }}
</span>
<span v-if="webSocketView" style="float: right; margin: 2px 10px 0 0">
<el-button size="medium" type="primary" @click="wsStart()"
@@ -111,15 +110,14 @@
<!-- />-->
<!-- </el-select>-->
<el-date-picker
- style="float: right; margin-right: 10px"
- @change="dateChange"
- v-model="dateValue"
- type="datetimerange"
- :picker-options="threeOptions"
- range-separator="���"
- start-placeholder="������������"
- end-placeholder="������������"
- >
+ style="float:right;margin-right:10px;"
+ @change="dateChange"
+ v-model="dateValue"
+ type="datetimerange"
+ :picker-options="threeOptions"
+ range-separator="���"
+ start-placeholder="������������"
+ end-placeholder="������������">
</el-date-picker>
<!-- ������/��������������������� -->
<el-select
@@ -133,10 +131,10 @@
"
>
<el-option
- v-for="item in dataTypeList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="item in dataTypeList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
/>
</el-select>
</div>
@@ -174,20 +172,19 @@
<!-- <el-descriptions title="���������������" border>
</el-descriptions> -->
<div
- style="
- font-size: 16px;
- font-weight: 700;
- margin: 10px 0 20px 0;
- font-size: 16px;
- font-weight: 700;
- color: #303133;
- "
- >
- ���������������
- </div>
+
+ style="font-size: 16px;font-weight: 700;margin:10px 0 20px 0;font-size: 16px;
+ font-weight: 700;color: #303133;"
+ >���������������</div>
<el-table :data="sensorTableData" border>
- <el-table-column prop="sensorName" label="������" />
- <el-table-column prop="unit" label="������" />
+ <el-table-column
+ prop="sensorName"
+ label="������"
+ />
+ <el-table-column
+ prop="unit"
+ label="������"
+ />
<el-table-column label="������">
<template slot-scope="scope">
<el-input v-model="scope.row.tab1" placeholder="���������������" />
@@ -435,7 +432,10 @@
dataType: 'history',
responseJSON: null,
radio1: null,
- viewOptions: ['������', '������'],
+ viewOptions: [
+ '������',
+ '������'
+ ],
dateValue: [],
pickerOptions: {
disabledDate(time) {
@@ -488,6 +488,25 @@
return time.getTime() > new Date()
}
},
+ },
+ timeOne: '',
+ threeOptions: {
+ onPick: ({ maxDate, minDate }) => {
+ // ������������ ������������
+ this.timeOne = minDate.getTime() // ��������������������� ������������������
+ // ������������������������������������������������������������
+ if (maxDate) this.timeOne = ''
+ },
+ disabledDate: time => {
+ if (this.timeOne) {
+ const WEEK = 3 * 24 * 3600 * 1000 - 1 // ������������3���������1��������� ������3���������
+ const minTime = this.timeOne// ������������
+ const maxTime = this.timeOne + WEEK // ������������
+ return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
+ } else {
+ return time.getTime() > new Date()
+ }
+ }
},
sensorDate: null,
noneData: false,
@@ -640,7 +659,7 @@
// console.log(n)
},
deep: true,
- immediate: true,
+ immediate: true
// timeValue: {
// handler(newVal, oldVal) {
// this.sensorTime = this.newTime()
@@ -683,7 +702,7 @@
// ������������������
newTime2(timeArr) {
var arr = []
- timeArr.map((v) => {
+ timeArr.map(v => {
var date = new Date(v)
var y = date.getFullYear()
var m = date.getMonth() + 1
@@ -742,15 +761,13 @@
getCarData() {
this.$request({
url: '/cruiser/selectCruisers',
- method: 'get',
+ method: 'get'
+ }).then(res => {
+ this.defaultData = res.data
+ this.carMac = res.data[0].mac
+ }).catch(err => {
+ console.log(err)
})
- .then((res) => {
- this.defaultData = res.data
- this.carMac = res.data[0].mac
- })
- .catch((err) => {
- console.log(err)
- })
},
// ������mac������������������������������
getMacDate() {
@@ -759,23 +776,21 @@
url: '/cruiser/getDates',
method: 'get',
params: {
- mac: this.carMac,
- },
+ mac: this.carMac
+ }
+ }).then(res => {
+ for (let i = 0; i < res.data.length; i++) {
+ // this.isDataList[i].value = res.data.data[i]
+ // this.isDataList[i].label = res.data.data[i]
+ // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] }
+ this.isDataList.push({
+ value: res.data[i],
+ label: res.data[i]
+ })
+ }
+ }).catch(err => {
+ console.log(err)
})
- .then((res) => {
- for (let i = 0; i < res.data.length; i++) {
- // this.isDataList[i].value = res.data.data[i]
- // this.isDataList[i].label = res.data.data[i]
- // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] }
- this.isDataList.push({
- value: res.data[i],
- label: res.data[i],
- })
- }
- })
- .catch((err) => {
- console.log(err)
- })
},
// ���������������������������������������
Rad(d) {
@@ -787,16 +802,8 @@
var radLat2 = this.Rad(lat2)
var a = radLat1 - radLat2
var b = this.Rad(lng1) - this.Rad(lng2)
- var s =
- 2 *
- Math.asin(
- Math.sqrt(
- Math.pow(Math.sin(a / 2), 2) +
- Math.cos(radLat1) *
- Math.cos(radLat2) *
- Math.pow(Math.sin(b / 2), 2)
- )
- )
+ var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
+ Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000 // ���������������
// s=s.toFixed(4);
@@ -908,12 +915,7 @@
if (that.msgTemp.length < 2) {
that.msgTemp.push({ lat: lat, lon: lon })
}
- var distance = that.GetDistance(
- that.msgTemp[0].lat,
- that.msgTemp[0].lon,
- that.msgTemp[1].lat,
- that.msgTemp[1].lon
- )
+ var distance = that.GetDistance(that.msgTemp[0].lat, that.msgTemp[0].lon, that.msgTemp[1].lat, that.msgTemp[1].lon)
if (distance >= 0.05) {
that.msgTemp.shift()
that.msgTemp.push({ lat: lat, lon: lon })
@@ -940,9 +942,9 @@
params: {
mac: this.carMac,
time1: this.sensorDate[0],
- time2: this.sensorDate[1],
- },
- }).then((res) => {
+ time2: this.sensorDate[1]
+ }
+ }).then(res => {
if (!res.data.length) {
this.noneData = true
this.loading = false
@@ -997,12 +999,7 @@
point.a21005 = parseFloat(value.a21005).toFixed(3)
point.a05024 = parseInt(value.a05024)
point.a99054 = parseFloat(value.a99054).toFixed(3)
- if (
- value.dustld - 0 !== 0 &&
- value.dustld - 0 < 100 &&
- (that.carMac === 'p5dnd7a0243622' ||
- that.carMac === 'p5dnd7a0243625')
- ) {
+ if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
point.dustld = 100
} else {
point.dustld = value.dustld - 0
@@ -1539,14 +1536,12 @@
// point���������label������
function setLabelStyle(content, point) {
-
- var label = new BMapGL.Label(
- "<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������
- {
- offset: new BMapGL.Size(-8, -10), // label������������������������label������������������������
- position: point,
- }
- ) // label���������
+ var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������
+ {
+ offset: new BMapGL.Size(-8, -10), // label������������������������label������������������������
+ position: point
+ }
+ )// label���������
var offsetSize = new BMapGL.Size(0, 0)
var size = '10px'
if (that.map.getZoom() <= 15.5) {
@@ -1675,7 +1670,7 @@
margin: 0;
z-index: 0;
font-size: 14px;
- font-family: '������������';
+ font-family: "������������";
}
.main_body {
@@ -1698,7 +1693,7 @@
margin-top: -50px;
z-index: 11;
color: #000000;
- border: 2px solid #ff7f50;
+ border: 2px solid #FF7F50;
font-size: 28px;
line-height: 100px;
text-align: center;
@@ -1790,8 +1785,9 @@
border-radius: 0 5px 5px 0;
border-right: 1px solid #aaa;
}
-.carTop {
- & > .left:nth-child(1) {
+
+.carTop{
+ &>.left:nth-child(1){
border-radius: 5px 0 0 5px;
}
}
--
Gitblit v1.8.0