首页部分开发
This commit is contained in:
parent
d7213a839a
commit
ced5c8b162
|
|
@ -0,0 +1,47 @@
|
|||
package com.ruoyi.project.oil.controller;
|
||||
|
||||
import com.ruoyi.framework.web.controller.BaseController;
|
||||
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||
import com.ruoyi.project.oil.service.IHomeService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
import static com.ruoyi.framework.web.domain.AjaxResult.success;
|
||||
|
||||
/**
|
||||
* 首页
|
||||
*/
|
||||
@RestController
|
||||
@RequestMapping("/home")
|
||||
public class HomeController extends BaseController {
|
||||
@Autowired
|
||||
private IHomeService homeService;
|
||||
/**
|
||||
* 查询设备数量情况
|
||||
*/
|
||||
@GetMapping("/queryDeviceCount")
|
||||
public AjaxResult queryDeviceCount() {
|
||||
Map<String,Object> list = homeService.queryDeviceCount();
|
||||
return success(list);
|
||||
}
|
||||
/**
|
||||
* 查询各企业设备总数
|
||||
*/
|
||||
@GetMapping("/queryDeviceByFactory")
|
||||
public AjaxResult queryDeviceByFactory() {
|
||||
List<Map<String,Object>> list = homeService.queryDeviceByFactory();
|
||||
return success(list);
|
||||
}
|
||||
|
||||
@GetMapping("/queryTodayAlarm")
|
||||
public AjaxResult queryTodayAlarm(String date) {
|
||||
List<Map<String,Object>> list = homeService.queryTodayAlarm(date);
|
||||
return success(list);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
package com.ruoyi.project.oil.mapper;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
public interface HomeMapper {
|
||||
/**
|
||||
* 查询设备数量情况
|
||||
* @return
|
||||
*/
|
||||
public Map<String, Object> queryDeviceCount() ;
|
||||
|
||||
/**
|
||||
* 查询各企业设备总数
|
||||
*/
|
||||
List<Map<String, Object>> queryDeviceByFactory();
|
||||
|
||||
/**
|
||||
* 查询今日报警信息
|
||||
* @param queryTodayAlarm
|
||||
* @return
|
||||
*/
|
||||
List<Map<String, Object>> queryTodayAlarm(String date);
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
package com.ruoyi.project.oil.service;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
public interface IHomeService {
|
||||
/**
|
||||
* 查询设备数量情况
|
||||
*/
|
||||
Map<String, Object> queryDeviceCount();
|
||||
/**
|
||||
* 查询各企业设备总数
|
||||
*/
|
||||
|
||||
List<Map<String, Object>> queryDeviceByFactory();
|
||||
|
||||
/**
|
||||
* 查询今日报警信息
|
||||
* @param date
|
||||
* @return
|
||||
*/
|
||||
List<Map<String, Object>> queryTodayAlarm(String date);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
package com.ruoyi.project.oil.service.impl;
|
||||
|
||||
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||
import com.ruoyi.project.oil.domain.SendInfo;
|
||||
import com.ruoyi.project.oil.mapper.HomeMapper;
|
||||
import com.ruoyi.project.oil.service.IHomeService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
import static com.ruoyi.framework.web.domain.AjaxResult.success;
|
||||
|
||||
@Service
|
||||
public class HomeServiceImpl implements IHomeService {
|
||||
|
||||
@Autowired
|
||||
private HomeMapper homeMapper;
|
||||
|
||||
|
||||
@Override
|
||||
public Map<String, Object> queryDeviceCount() {
|
||||
return homeMapper.queryDeviceCount();
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<Map<String, Object>> queryDeviceByFactory() {
|
||||
return homeMapper.queryDeviceByFactory();
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<Map<String, Object>> queryTodayAlarm(String queryTodayAlarm) {
|
||||
return homeMapper.queryTodayAlarm(queryTodayAlarm);
|
||||
}
|
||||
}
|
||||
|
|
@ -73,15 +73,15 @@ spring:
|
|||
# redis 配置
|
||||
redis:
|
||||
# 地址
|
||||
# host: 192.168.31.105
|
||||
host: 127.0.0.1
|
||||
host: 192.168.31.105
|
||||
# host: 127.0.0.1
|
||||
# 端口，默认为6379
|
||||
port: 6379
|
||||
# 数据库索引
|
||||
database: 0
|
||||
# 密码
|
||||
password: 123456
|
||||
#password: admin123!
|
||||
# password: 123456
|
||||
password: admin123!
|
||||
# 连接超时时间
|
||||
timeout: 10s
|
||||
lettuce:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE mapper
|
||||
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
<mapper namespace="com.ruoyi.project.oil.mapper.HomeMapper">
|
||||
|
||||
<select id="queryDeviceCount" resultType="java.util.Map">
|
||||
SELECT
|
||||
COUNT(CASE WHEN status = 1 THEN 1 END) AS "onlineTotal",
|
||||
COUNT(*) AS "total",
|
||||
COUNT(*) - COUNT(CASE WHEN status = 1 THEN 1 END) AS "offlineTotal"
|
||||
FROM
|
||||
th_device
|
||||
</select>
|
||||
|
||||
<select id="queryDeviceByFactory" resultType="java.util.Map">
|
||||
SELECT COUNT(d.id) AS "deviceTotal",
|
||||
p.dept_name AS "factoryName",
|
||||
pp.dept_name AS "gangqu"
|
||||
FROM th_device d
|
||||
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
|
||||
LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
|
||||
GROUP BY p.dept_name, pp.dept_name
|
||||
</select>
|
||||
|
||||
<select id="queryTodayAlarm" resultType="java.util.Map">
|
||||
SELECT d.sn AS "sn",
|
||||
p.dept_name AS "factoryName",
|
||||
pp.dept_name AS "gangqu",
|
||||
r.ds AS "ds",
|
||||
r.zt AS "level"
|
||||
FROM th_device d
|
||||
LEFT JOIN th_device_report r ON d.sn = r.sn
|
||||
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
|
||||
LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
|
||||
WHERE
|
||||
r.REPORT_TIME = TO_DATE(#{date}, 'YYYY-MM-DD')
|
||||
AND (r.zt = '一级报警' OR r.zt = '二级报警')
|
||||
|
||||
|
||||
</select>
|
||||
</mapper>
|
||||
|
|
@ -1,58 +1,29 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取密封点概况
|
||||
export function countGroupByType(params) {
|
||||
// 获取设备状况
|
||||
export function queryDeviceCount() {
|
||||
return request({
|
||||
url: '/point/countGroupByType',
|
||||
url: '/home/queryDeviceCount',
|
||||
method: 'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
//查询各企业设备总是
|
||||
export function queryDeviceByFactory() {
|
||||
return request({
|
||||
url: '/home/queryDeviceByFactory',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//查询今日报警
|
||||
export function queryTodayAlarm(data) {
|
||||
return request({
|
||||
url: '/home/queryTodayAlarm',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取各区市的企业情况
|
||||
export function aggregateByCity(params) {
|
||||
return request({
|
||||
url: '/factory/aggregateByCity',
|
||||
method: 'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
// 查询全市共有多少企业
|
||||
export function queryCountFactory(params) {
|
||||
return request({
|
||||
url: '/factory/queryCountFactory',
|
||||
method: 'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
// 查询全市企业的经纬度
|
||||
export function getAllFactory(params) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/factory/getAllFactory',
|
||||
method: 'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
// 查询企业的设备列表
|
||||
export function queryDeviceByFactory(params) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/app/queryDeviceByFactory',
|
||||
method: 'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
// 查询各个企业检测进度
|
||||
export function queryDetectProgress(data) {
|
||||
return request({
|
||||
url: '/exam/queryDetectProgress',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询各个企业vocs排放量统计
|
||||
export function findEmissionCharts(data) {
|
||||
return request({
|
||||
|
|
@ -62,91 +33,6 @@ export function findEmissionCharts(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询不合规统计
|
||||
export function queryOilNot(data) {
|
||||
return request({
|
||||
url: '/point/queryOilNot',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询不合规明细
|
||||
export function queryOilNotDetail(data) {
|
||||
return request({
|
||||
url: '/point/queryOilNotDetail',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询建档不合规统计
|
||||
export function queryArchivesNot(data) {
|
||||
return request({
|
||||
url: '/point/queryArchivesNot',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询建档不合规明细
|
||||
export function quertNotArchivesDetail(data) {
|
||||
return request({
|
||||
url: '/point/quertNotArchivesDetail',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 查询检测不合规统计
|
||||
export function findIllegal(data) {
|
||||
return request({
|
||||
url: '/exam/findIllegal',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询检测不合规明细
|
||||
export function findIllegalByFactoryId(data) {
|
||||
return request({
|
||||
url: '/exam/findIllegalByFactoryId',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询修复不合规统计
|
||||
export function findRecheckIllegal(data) {
|
||||
return request({
|
||||
url: '/recheck/findIllegal',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 查询修复不合规明细
|
||||
export function findIllegalRecheckByFactoryId(data) {
|
||||
return request({
|
||||
url: '/recheck/findIllegalByFactoryId',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//查询未检测的密封点
|
||||
export function queryFailDetect(data) {
|
||||
return request({
|
||||
url: '/ldar/queryFailDetect',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
//查询未检测的密封点详情
|
||||
export function queryFailDetectList(data) {
|
||||
return request({
|
||||
url: '/ldar/queryFailDetectList',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//发送消息
|
||||
export function sendMessage(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="total-title">
|
||||
<div class="title-cont">集团共有监测设备</div>
|
||||
<div class="area-right" >
|
||||
<template v-for="(item, index) in numTotal.pointTotal">
|
||||
<template v-for="(item, index) in numTotal.total">
|
||||
<p v-if="item == '.'" :key="index">
|
||||
{{ item }}
|
||||
</p>
|
||||
|
|
@ -27,58 +27,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-detail">
|
||||
<div class="river-ships">
|
||||
<div class="ship-describe">
|
||||
<p>
|
||||
<span>油气回收在线监测设备</span>
|
||||
<span class="num-class" @click="toPoint('0')">{{ numTotal.yqhs}}</span><span>个</span>
|
||||
<span>厂界在线监测设备在线</span>
|
||||
<span class="num-class" >{{numTotal.onlineTotal}}</span><span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="river-worker">
|
||||
<div class="worker-describe">
|
||||
<p>
|
||||
<span>在线</span>
|
||||
<span class="num-class" @click="toPoint('1')">{{numTotal.yqhs }}</span>
|
||||
<span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-detail">
|
||||
<div class="river-ships">
|
||||
<div class="ship-describe">
|
||||
<p>
|
||||
<span>厂内移动式设备</span>
|
||||
<span class="num-class" @click="toPoint('0')">60</span><span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="river-worker">
|
||||
<div class="worker-describe">
|
||||
<p>
|
||||
<span>在线</span>
|
||||
<span class="num-class" @click="toPoint('1')">57</span>
|
||||
<span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-detail">
|
||||
<div class="river-ships">
|
||||
<div class="ship-describe">
|
||||
<p>
|
||||
<span>厂界在线监测设备</span>
|
||||
<span class="num-class" @click="toPoint('0')">44</span><span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="river-worker">
|
||||
<div class="worker-describe">
|
||||
<p>
|
||||
<span>在线</span>
|
||||
<span class="num-class" @click="toPoint('1')">42</span>
|
||||
<span>离线</span>
|
||||
<span class="num-class">{{numTotal.offlineTotal}}</span>
|
||||
<span>个</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -90,33 +53,33 @@
|
|||
|
||||
<!-- 最下方 检测率概况 -->
|
||||
<div class="reservoir-bottom">
|
||||
<third-title title="在线设备分布情况">
|
||||
<third-title title="设备分布情况">
|
||||
</third-title>
|
||||
<div class="bottom-bottom">
|
||||
<div class="left-list">
|
||||
<!-- <div class="left-list1">排行</div> -->
|
||||
<div class="left-list1">港区名称</div>
|
||||
<div class="left-list22">企业名称</div>
|
||||
<div class="left-list1">设备类型</div>
|
||||
<div class="left-list1">设备个数</div>
|
||||
<!-- <div class="left-list1">设备类型</div> -->
|
||||
<div class="left-list1">设备总数</div>
|
||||
</div>
|
||||
<div class="left-over">
|
||||
<div class="left-list" v-for="(item, index) in examList">
|
||||
|
||||
<div class="left-list1">{{ item.gangqu }}</div>
|
||||
<!-- <a-tooltip> -->
|
||||
<!-- <template #title>{{ item.factoryName }}</template> -->
|
||||
<template v-if="item.factoryName.length > 11">
|
||||
<el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
|
||||
<div class="left-list2" @click="toLdar(item.factoryId)">{{ item.factoryName }}</div>
|
||||
<div class="left-list2">{{ item.factoryName }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="left-list2" @click="toLdar(item.factoryId)">{{ item.factoryName }}</div>
|
||||
<div class="left-list2">{{ item.factoryName }}</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- </a-tooltip> -->
|
||||
<div class="left-list1">{{ item.type }}</div>
|
||||
<div class="left-list1">{{ item.num }}</div>
|
||||
|
||||
<div class="left-list1" style="color: rgb(0 255 255);">{{ item.deviceTotal }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,55 +89,27 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import ThirdTitle from "./ThirdTitle.vue";
|
||||
import { queryDistrict} from "@/api/oil/factory";
|
||||
import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
|
||||
import { countGroupByType, queryDetectProgress } from "@/api/home";
|
||||
import bus from '@/utils/bus.js'
|
||||
import { queryDeviceCount,queryDeviceByFactory} from "@/api/home";
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
ThirdTitle
|
||||
},
|
||||
created() {
|
||||
this.getCurrentTime()
|
||||
bus.$off("changeYearEvent1")
|
||||
bus.$on('changeYearEvent1', (val) => {
|
||||
|
||||
this.queryParams.year=Number(val)
|
||||
|
||||
// //查检测率情况
|
||||
this.queryExam();
|
||||
|
||||
})
|
||||
bus.$off("changeDistrict1")
|
||||
bus.$on('changeDistrict1', (val1,val2) => {
|
||||
this.queryParams.districtName = val1
|
||||
this.districtCode = val2
|
||||
if (val1 == '') {
|
||||
this.districtName = '全市'
|
||||
} else {
|
||||
this.districtName = val1
|
||||
}
|
||||
|
||||
//查密封点数量
|
||||
this.queryPointNum();
|
||||
// //查检测率情况
|
||||
// //查检各企业设备总数
|
||||
this.queryExam();
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// let roles=store.getters.roles
|
||||
// roles.forEach((val)=>{
|
||||
// if(val=='factory'){
|
||||
// this.queryParams.factoryId=store.getters.user.factoryId
|
||||
// }})
|
||||
//查密封点数量
|
||||
|
||||
//查设备数量
|
||||
this.queryPointNum();
|
||||
// //查检测率情况
|
||||
this.queryExam();
|
||||
|
|
@ -183,22 +118,13 @@ export default {
|
|||
data() {
|
||||
//这里存放数据
|
||||
return {
|
||||
districtCode:'',
|
||||
districtName: '全市',
|
||||
queryParams: {
|
||||
year: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
districtName: undefined,
|
||||
factoryId: undefined,
|
||||
},
|
||||
time: '',
|
||||
dateTimer: '',
|
||||
//密封点概况
|
||||
numTotal: {
|
||||
pointTotal: [],
|
||||
staticPointTotal: 0,
|
||||
dynamicPointTotal: 0.
|
||||
total: [],
|
||||
onlineTotal: 0,
|
||||
offlineTotal: 0.
|
||||
},
|
||||
//检测率概况
|
||||
examList: [],
|
||||
|
|
@ -207,71 +133,24 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
//跳转到ldar统计页面
|
||||
toLdar(val) {
|
||||
|
||||
|
||||
this.$router.push({
|
||||
path: '/ledrquery',
|
||||
query: {
|
||||
factoryId: val,
|
||||
year:this.queryParams.year
|
||||
}
|
||||
})
|
||||
},
|
||||
//跳转到密封点查询页面
|
||||
toPoint(val){
|
||||
this.$router.push({
|
||||
path: '/examquery/pointquery',
|
||||
query: {
|
||||
districtCode: this.districtCode,
|
||||
isStaticsPoint:val
|
||||
}
|
||||
})
|
||||
},
|
||||
getCurrentTime() {
|
||||
|
||||
//获取当前时间并打印
|
||||
let yy = new Date().getFullYear();
|
||||
let mm = new Date().getMonth() + 1;
|
||||
let dd = new Date().getDate();
|
||||
let hh = new Date().getHours();
|
||||
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
|
||||
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
|
||||
let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
|
||||
const date = new Date()
|
||||
this.queryParams.year = date.getFullYear()
|
||||
this.queryParams.year = Number(this.queryParams.year)
|
||||
|
||||
|
||||
},
|
||||
|
||||
//查询全市密封点数量
|
||||
//查询数量
|
||||
async queryPointNum() {
|
||||
// countGroupByType(this.queryParams).then(response => {
|
||||
// this.numTotal.pointTotal = NumbersConvertedToArrays(response.data.pointTotal);
|
||||
// this.numTotal.staticPointTotal = response.data.staticPointTotal;
|
||||
// this.numTotal.dynamicPointTotal = response.data.dynamicPointTotal;
|
||||
// });
|
||||
let toal=145
|
||||
this.numTotal.pointTotal = NumbersConvertedToArrays(toal);
|
||||
this.numTotal.yqhs = 41;
|
||||
this.numTotal.cnyds = 60;
|
||||
this.numTotal.cjzx = 44;
|
||||
queryDeviceCount(this.queryParams).then(response => {
|
||||
this.numTotal.total = NumbersConvertedToArrays(response.data.total);
|
||||
this.numTotal.onlineTotal = response.data.onlineTotal;
|
||||
this.numTotal.offlineTotal = response.data.offlineTotal;
|
||||
});
|
||||
|
||||
},
|
||||
//查询各企业数量
|
||||
queryExam() {
|
||||
// this.examList = []
|
||||
// queryDetectProgress(this.queryParams).then(response => {
|
||||
// this.examList = response.data
|
||||
// });
|
||||
this.examList = [{'factoryName':'***有限公司',type:'油气回收',num:'20'},
|
||||
{'factoryName':'***有限公司',type:'厂内移动式',num:'18'},
|
||||
{'factoryName':'***有限公司',type:'厂界在线',num:'24'},
|
||||
{'factoryName':'****有限公司',type:'油气回收',num:'14'},
|
||||
{'factoryName':'****有限公司',type:'厂内移动式',num:'13'},
|
||||
{'factoryName':'****有限公司',type:'厂界在线',num:'10'},
|
||||
{'factoryName':'*****有限公司',type:'油气回收',num:'12'},
|
||||
{'factoryName':'*****有限公司',type:'厂内移动式',num:'13'},
|
||||
{'factoryName':'*****有限公司',type:'厂界在线',num:'14'}]
|
||||
this.examList = []
|
||||
queryDeviceByFactory(this.queryParams).then(response => {
|
||||
this.examList = response.data
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
|
@ -303,7 +182,7 @@ export default {
|
|||
.reservoir-survey {
|
||||
|
||||
|
||||
width: 500px;
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
color: #f0fafa;
|
||||
font-size: 16px;
|
||||
|
|
@ -451,7 +330,7 @@ export default {
|
|||
span {
|
||||
font-size: 20px;
|
||||
//margin: 0 6px;
|
||||
font-family: DinPro-Bold;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -646,7 +525,7 @@ export default {
|
|||
.num-class {
|
||||
cursor: pointer;
|
||||
color: #00deff;
|
||||
text-decoration: underline;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
|
@ -698,16 +577,10 @@ export default {
|
|||
}
|
||||
|
||||
.reservoir-bottom {
|
||||
// width: 100%;
|
||||
// // height: 3.8rem;
|
||||
// background: rgba(0, 108, 188, 0.2);
|
||||
// border-radius: 2px;
|
||||
// border: 1px solid rgba(0, 108, 188, 0.7);
|
||||
// display: inline-table;、
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 424px;
|
||||
height: 544px;
|
||||
// height: 525px;
|
||||
background: rgba(0, 108, 188, 0.2);
|
||||
border-radius: 2px;
|
||||
|
|
@ -725,7 +598,7 @@ export default {
|
|||
display: inline-table;
|
||||
|
||||
.left-over {
|
||||
height: 426px;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
|
|
@ -773,19 +646,13 @@ export default {
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
width: 180px;
|
||||
color: rgb(0 255 255);
|
||||
// color: rgb(0 255 255);
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.left-list22 {
|
||||
|
|
|
|||
|
|
@ -3,50 +3,61 @@
|
|||
|
||||
<!-- 最上面 排放量统计 -->
|
||||
<div class="right-info-content">
|
||||
<third-title title="近七日报警数量统计">
|
||||
<div class="title-right-content">
|
||||
<third-title title="实时报警信息"> </third-title>
|
||||
<div >
|
||||
<div class="left-list">
|
||||
|
||||
<div class="left-list22">企业名称</div>
|
||||
<div class="left-list1">设备编号</div>
|
||||
<div class="left-list1">设备读数</div>
|
||||
<div class="left-list1">报警级别</div>
|
||||
</div>
|
||||
</third-title>
|
||||
<div class="left-over">
|
||||
<template v-if="alarmList.length>0">
|
||||
<div class="left-list" v-for="(item, index) in alarmList">
|
||||
|
||||
<div id="averageVocsEmission" class="average-rainfall-main" />
|
||||
<template v-if="item.factoryName.length > 11">
|
||||
<el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
|
||||
<div class="left-list2">{{ item.factoryName }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="left-list2">{{ item.factoryName }}</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- </a-tooltip> -->
|
||||
|
||||
<template v-if="item.sn.length > 11">
|
||||
<el-tooltip class="ellipsis" :content="item.sn" placement="top">
|
||||
<div class="left-list2">{{ item.sn }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="left-list2">{{ item.sn }}</div>
|
||||
</template>
|
||||
|
||||
<div class="left-list1" style="color: rgb(0 255 255);">{{ item.ds }}</div>
|
||||
<div class="left-list1">{{ item.level }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="alert-message">今日暂无报警</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 下面不合规项 -->
|
||||
<!-- 下面实时报警信息 -->
|
||||
<div class="right-warning-trend">
|
||||
<third-title title="设备列表统计">
|
||||
</third-title>
|
||||
<div class="danger-total-left">
|
||||
<span :key="tabIdx" v-for="(tabItem, tabIdx) in notComplianceChosseList" class="tab-item"
|
||||
:class="notChosse == tabIdx ? 'tab-active' : ''" @click="changeTabActive1(tabIdx)">{{ tabItem }}</span>
|
||||
</div>
|
||||
<div class="top5-content">
|
||||
<div class="top-list">
|
||||
<div class="list-data-item" v-for="(item, index) in nonComplianceList" :key="index">
|
||||
<div class="item-title">
|
||||
<span class="left-num">{{ index + 1 }}</span>
|
||||
<template v-if="item.factoryName && item.factoryName.length > 11">
|
||||
<el-tooltip class="ellipsis" :content="item.factoryName" placement="top">
|
||||
<span class="name-text">{{ item.factoryName }} </span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="name-text">{{ item.factoryName }} </span>
|
||||
</template>
|
||||
|
||||
<!-- <span class="name-text">{{ item.factoryName }} </span> -->
|
||||
<div class="storage-rate-div">
|
||||
<span class="storage-rate-text" >编号：{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="storage-rate-div">
|
||||
<span class="percent-sign-text" >状态：{{ item.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<third-title title="近3日报警数量统计">
|
||||
<div class="title-right-content">
|
||||
<div id="averageVocsEmission" class="average-rainfall-main" />
|
||||
</div>
|
||||
</div>
|
||||
</third-title>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -56,168 +67,133 @@
|
|||
import bus from '@/utils/bus.js'
|
||||
const echarts = require("echarts");
|
||||
import ThirdTitle from "./ThirdTitle.vue";
|
||||
|
||||
import { queryOilNot, findIllegal, findRecheckIllegal, findEmissionCharts } from "@/api/home";
|
||||
const vocsPotion= {
|
||||
backgroundColor: 'rgba(7, 18, 30, 0.4)',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: 'rgba(29,168,210,.3)',
|
||||
}
|
||||
},
|
||||
formatter: function (params) {
|
||||
const str = params.length ? params[0].name + ' : ' + params[0].value + ' 个' : '';
|
||||
return str;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
left: 100,
|
||||
right: 80
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '报警量（个）',
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
color: '#1da8d2',
|
||||
padding: [15, 0, 0, 0]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#35cefc',
|
||||
fontSize: 14,
|
||||
margin: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#1da8d2',
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1da8d2'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1da8d2'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#35cefc',
|
||||
fontSize: 14,
|
||||
margin: 5
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
series: [{
|
||||
name: '排放量',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
itemStyle: {
|
||||
color: 'rgba(74,189,233,.65)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight',
|
||||
color: '#fff',
|
||||
fontSize: '14px'
|
||||
},
|
||||
data: []
|
||||
}]
|
||||
};
|
||||
import { queryTodayAlarm } from "@/api/home";
|
||||
const vocsPotion = {
|
||||
backgroundColor: 'rgba(7, 18, 30, 0.4)',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: 'rgba(29,168,210,.3)',
|
||||
}
|
||||
},
|
||||
formatter: function (params) {
|
||||
const str = params.length ? params[0].name + ' : ' + params[0].value + ' 个' : '';
|
||||
return str;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
left: 100,
|
||||
right: 80
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '报警量（个）',
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
color: '#1da8d2',
|
||||
padding: [15, 0, 0, 0]
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#35cefc',
|
||||
fontSize: 14,
|
||||
margin: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#1da8d2',
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1da8d2'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1da8d2'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#35cefc',
|
||||
fontSize: 14,
|
||||
margin: 5
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
series: [{
|
||||
name: '排放量',
|
||||
type: 'bar',
|
||||
barWidth: '50%',
|
||||
itemStyle: {
|
||||
color: 'rgba(74,189,233,.65)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight',
|
||||
color: '#fff',
|
||||
fontSize: '14px'
|
||||
},
|
||||
data: []
|
||||
}]
|
||||
};
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
ThirdTitle
|
||||
},
|
||||
created() {
|
||||
|
||||
this.getCurrentTime()
|
||||
bus.$off("changeYearEvent")
|
||||
bus.$on('changeYearEvent', (val) => {
|
||||
this.queryParams.year = Number(val)
|
||||
//查数量
|
||||
this.changeTabActive1(0);
|
||||
//查询排放量统计
|
||||
this.getVocs();
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
//查数量
|
||||
this.changeTabActive1(0);
|
||||
|
||||
//ods: {
|
||||
this.queryAlarm();
|
||||
//查询排放量统计
|
||||
this.getVocs();
|
||||
},
|
||||
data() {
|
||||
//这里存放数据
|
||||
return {
|
||||
queryParams: {
|
||||
year: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
districtName: undefined,
|
||||
factoryId: undefined,
|
||||
},
|
||||
//不合格项数组
|
||||
nonComplianceList: [],
|
||||
selectTabIdx: 0,
|
||||
//不合规项选择
|
||||
notChosse: 0,
|
||||
//不合规项选择
|
||||
notComplianceChosseList: [
|
||||
'油气回收在线监测设备', '厂内移动式设备', '厂界在线监测设备'
|
||||
],
|
||||
|
||||
top5ListData: [], //top5数据
|
||||
chartTitle: "", //左下角图表标题
|
||||
timeDimensioninput: 1,
|
||||
time: '',
|
||||
dateTimer: '',
|
||||
numTotal: {
|
||||
companyNum: [],
|
||||
noExamNum: 0,
|
||||
examNum: 0.
|
||||
},
|
||||
echartsText: "水库险情",
|
||||
xWarningData: [],//预警水库柱状图横坐标数组
|
||||
warningDataList: [],//预警水库柱状图有险情个数，有告警个数
|
||||
allDataList: [],//预警水库柱状图无险情个数，无告警个数
|
||||
xDangerData: [],//柱状图横坐标数组
|
||||
dangerDataList: [],//柱状图有险情个数
|
||||
alarmList: [],
|
||||
vocsList: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
//查询今日报警列表
|
||||
queryAlarm() {
|
||||
const now = new Date();
|
||||
|
||||
// 获取各个部分
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
const day = String(now.getDate()).padStart(2, '0'); // 保证两位数
|
||||
|
||||
const formattedDate = `${year}-${month}-${day}`;
|
||||
this.alarmList = []
|
||||
let params = {
|
||||
date: formattedDate
|
||||
}
|
||||
queryTodayAlarm(params).then(response => {
|
||||
this.alarmList = response.data
|
||||
});
|
||||
|
||||
},
|
||||
//查询排放量统计
|
||||
getVocs() {
|
||||
// findEmissionCharts(this.queryParams).then(response => {
|
||||
|
|
@ -244,9 +220,9 @@ export default {
|
|||
// vocsPotion.series[1].data = data2;
|
||||
// this.initEcharts();
|
||||
// });
|
||||
|
||||
vocsPotion.yAxis.data =['***有限公司','****有限公司','*****有限公司']
|
||||
vocsPotion.series[0].data =[30,25,20]
|
||||
|
||||
vocsPotion.yAxis.data = ['***有限公司', '****有限公司', '*****有限公司']
|
||||
vocsPotion.series[0].data = [30, 25, 20]
|
||||
// vocsPotion.series[1].data =[2343.232,333,3334]
|
||||
this.initEcharts();
|
||||
},
|
||||
|
|
@ -265,58 +241,6 @@ export default {
|
|||
this.queryParams.year = Number(this.queryParams.year)
|
||||
|
||||
},
|
||||
//查询不合规项
|
||||
queryNot(val) {
|
||||
if (val == 0) {
|
||||
|
||||
// queryOilNot(this.queryParams).then(response => {
|
||||
// this.nonComplianceList = response.data
|
||||
// });
|
||||
this.nonComplianceList = [{factoryName:'***有限公司',name:'YQHS0001',status:'正在运行'},{factoryName:'***有限公司',name:'YQHS0002',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'YQHS0003',status:'正在运行'},{factoryName:'***有限公司',name:'YQHS0004',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'YQHS0005',status:'停用'},{factoryName:'***有限公司',name:'YQHS0006',status:'正在运行'}]
|
||||
} else if (val == 1) {
|
||||
// findIllegal(this.queryParams).then(response => {
|
||||
// this.nonComplianceList = response.data
|
||||
// });
|
||||
this.nonComplianceList = [{factoryName:'***有限公司',name:'SNYDS0001',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0002',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'SNYDS0003',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0004',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'SNYDS0005',status:'正在运行'},{factoryName:'***有限公司',name:'SNYDS0006',status:'正在运行'}]
|
||||
} else {
|
||||
// findRecheckIllegal(this.queryParams).then(response => {
|
||||
// this.nonComplianceList = response.data
|
||||
// });
|
||||
this.nonComplianceList = [{factoryName:'***有限公司',name:'CJZX0001',status:'检修中'},{factoryName:'***有限公司',name:'CJZX0002',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'CJZX0003',status:'正在运行'},{factoryName:'***有限公司',name:'CJZX0004',status:'正在运行'},
|
||||
{factoryName:'***有限公司',name:'YCJZX0005',status:'停用'},{factoryName:'***有限公司',name:'CJZX0006',status:'正在运行'}]
|
||||
|
||||
}
|
||||
},
|
||||
//跳转不合规项页面
|
||||
openNot(item) {
|
||||
// this.$router.push({
|
||||
// path: '/notcompliance',
|
||||
// query: {
|
||||
// factoryId: item.factoryId,
|
||||
// year: this.queryParams.year,
|
||||
// type: this.notChosse
|
||||
// }
|
||||
// })
|
||||
//this.$router.push("")
|
||||
},
|
||||
// 切换
|
||||
changeTabActive(tabIdx) {
|
||||
this.selectTabIdx = tabIdx;
|
||||
if (tabIdx == 0) {
|
||||
this.handleSearch();
|
||||
} else {
|
||||
this.requestHourRainFall();
|
||||
}
|
||||
},
|
||||
changeTabActive1(val) {
|
||||
this.notChosse = val;
|
||||
this.queryNot(val)
|
||||
},
|
||||
|
||||
|
||||
initEcharts() {
|
||||
|
|
@ -331,7 +255,6 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
||||
.top5-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
/*height: 4px;*/
|
||||
|
|
@ -380,162 +303,14 @@ export default {
|
|||
|
||||
.right-survey {
|
||||
|
||||
width: 500px;
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
color: #f0fafa;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.danger-total-left {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.tab-item {
|
||||
cursor: pointer;
|
||||
padding: 5px 20px;
|
||||
background: #133263;
|
||||
border: #1eafda 1px solid;
|
||||
color: #35cffc;
|
||||
font-size: 14px;
|
||||
font-family: "Microsoft YaHei";
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: linear-gradient(to left, #1e98cd, #0d284f);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-header {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 85px;
|
||||
width: 100%;
|
||||
padding-top: 6px;
|
||||
background-color: #236cbb;
|
||||
|
||||
.title-animation {
|
||||
width: 78px;
|
||||
height: 74px;
|
||||
overflow: hidden;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
// background-image: url("~@/assets/layout/car-bg.png");
|
||||
background-image: url("~@/assets/common/multiScreen/waternum.png");
|
||||
background-size: cover;
|
||||
|
||||
.display-animation {
|
||||
animation: topup50 5s linear infinite;
|
||||
}
|
||||
|
||||
&.bg1 {
|
||||
// background: url("~@/assets/layout/car-bg.png");
|
||||
background-image: url("~@/assets/common/multiScreen/team-bg.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.move-img {
|
||||
width: 78px;
|
||||
height: 74px;
|
||||
position: absolute;
|
||||
// background-image: url("~@/assets/layout/car-anime.png");
|
||||
background-image: url("~@/assets/common/multiScreen/water-rick-bg.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.title-logo {
|
||||
width: 78px;
|
||||
height: 74px;
|
||||
|
||||
// margin-left: 18px;
|
||||
// margin-top: 16px;
|
||||
&.logo1 {
|
||||
// background: url("~@/assets/layout/road-network-on.png");
|
||||
background: url("~@/assets/common/multiScreen/team_on.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.logo2 {
|
||||
// background: url("~@/assets/layout/road-network-on.png");
|
||||
background: url("~@/assets/common/multiScreen/team_on.png");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-cont {
|
||||
width: 140px;
|
||||
font-size: 16px;
|
||||
//margin-bottom: 8px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.area-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: flex-end;
|
||||
padding-right: 20px;
|
||||
color: #bed1df;
|
||||
|
||||
span {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background: url("~@/assets/common/multiScreen/num_bg.png") 100% 100%;
|
||||
background-size: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-right: 3px;
|
||||
color: #fff;
|
||||
font-family: DinPro-Bold;
|
||||
}
|
||||
|
||||
.mianJi {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.total-title {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.handle-num {
|
||||
margin-left: 20px;
|
||||
padding-top: 20px;
|
||||
|
||||
p:first-child {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
span {
|
||||
font-size: 14px;
|
||||
//margin: 0 6px;
|
||||
font-family: DinPro-Bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-info-content {
|
||||
background: rgba(0, 108, 188, 0.2);
|
||||
|
|
@ -544,238 +319,91 @@ export default {
|
|||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.average-rainfall-main {
|
||||
width: 488px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.info-headery {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90px;
|
||||
background-color: #236cbb;
|
||||
|
||||
.title-animation {
|
||||
width: 78px;
|
||||
height: 74px;
|
||||
overflow: hidden;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
// background-image: url("~@/assets/layout/car-bg.png");
|
||||
background-image: url("~@/assets/common/multiScreen/waternum.png");
|
||||
background-size: cover;
|
||||
|
||||
.display-animation {
|
||||
animation: topup50 5s linear infinite;
|
||||
}
|
||||
|
||||
&.bg1 {
|
||||
// background: url("~@/assets/layout/car-bg.png");
|
||||
background-image: url("~@/assets/common/multiScreen/team-bg.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.move-img {
|
||||
width: 78px;
|
||||
height: 74px;
|
||||
position: absolute;
|
||||
// background-image: url("~@/assets/layout/car-anime.png");
|
||||
background-image: url("~@/assets/common/multiScreen/water-rick-bg.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.title-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-left: 4px;
|
||||
margin-top: 10px;
|
||||
|
||||
&.logo2 {
|
||||
// background: url("~@/assets/layout/road-network-on.png");
|
||||
background: url("~@/assets/common/multiScreen/team_on.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.logo1 {
|
||||
// background: url("~@/assets/layout/road-network-on.png");
|
||||
background: url("~@/assets/common/multiScreen/team_on.png");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.left-over {
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-cont {
|
||||
width: 90px;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.area-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: flex-end;
|
||||
padding-right: 20px;
|
||||
color: #bed1df;
|
||||
|
||||
span {
|
||||
width: 28px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: url("~@/assets/common/multiScreen/num_bg.png") 100% 100%;
|
||||
background-size: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-right: 3px;
|
||||
color: #fff;
|
||||
font-family: "DinPro-Bold";
|
||||
}
|
||||
|
||||
.mianJi {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.reach-num {
|
||||
width: 111px;
|
||||
height: 100%;
|
||||
background: url("~@/assets/common/multiScreen/river-spilt.png");
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 20px;
|
||||
padding-top: 8px;
|
||||
|
||||
&>p:first-child {
|
||||
display: flex;
|
||||
|
||||
//margin-bottom:8px;
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&>p:nth-child(2) {
|
||||
span:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: DINPro-Bold;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&>p:nth-child(3) {
|
||||
//margin-top:6px;
|
||||
background-color: #df1818;
|
||||
width: 63px;
|
||||
height: 26px;
|
||||
border-radius: 2px;
|
||||
|
||||
span:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: DINPro-Bold;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-detail {
|
||||
height: 76px;
|
||||
background-color: rgba(2, 16, 36, 0.4);
|
||||
.alert-message {
|
||||
height: 250px; /* 设置高度 */
|
||||
display: flex; /* 使用 flexbox 来居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
color: gray; /* 字体颜色为灰色 */
|
||||
font-size: 16px; /* 可选：设置字体大小 */
|
||||
text-align: center; /* 可选：文本居中对齐 */
|
||||
border-radius: 8px; /* 可选：圆角 */
|
||||
|
||||
}
|
||||
.left-list {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.river-ships {
|
||||
background: url("~@/assets/common/multiScreen/ship-spilt.png");
|
||||
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 32px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.ship-describe {
|
||||
//margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
line-height: 40px;
|
||||
|
||||
&>p {
|
||||
margin-top: 5px;
|
||||
|
||||
span:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.num-class {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-list1 {
|
||||
font-size: 16x;
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.river-worker {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 32px;
|
||||
.left-list2 {
|
||||
height: 30px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
|
||||
.worker-describe {
|
||||
//margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
width: 180px;
|
||||
// color: rgb(0 255 255);
|
||||
|
||||
&>p {
|
||||
margin-top: 5px;
|
||||
|
||||
span:first-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.num-class {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: DINPro-Bold;
|
||||
}
|
||||
.left-list22 {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
width: 180px;
|
||||
|
||||
span:last-child {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.active-item {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
width: 40%;
|
||||
color: rgb(0 255 255);
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -795,7 +423,7 @@ export default {
|
|||
flex-direction: column;
|
||||
|
||||
.top5-content {
|
||||
// height: 160px;
|
||||
height: 360px;
|
||||
width: 102%;
|
||||
overflow: auto;
|
||||
margin-top: 6px;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@
|
|||
|
||||
<!-- 最上面 密封点概况-->
|
||||
<div class="reservoir-top">
|
||||
<third-title title="实时报警信息">
|
||||
<third-title title="港口信息">
|
||||
</third-title>
|
||||
|
||||
<div class="beautified-div">
|
||||
<div>油气回收在线监测设备</div>
|
||||
<div ref="chart" style="width:100%; height: 600px;"></div>
|
||||
</div>
|
||||
<!-- <div>油气回收在线监测设备</div>
|
||||
<dv-scroll-board :config="config" style="width:100%;height:170px" />
|
||||
</div>
|
||||
<div class="beautified-div">
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
<div class="beautified-div">
|
||||
<div>厂界在线监测设备</div>
|
||||
<dv-scroll-board :config="config2" style="width:100%;height:170px" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -25,143 +27,153 @@
|
|||
<script>
|
||||
import store from "@/store";
|
||||
import ThirdTitle from "./ThirdTitle.vue";
|
||||
import { queryDistrict } from "@/api/oil/factory";
|
||||
import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
|
||||
import { countGroupByType, queryDetectProgress } from "@/api/home";
|
||||
import bus from '@/utils/bus.js'
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
ThirdTitle
|
||||
},
|
||||
created() {
|
||||
this.getCurrentTime()
|
||||
bus.$off("changeYearEvent1")
|
||||
bus.$on('changeYearEvent1', (val) => {
|
||||
|
||||
this.queryParams.year = Number(val)
|
||||
|
||||
// //查检测率情况
|
||||
this.queryExam();
|
||||
|
||||
})
|
||||
bus.$off("changeDistrict1")
|
||||
bus.$on('changeDistrict1', (val1, val2) => {
|
||||
this.queryParams.districtName = val1
|
||||
this.districtCode = val2
|
||||
if (val1 == '') {
|
||||
this.districtName = '全市'
|
||||
} else {
|
||||
this.districtName = val1
|
||||
}
|
||||
|
||||
//查密封点数量
|
||||
this.queryPointNum();
|
||||
// //查检测率情况
|
||||
this.queryExam();
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// let roles=store.getters.roles
|
||||
// roles.forEach((val)=>{
|
||||
// if(val=='factory'){
|
||||
// this.queryParams.factoryId=store.getters.user.factoryId
|
||||
// }})
|
||||
//查密封点数量
|
||||
//this.queryPointNum();
|
||||
// //查检测率情况
|
||||
//this.queryExam();
|
||||
this.initChart();
|
||||
},
|
||||
|
||||
data() {
|
||||
//这里存放数据
|
||||
return {
|
||||
config: {
|
||||
header: ['设备编号', '报警时间', '报警值'],
|
||||
data: [
|
||||
['YQHS0004', '08:12:02', '100ppm'],
|
||||
['YQHS0003', '09:13:02', '210ppm'],
|
||||
['YQHS0006', '10:12:02', '110ppm'],
|
||||
]
|
||||
},
|
||||
config1: {
|
||||
header: ['设备编号', '报警时间', '报警值'],
|
||||
data: [
|
||||
['SNYDS0001', '08:12:02', '100ppm'],
|
||||
['SNYDS0004', '09:13:02', '210ppm'],
|
||||
['SNYDS0001', '18:12:02', '110ppm'],
|
||||
['SNYDS0002', '10:12:02', '105ppm'],
|
||||
]
|
||||
},
|
||||
config2: {
|
||||
header: ['设备编号', '报警时间', '报警值'],
|
||||
data: [
|
||||
['CJZX0002', '07:00:59', '100ppm'],
|
||||
]
|
||||
},
|
||||
districtCode: '',
|
||||
districtName: '全市',
|
||||
queryParams: {
|
||||
year: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
districtName: undefined,
|
||||
factoryId: undefined,
|
||||
},
|
||||
time: '',
|
||||
dateTimer: '',
|
||||
//密封点概况
|
||||
numTotal: {
|
||||
pointTotal: [],
|
||||
staticPointTotal: 0,
|
||||
dynamicPointTotal: 0.
|
||||
},
|
||||
//检测率概况
|
||||
examList: [],
|
||||
|
||||
loadedDataUrl:'./static/shandong.json',
|
||||
chart: null,
|
||||
// 准备山东省的 geoJSON 数据
|
||||
shandongGeoJSON: null,
|
||||
points : [
|
||||
{ name: '青岛港', value: [120.345089,36.109947], list: []},
|
||||
{ name: '日照港', value: [119.561732,35.382109], list: []},
|
||||
{ name: '烟台港', value: [121.40541,37.562686], list: [] },
|
||||
{ name: '渤海湾港', value: [119.219496,36.71416], list: []}
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async initChart() {
|
||||
// 获取山东省的 geoJSON 数据
|
||||
axios.get(this.loadedDataUrl, {}).then((geoJson) => {
|
||||
// 注册山东省的地图
|
||||
echarts.registerMap('shandong', geoJson.data);
|
||||
|
||||
// 初始化 ECharts 实例
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 地图标注的 4 个点信息（名称、坐标）
|
||||
const points = [
|
||||
{ name: '青岛港', value: [120.345089, 36.109947], list: [] },
|
||||
{ name: '日照港', value: [119.561732, 35.382109], list: [] },
|
||||
{ name: '烟台港', value: [121.40541, 37.562686], list: [] },
|
||||
{ name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
|
||||
];
|
||||
|
||||
// 动态生成每个点的 list 数据
|
||||
points.forEach(point => {
|
||||
point.list = Array.from({ length: 10 }, (_, index) => ({
|
||||
factoryName: `${point.name}工厂${index + 1}`,
|
||||
avgValue: (Math.random() * 100).toFixed(2)
|
||||
}));
|
||||
});
|
||||
|
||||
// 设置 ECharts 的配置项
|
||||
const option = {
|
||||
backgroundColor: '#1b1b1b', // 设置背景色
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
if (params.componentType === 'series') {
|
||||
const point = points.find(p => p.name === params.name);
|
||||
if (point) {
|
||||
return `
|
||||
<div style="width: 250px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
|
||||
<div style="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
|
||||
<div style="width: 200px;">企业名</div>
|
||||
<div style="width: 50px;">平均值</div>
|
||||
</div>
|
||||
<div style="margin-top: 5px;">
|
||||
${point.list.map(f => `
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;">
|
||||
<div style="width: 200px;">${f.factoryName}</div>
|
||||
<div style="width: 50px;">${f.avgValue}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
return ''; // 返回空以防其他情况
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'shandong', // 使用山东省地图
|
||||
center: [120.3, 36.1], // 设置地图中心
|
||||
zoom: 2, // 放大地图
|
||||
roam: true, // 开启缩放和拖动
|
||||
label: {
|
||||
show: false, // 不显示地图标签
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#B1D0FC', // 地图区域颜色
|
||||
borderColor: '#111', // 地图边界颜色
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#FFD700', // 鼠标悬停时的区域颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '港口',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: points,
|
||||
symbolSize: 20, // 标记点的大小
|
||||
itemStyle: {
|
||||
color: '#FFD700', // 使用黄色标记点
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}', // 标签显示名称
|
||||
position: 'right',
|
||||
color: '#FF8C00', // 橙黄色
|
||||
fontWeight: 'bold', // 加粗
|
||||
fontSize:24,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
color: '#FFD700', // 鼠标悬停时的标签颜色
|
||||
fontSize: 16, // 增加悬停时标签的字体大小
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 渲染图表
|
||||
this.chart.setOption(option);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getCurrentTime() {
|
||||
|
||||
//获取当前时间并打印
|
||||
let yy = new Date().getFullYear();
|
||||
let mm = new Date().getMonth() + 1;
|
||||
let dd = new Date().getDate();
|
||||
let hh = new Date().getHours();
|
||||
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
|
||||
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
|
||||
let time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
|
||||
const date = new Date()
|
||||
this.queryParams.year = date.getFullYear()
|
||||
this.queryParams.year = Number(this.queryParams.year)
|
||||
|
||||
|
||||
},
|
||||
|
||||
//查询全市密封点数量
|
||||
async queryPointNum() {
|
||||
countGroupByType(this.queryParams).then(response => {
|
||||
this.numTotal.pointTotal = NumbersConvertedToArrays(response.data.pointTotal);
|
||||
this.numTotal.staticPointTotal = response.data.staticPointTotal;
|
||||
this.numTotal.dynamicPointTotal = response.data.dynamicPointTotal;
|
||||
});
|
||||
},
|
||||
queryExam() {
|
||||
this.examList = []
|
||||
queryDetectProgress(this.queryParams).then(response => {
|
||||
this.examList = response.data
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
|
@ -208,7 +220,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
.beautified-div {
|
||||
height: 220px;
|
||||
height: 620px;
|
||||
background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
|
||||
border: 1px solid #1da8d2; /* 边框颜色 */
|
||||
border-radius: 8px; /* 圆角 */
|
||||
|
|
|
|||
|
|
@ -13,17 +13,14 @@
|
|||
<!-- <span>{{ dateStr }}</span> -->
|
||||
<span class="time">{{ time }}</span>
|
||||
</div>
|
||||
<div class="choose-time">
|
||||
<el-date-picker v-model="chooseYear" type="year" placeholder="选择年" value-format="yyyy" @change="changeYear">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></template>
|
||||
|
||||
<script>
|
||||
import { queryCountFactory } from "@/api/home";
|
||||
|
||||
import bus from '@/utils/bus.js'
|
||||
export default {
|
||||
components: {},
|
||||
|
|
@ -70,22 +67,10 @@ export default {
|
|||
clearInterval(this.dateTimer);
|
||||
},
|
||||
mounted() {
|
||||
this.queryCount();
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeYear(val) {
|
||||
bus.$emit('changeYearEvent', val)
|
||||
bus.$emit('changeYearEvent1', val)
|
||||
},
|
||||
queryCount() {
|
||||
//定制-青岛市
|
||||
let params = {
|
||||
cityCode: ''
|
||||
}
|
||||
queryCountFactory(params).then(response => {
|
||||
this.factoryNum = response.msg
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
updateTime() {
|
||||
var date = new Date() // 获取时间
|
||||
|
|
|
|||
Loading…
Reference in New Issue