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 = { ...@@ -41,6 +41,19 @@ export const HttpReq = {
}, },
// web端接口列表 // web端接口列表
webClientApi: { 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 @@ ...@@ -12,36 +12,36 @@
<div class="label"> <div class="label">
<span>设备总数</span> <span>设备总数</span>
</div> </div>
<div class="val">{{ vData1.xx }}</div> <div class="val">{{ vData1.equipmentNumbers }}</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>在线率</span> <span>在线率</span>
</div> </div>
<div class="val">{{ vData1.xx }}</div> <div class="val">{{ vData1.onlineRate }}%</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>设备在线</span> <span>设备在线</span>
</div> </div>
<div class="val">{{ vData1.xx }}</div> <div class="val">{{ vData1.onlineNumbers }}</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>设备离线</span> <span>设备离线</span>
</div> </div>
<div class="val">{{ vData1.xx }}</div> <div class="val">{{ vData1.offlineNumbers }}</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="box_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"> <div class="select-box">
<ul v-show="visible"> <ul v-show="visible">
<li v-for="(item,index) in vDataMap.list" :key="index" :class="currentBase===item?'active':''" class="touch" @click="changeItem(item,index)"> <li v-for="(item,index) in vDataMap.proListInfo" :key="index" :class="currentBase===item?'active':''" class="touch" @click="changeItem(item,index)">
{{ index+1 }}号基地 {{ item.proName }}
</li> </li>
</ul> </ul>
</div> </div>
...@@ -116,45 +116,15 @@ ...@@ -116,45 +116,15 @@
</div> </div>
</div> </div>
<div class="box_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="ct-box-3" style="height:160px;overflow:auto;padding-bottom:8px">
<div class="ctn"> <div class="ctn">
<ul> <ul>
<li> <li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index">
<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>
<div class="label"> <div class="label">
<span>六号基地</span> <span>{{ item.proName }}</span>
</div> </div>
<div class="val">{{ vData3.xx }}</div> <div class="val">{{ item.alarmNumber }}</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -166,15 +136,17 @@ ...@@ -166,15 +136,17 @@
<dl> <dl>
<dt> <dt>
<div>监测项</div> <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>
<div style="text-align:center">时间</div> <div style="text-align:center">时间</div>
</dt> </dt>
<dd v-for="(item,index) in vData4.list" :key="index"> <dd v-for="(item,index) in vData34.realTimeAlarm" :key="index">
<div>{{ item.name }}</div> <div>{{ item.detectionItems }}</div>
<div>{{ item.name }}</div> <div>{{ item.proName }}</div>
<div style="text-align:center">{{ item.name }}</div> <div style="text-align:center">{{ item.alarmReason }}</div>
<div style="text-align:center">{{ item.name }}</div> <div style="text-align:center">{{ item.alarmData }}</div>
<div style="text-align:center">{{ item.alarmTime }}</div>
</dd> </dd>
</dl> </dl>
</div> </div>
...@@ -187,17 +159,17 @@ ...@@ -187,17 +159,17 @@
<div class="map_bottom_box"> <div class="map_bottom_box">
<div>该地图上显示所有当前基地（点击选择查看）：</div> <div>该地图上显示所有当前基地（点击选择查看）：</div>
<div style="padding-top:3px;height:78px;overflow:auto"> <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> </div>
</div> </div>
<div class="center_div_down"> <div class="center_div_down">
<div class="box_c"> <div class="box_c">
<div class="box_title"><span>企业介绍</span></div> <div class="box_title"><span>基地介绍</span></div>
<div class="box_b"> <div class="box_b">
<el-image :src="imgSrc"/> <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> </div>
<div class="box_c"> <div class="box_c">
...@@ -208,19 +180,19 @@ ...@@ -208,19 +180,19 @@
<ul> <ul>
<li> <li>
<div class="label"> <div class="label">
<span>{{ vData5.xx }}</span> <span>{{ vDataMap.totalOfPersonNum || '0' }}</span>
</div> </div>
<div class="val">农场总职工数</div> <div class="val">农场总职工数</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>{{ vData5.xx }}</span> <span>{{ vDataMap.totalOfManNum || '0' }}</span>
</div> </div>
<div class="val">男职工数</div> <div class="val">男职工数</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>{{ vData5.xx }}</span> <span>{{ vDataMap.totalOfWomanNum || '0' }}</span>
</div> </div>
<div class="val">女职工数</div> <div class="val">女职工数</div>
</li> </li>
...@@ -260,6 +232,8 @@ require('echarts/theme/macarons') // echarts theme ...@@ -260,6 +232,8 @@ require('echarts/theme/macarons') // echarts theme
import * as utils from '@/utils' import * as utils from '@/utils'
import enterpriseImg from '@/assets/home/enterpriseImg.png' import enterpriseImg from '@/assets/home/enterpriseImg.png'
import linePoint from '@/assets/home/point.png' import linePoint from '@/assets/home/point.png'
import { HttpReq } from '@/api/common'
import mark from '@/assets/home/mark.png'
export default { export default {
data() { data() {
...@@ -270,66 +244,61 @@ export default { ...@@ -270,66 +244,61 @@ export default {
visible: false, visible: false,
currenIndex: 0, currenIndex: 0,
currentBase: { currentBase: {
name: '一号基地' name: ''
},
vData1: {
xx: '7896'
}, },
vData1: {},
vData2: { vData2: {
xx: '10.5' xx: '10.5'
}, },
vData3: { vData34: {
xx: '7896' realTimeAlarm: [],
}, alarmList: []
vData4: {
list: [
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' },
{ name: '二氧化碳' }
]
},
vData5: {
xx: '180'
}, },
vDataMap: { vDataMap: {
list: [ proListInfo: []
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' },
{ name: '种植农作物1' }
]
}, },
chart1: null, chart1: null,
chart2: null, chart2: null,
chart3: null, chart3: null,
chart4: null, chart4: null,
chart5: null chart5: null,
querySocketTimer: null
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() HttpReq.webClientApi.getStatic({}).then((res) => {
this.loadData() this.vDataMap = res.data
this.currentBase = this.vDataMap.list[this.currenIndex] 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: { methods: {
changeItem(item, index) { changeItem(item, index) {
this.currentBase = item this.currentBase = item
this.currenIndex = index this.currenIndex = index
this.visible = false this.visible = false
this.mapDom.setCenter([this.currentBase.proLng, this.currentBase.proLat])
this.loadData()
}, },
loadData() { loadData() {
this.initChart1() HttpReq.webClientApi.population({}).then((res) => {
this.vData1 = res.data.equipmentMonitoringStatus
this.vData34 = res.data
})
this.initChart2() this.initChart2()
this.initChart3() this.initChart3()
this.initChart4() this.initChart4()
...@@ -344,47 +313,25 @@ export default { ...@@ -344,47 +313,25 @@ export default {
zoom: 13, // 初始化地图层级 zoom: 13, // 初始化地图层级
center: [119.765299, 35.789809] // 初始化地图中心点 center: [119.765299, 35.789809] // 初始化地图中心点
}) })
let appendMarker = function(arr) { this.vDataMap.proListInfo.forEach((item)=>{
for (var i = 0; i < arr.length; i++) { let marker = new AMap.Marker({
var obj = arr[i] icon: mark,
var imgName = obj.name.indexOf('大棚') > -1 ? 'pointe_1' : 'pointe_2' position: new AMap.LngLat(item.proLng,item.proLat),
var icon = '/static/smartDaping/' + imgName + '.png' offset: new AMap.Pixel(-17, -17),
var devX = obj.name.indexOf('大棚') > -1 ? -17.5 : -23.5 title: item.proName,
AMapTool.marker && AMapTool.remove(AMapTool.marker) label: {
AMapTool.infoWindow && AMapTool.infoWindow.close() content: item.proName,
// 经度范围[121.138398, 121.728226] direction: 'bottom'
var lng = obj.jd },
// 纬度范围[30.972688, 31.487611] })
var lat = obj.wd this.mapDom.add(marker);
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])
})
}
}
} }
/* eslint-enable */ /* eslint-enable */
}, },
initChart1() { initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons') 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 = { const option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
...@@ -465,7 +412,7 @@ export default { ...@@ -465,7 +412,7 @@ export default {
]) ])
} }
}, },
data: utils.randNum(25, 40, dataX.length, true) data: this.vDataMap.proListInfo.map((item) => { return item.manNum })
}, },
{ {
name: '女', name: '女',
...@@ -486,7 +433,7 @@ export default { ...@@ -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 { ...@@ -1789,6 +1736,7 @@ export default {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
margin: 5px 12px; margin: 5px 12px;
text-align: center;
} }
.btn:hover { .btn:hover {
color: white; color: white;
......
src/views/smart/data/Cdata.vue
View file @ 0f15f49b
...@@ -229,7 +229,7 @@ export default { ...@@ -229,7 +229,7 @@ export default {
this.itemparam = query.item 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