Skip to content

S
SmartAgricWeb
Commit 0f15f49b authored by zhanglw's avatar zhanglw
Browse files
Options

x

parent 39decde7
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 128 deletions
src/api/common.js
View file @ 0f15f49b
......@@ -41,6 +41,19 @@ export const HttpReq = {
},
// web端接口列表
webClientApi: {
getStatic: function(params) {
return request({
url: 'api/static?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
population: function(params) {
return request({
url: 'api/population?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
api: null
}
}
src/views/daping.vue
View file @ 0f15f49b
......@@ -12,36 +12,36 @@
<div class="label">
<span>设备总数</span>
</div>
<div class="val">{{ vData1.xx }}</div>
<div class="val">{{ vData1.equipmentNumbers }}</div>
</li>
<li>
<div class="label">
<span>在线率</span>
</div>
<div class="val">{{ vData1.xx }}</div>
<div class="val">{{ vData1.onlineRate }}%</div>
</li>
<li>
<div class="label">
<span>设备在线</span>
</div>
<div class="val">{{ vData1.xx }}</div>
<div class="val">{{ vData1.onlineNumbers }}</div>
</li>
<li>
<div class="label">
<span>设备离线</span>
</div>
<div class="val">{{ vData1.xx }}</div>
<div class="val">{{ vData1.offlineNumbers }}</div>
</li>
</ul>
</div>
</div>
</div>
<div class="box_div">
<div class="box_title"><span class="touch" @click="visible=!visible">{{ currenIndex+1 }}号基地设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
<div class="box_title"><span class="touch" @click="visible=!visible">{{ currentBase.proName }}基地设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
<div class="select-box">
<ul v-show="visible">
<li v-for="(item,index) in vDataMap.list" :key="index" :class="currentBase===item?'active':''" class="touch" @click="changeItem(item,index)">
{{ index+1 }}号基地
<li v-for="(item,index) in vDataMap.proListInfo" :key="index" :class="currentBase===item?'active':''" class="touch" @click="changeItem(item,index)">
{{ item.proName }}
</li>
</ul>
</div>
......@@ -116,45 +116,15 @@
</div>
</div>
<div class="box_div">
<div class="box_title"><span>近一个月基地设备报警分析</span></div>
<div class="box_title"><span>近一个月基地设备报警统计</span></div>
<div class="ct-box-3" style="height:160px;overflow:auto;padding-bottom:8px">
<div class="ctn">
<ul>
<li>
<div class="label">
<span>一号基地</span>
</div>
<div class="val">{{ vData3.xx }}</div>
</li>
<li>
<div class="label">
<span>二号基地</span>
</div>
<div class="val">{{ vData3.xx }}</div>
</li>
<li>
<div class="label">
<span>三号基地</span>
</div>
<div class="val">{{ vData3.xx }}</div>
</li>
<li>
<div class="label">
<span>四号基地</span>
</div>
<div class="val">{{ vData3.xx }}</div>
</li>
<li>
<div class="label">
<span>五号基地</span>
</div>
<div class="val">{{ vData3.xx }}</div>
</li>
<li>
<li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index">
<div class="label">
<span>六号基地</span>
<span>{{ item.proName }}</span>
</div>
<div class="val">{{ vData3.xx }}</div>
<div class="val">{{ item.alarmNumber }}</div>
</li>
</ul>
</div>
......@@ -166,15 +136,17 @@
<dl>
<dt>
<div>监测项</div>
<div style="text-align:center">基地名称</div>
<div>基地名称</div>
<div style="text-align:center">报警原因</div>
<div style="text-align:center">报警值</div>
<div style="text-align:center">时间</div>
</dt>
<dd v-for="(item,index) in vData4.list" :key="index">
<div>{{ item.name }}</div>
<div>{{ item.name }}</div>
<div style="text-align:center">{{ item.name }}</div>
<div style="text-align:center">{{ item.name }}</div>
<dd v-for="(item,index) in vData34.realTimeAlarm" :key="index">
<div>{{ item.detectionItems }}</div>
<div>{{ item.proName }}</div>
<div style="text-align:center">{{ item.alarmReason }}</div>
<div style="text-align:center">{{ item.alarmData }}</div>
<div style="text-align:center">{{ item.alarmTime }}</div>
</dd>
</dl>
</div>
......@@ -187,17 +159,17 @@
<div class="map_bottom_box">
<div>该地图上显示所有当前基地（点击选择查看）：</div>
<div style="padding-top:3px;height:78px;overflow:auto">
<div v-for="(item,index) in vDataMap.list" :key="'ml_'+index" class="btn touch" @click="changeItem(item,index)">{{ index+1 }}号基地：{{ item.name }}</div>
<div v-for="(item,index) in vDataMap.proListInfo" :key="'ml_'+index" class="btn touch" @click="changeItem(item,index)">{{ item.proName }}</div>
</div>
</div>
</div>
</div>
<div class="center_div_down">
<div class="box_c">
<div class="box_title"><span>企业介绍</span></div>
<div class="box_title"><span>基地介绍</span></div>
<div class="box_b">
<el-image :src="imgSrc"/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司简介范文公司简介范文一公司简介一般包括以下几个方面： 公司概况：这里面可以包括注册时间，注册资本，公司性质， 技术力量规模，员工人数，员工素质等； 公司发展状司简介范文公司简介范文以规模。</span>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ currentBase.enterpriseIntroduction || '暂无基地介绍...' }}</span>
</div>
</div>
<div class="box_c">
......@@ -208,19 +180,19 @@
<ul>
<li>
<div class="label">
<span>{{ vData5.xx }}</span>
<span>{{ vDataMap.totalOfPersonNum || '0' }}</span>
</div>
<div class="val">农场总职工数</div>
</li>
<li>
<div class="label">
<span>{{ vData5.xx }}</span>
<span>{{ vDataMap.totalOfManNum || '0' }}</span>
</div>
<div class="val">男职工数</div>
</li>
<li>
<div class="label">
<span>{{ vData5.xx }}</span>
<span>{{ vDataMap.totalOfWomanNum || '0' }}</span>
</div>
<div class="val">女职工数</div>
</li>
......@@ -260,6 +232,8 @@ require('echarts/theme/macarons') // echarts theme
import * as utils from '@/utils'
import enterpriseImg from '@/assets/home/enterpriseImg.png'
import linePoint from '@/assets/home/point.png'
import { HttpReq } from '@/api/common'
import mark from '@/assets/home/mark.png'
export default {
data() {
......@@ -270,66 +244,61 @@ export default {
visible: false,
currenIndex: 0,
currentBase: {
name: '一号基地'
},
vData1: {
xx: '7896'
name: ''
},
vData1: {},
vData2: {
xx: '10.5'
},
vData3: {
xx: '7896'
},
vData4: {
list: [
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' }
]
},
vData5: {
xx: '180'
vData34: {
realTimeAlarm: [],
alarmList: []
},
vDataMap: {
list: [
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' }
]
proListInfo: []
},
chart1: null,
chart2: null,
chart3: null,
chart4: null,
chart5: null
chart5: null,
querySocketTimer: null
}
},
mounted() {
this.$nextTick(() => {
this.initMap()
this.loadData()
this.currentBase = this.vDataMap.list[this.currenIndex]
HttpReq.webClientApi.getStatic({}).then((res) => {
this.vDataMap = res.data
this.currentBase = this.vDataMap.proListInfo[this.currenIndex]
this.initMap()
this.mapDom.setCenter([this.currentBase.proLng, this.currentBase.proLat])
this.initChart1()
this.loadData()
this.querySocketTimer = setInterval(() => {
this.loadData()
}, 30000)
})
})
},
beforeDestroy() {
if (this.querySocketTimer) {
clearInterval(this.querySocketTimer)
this.querySocketTimer = null
}
},
methods: {
changeItem(item, index) {
this.currentBase = item
this.currenIndex = index
this.visible = false
this.mapDom.setCenter([this.currentBase.proLng, this.currentBase.proLat])
this.loadData()
},
loadData() {
this.initChart1()
HttpReq.webClientApi.population({}).then((res) => {
this.vData1 = res.data.equipmentMonitoringStatus
this.vData34 = res.data
})
this.initChart2()
this.initChart3()
this.initChart4()
......@@ -344,47 +313,25 @@ export default {
zoom: 13, // 初始化地图层级
center: [119.765299, 35.789809] // 初始化地图中心点
})
let appendMarker = function(arr) {
for (var i = 0; i < arr.length; i++) {
var obj = arr[i]
var imgName = obj.name.indexOf('大棚') > -1 ? 'pointe_1' : 'pointe_2'
var icon = '/static/smartDaping/' + imgName + '.png'
var devX = obj.name.indexOf('大棚') > -1 ? -17.5 : -23.5
AMapTool.marker && AMapTool.remove(AMapTool.marker)
AMapTool.infoWindow && AMapTool.infoWindow.close()
// 经度范围[121.138398, 121.728226]
var lng = obj.jd
// 纬度范围[30.972688, 31.487611]
var lat = obj.wd
AMapTool.setCenter([lng, lat])
AMapTool.marker = new AMap.Marker({
map: AMapTool,
icon,
position: [obj.jd, obj.wd],
offset: new AMap.Pixel(devX, devX),
title: obj.name,
label: {
deviceid: obj.deviceid,
name: obj.name,
online: obj.online
}
})
AMapTool.marker.on('click', e => {
let info = '<div class="pop-info1"><div class="dis"><span>' + obj.name + "</span></div><div class='dis'><span>" + obj.deviceid + "</span></div><div class='dis'><strong>设备状态:</strong>" + `<span style='color: #999' >${obj.online}</span>` + '</div></div>'
AMapTool.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
content: info // 使用默认信息窗体框样式，显示信息内容
})
AMapTool.infoWindow.open(AMapTool, [obj.jd, obj.wd])
})
}
}
this.vDataMap.proListInfo.forEach((item)=>{
let marker = new AMap.Marker({
icon: mark,
position: new AMap.LngLat(item.proLng,item.proLat),
offset: new AMap.Pixel(-17, -17),
title: item.proName,
label: {
content: item.proName,
direction: 'bottom'
},
})
this.mapDom.add(marker);
})
}
/* eslint-enable */
},
initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
const dataX = ['1号基地', '2号基地', '3号基地', '4号基地', '5号基地']
const dataX = this.vDataMap.proListInfo.map((item) => { return item.proName })
const option = {
tooltip: {
trigger: 'item',
......@@ -465,7 +412,7 @@ export default {
])
}
},
data: utils.randNum(25, 40, dataX.length, true)
data: this.vDataMap.proListInfo.map((item) => { return item.manNum })
},
{
name: '女',
......@@ -486,7 +433,7 @@ export default {
])
}
},
data: utils.randNum(10, 30, dataX.length, true)
data: this.vDataMap.proListInfo.map((item) => { return item.womanNum })
}
]
}
......@@ -1789,6 +1736,7 @@ export default {
display: inline-block;
font-size: 12px;
margin: 5px 12px;
text-align: center;
}
.btn:hover {
color: white;
......
src/views/smart/data/Cdata.vue
View file @ 0f15f49b
......@@ -229,7 +229,7 @@ export default {
this.itemparam = query.item
}
this.QueryDataStart()
// this.QueryDataStart()
},
// 点击搜索
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment