Skip to content

Z
zh-baseversion-project
Commit a7a5d1df authored by zhangjianqian's avatar zhangjianqian
Browse files
Options

修改申报报错，添加安全运行监督功能

parent f1ad2daa
Hide whitespace changes
Inline Side-by-side
Showing with 1400 additions and 6 deletions
zh-baseversion-common/src/main/java/com/zehong/common/utils/GovernmentDataCopyUtil.java
View file @ a7a5d1df
package com.zehong.common.utils; package com.zehong.common.utils;
import java.lang.reflect.Field; import java.lang.reflect.Field;
import java.text.SimpleDateFormat;
import java.util.HashMap; import java.util.HashMap;
import java.util.Map; import java.util.Map;
...@@ -25,7 +26,12 @@ public class GovernmentDataCopyUtil { ...@@ -25,7 +26,12 @@ public class GovernmentDataCopyUtil {
if(targetMap.containsKey(targetName)){ if(targetMap.containsKey(targetName)){
Object value = field.get(source); Object value = field.get(source);
if(null != value){ if(null != value){
targetMap.get(targetName).set(target,value); if (targetName.equals("birthday")|| targetName.equals("workTime")) {
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
targetMap.get(targetName).set(target,dateFormat.format(value));
}else{
targetMap.get(targetName).set(target,value);
}
} }
} }
} }
......
zh-baseversion-system/src/main/java/com/zehong/system/service/impl/TProAppInforServiceImpl.java
View file @ a7a5d1df
...@@ -131,9 +131,9 @@ public class TProAppInforServiceImpl implements ITProAppInforService { ...@@ -131,9 +131,9 @@ public class TProAppInforServiceImpl implements ITProAppInforService {
GovernmentDataCopyUtil.copyToGovernData(appInfor,proAppInfoVo); GovernmentDataCopyUtil.copyToGovernData(appInfor,proAppInfoVo);
List<ProAppInfoVo> data = new ArrayList<>(); List<ProAppInfoVo> data = new ArrayList<>();
data.add(proAppInfoVo); data.add(proAppInfoVo);
JSONObject reportResult = governmentDataUtil.setInfo("professor/application/information","WRITE",data); //JSONObject reportResult = governmentDataUtil.setInfo("professor/application/information","WRITE",data);
log.info("专家申报结果===================" + reportResult.toJSONString()); //log.info("专家申报结果===================" + reportResult.toJSONString());
if(!"0".equals(reportResult.getString("resultCode"))) throw new CustomException("行业专家上报市局接口失败"); //if(!"0".equals(reportResult.getString("resultCode"))) throw new CustomException("行业专家上报市局接口失败");
return result; return result;
} }
} }
zh-baseversion-web/src/utils/mapClass/map.js
View file @ a7a5d1df
...@@ -1385,8 +1385,9 @@ export class EditorMap { ...@@ -1385,8 +1385,9 @@ export class EditorMap {
const color = pipeColor[pipePressure]; const color = pipeColor[pipePressure];
this.pipeArr[1].forEach((pipe) => { if(this.pipeArr.length>1){
const deviceExtData = pipe.getExtData(); this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) { if (deviceExtData.pipeId === id) {
console.log("改"); console.log("改");
//设置颜色 //设置颜色
...@@ -1396,6 +1397,7 @@ export class EditorMap { ...@@ -1396,6 +1397,7 @@ export class EditorMap {
pipe.setOptions(options); pipe.setOptions(options);
} }
}); });
}
this.infowindow.close(); this.infowindow.close();
// 通过搜索上图的数据 // 通过搜索上图的数据
......
zh-baseversion-web/src/views/supervision/safetysupervise/components/Left.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-14 18:00:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div style="display:flex; ">
<div class="upon" >物联监测设备</div>
<div class="left" id ="main2">
<Chars :options="option"/>
</div>
<div class="right">
<div class="onehang" style="margin-top: 15%">
<div class="onemax"></div>
<div class="one">总数量</div>
<div class="one">在线数量</div>
</div>
<div class="onehang">
<div class="onemax" ><div class="xiaoone" style="background: #ff7f50 "></div>压力表</div>
<div class="one">{{datanum.jmNum}}</div>
<div class="one">{{datanum.jmtNum}}</div>
</div>
<div class="onehang">
<div class="onemax"><div class="xiaoone" style="background:#32cd32"> </div>流量计</div>
<div class="one">{{datanum.syNum}}</div>
<div class="one">{{datanum.sytNum}}</div>
</div>
<div class="onehang">
<div class="onemax"><div class="xiaoone" style="background: #6495ed"></div>探测器</div>
<div class="one">{{datanum.gyNum}}</div>
<div class="one">{{datanum.gytNum}}</div>
</div>
<div class="onehang">
<div class="onemax"><div class="xiaoone" style="background: #6495ed"></div>温度计时</div>
<div class="one">{{datanum.gyNum}}</div>
<div class="one">{{datanum.gytNum}}</div>
</div>
</div>
</div>
</template>
<script>
import Chars from "../../../../components/allCharsCom/Chars";
import { summaryUser } from "@/api/supervise/summary";
export default {
components: {
Chars
},
data() {
return {
total:4,
limit:2,
showSearch: true,
queryParams: {
pageNum: 1,
pageSize: 4,
enterpriseId:null,
nickName: null
},
// 特殊用户管控表格数据
specialuserList: [],
arr: [],
datanum:{
jmNum:0,
gyNum:0,
syNum:0,
jmtNum:0,
gytNum:0,
sytNum:0,
},
option:{
color: ['#ff7f50', '#32cd32', '#6495ed' ],
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 0 },
{ value: 0 },
{ value: 0 },
{ value: 0 },
]
}
]
}
};
},
created() {
//this.getnum();
},
methods: {
//特殊用户
getnum(){
// summaryUser().then(res => {
// if(res.code == 200){
// this.datanum = res.data;
// var data = [
// { value: res.data.jmNum },
// { value: res.data.syNum },
// { value: res.data.gyNum }
// ]
// this.option.series[0].data = data;
// }
//console.log(this.option)
var myChart = this.$echarts.init(document.getElementById('main2'));
myChart.setOption(this.option);
//})
}
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.left{
width: 40%;
height: 30vh;
}
.right{
width: 55%;
height: 30vh;
}
.onehang{
width: 100%;
font-size: 14px;
display: flex;
}
.one{
height: 40px;
width: 30%;
text-align: center;
}
.onemax{
height: 40px;
width: 40%;
text-align: center;
display: flex;
}
.xiaoone{
height: 12px;
width: 20px;
margin-top: 4px;
margin-right: 5px;
}
.upon{
position: fixed;
width: 30%;
text-align: center;
font-size: 24px;
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/components/MapBottom.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-13 10:27:33
* @LastEditTime: 2022-04-14 17:59:39
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue
-->
<template>
<div class="map-bottom-wrapper">
<div id="xjxcmap" class="map"></div>
<div class="left-box all-flex-h">
<div class="top">
<div class="title">巡检任务查看</div>
<div class="wrapper">
<div class="top-wrapper flex">
<div class="input-wrapper">
<el-input
v-model="searchData.task"
placeholder="点击输入任务名称"
suffix-icon="el-icon-search"
size="mini"
>
</el-input>
</div>
<div class="enter">
<el-button size="mini" @click="getList"
><span class="text">确认</span></el-button
>
</div>
<div class="reset">
<el-button size="mini" @click="reset">
<span class="text">重置</span>
<i class="el-icon-refresh el-icon--right"></i>
</el-button>
</div>
</div>
<!-- <div class="middle-wrapper flex">
<div class="left">
<el-select
v-model="searchData.unt"
placeholder="执行单位"
size="mini"
>
<el-option
size="mini"
v-for="item in unt"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="right">
<el-date-picker
style="width: 100%"
v-model="searchData.value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
size="mini"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</div>-->
</div>
</div>
<div class="bottom all-flex-h">
<div ref="table" class="table">
<!-- <el-table
v-loading="loading"
:data="
tableData.filter((item, index) => {
return index >= (page - 1) * limit && index < page * limit;
})
"
style="width: 100%"
:height="tableScrollH"
ref="t"
class="t"
>
<el-table-column fixed prop="name" label="任务名称" width="90">
<template v-slot="scope">
<div :title="scope.row.name" class="zzz">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="unt" label="执行单位" width="90">
<template v-slot="scope">
<div :title="scope.row.unt" class="zzz">
{{ unt[scope.row.unt - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="type" label="任务类型" width="90">
<template v-slot="scope">
<div :title="scope.row.type" class="zzz">
{{ type[scope.row.type - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="state" label="任务状态" width="90">
<template v-slot="scope">
<div :title="scope.row.state" class="zzz">
{{ state[scope.row.state - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="handle" label="操作" width="90">
<template v-slot="scope">
<el-button @click="mapDo(scope.row)" type="text"
><span :class="{ target: target == scope.row.id }"
>巡检信息</span
></el-button
>
</template>
</el-table-column>
</el-table>-->
<el-table v-loading="loading" :data="infoList">
<el-table-column label="任务名称" align="center" prop="taskName" />
<el-table-column label="巡线时间" align="center" prop="linePatrolTime">
<template slot-scope="scope">
<span>{{ scope.row.linePatrolTime }}</span>
</template>
</el-table-column>
<el-table-column label="巡线人员" align="center" prop="linePatrolPerson">
</el-table-column>
<el-table-column label="单位名称" align="center" prop="beyondEnterpriseName"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-map-location"
@click="getTravel(scope.row)"
>查看轨迹</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { XjxcMap } from "@/utils/mapClass/xjxcmap";
import Null from "@/components/bigWindow/Null";
import Pipe from "./Pipe.vue";
import { listPatrol } from "@/api/inspectionWork/linePatrol";
import {listAccident} from "@/api/inspectionWork/inspectionAccident";
import {getLastLocation} from "@/api/operationMonitor/vehicleInfo";
import {getVehicleLocations} from "@/api/operationMonitor/vehicleLocationInfo";
import {
getPipe,
getTyx,
getFm,
} from "@/api/bigWindow/getDevice";
import Device from "@/components/bigWindow/Device.vue";
let arr = [
];
export default {
data() {
return {
map: null,
loading: false,
// 点击巡检信息的选中状态
target: null,
// 任务类型选项
unt: [
{ value: 1, label: "中燃翔科技" },
{ value: 2, label: "中诚燃气" },
],
type: [
{ value: 1, label: "入户安检" },
{ value: 2, label: "巡检" },
{ value: 3, label: "其他" },
],
state: [
{ value: 1, label: "派发中" },
{ value: 2, label: "已接单" },
{ value: 3, label: "已反馈" },
{ value: 4, label: "已归档" },
],
searchData: {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: [],
},
infoList: [],
// 总条数
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
taskName:"",
beyondEnterpriseId:""
},
tableScrollH: 100,
// 表格数据
tableData: arr,
page: 1,
limit: 10,
};
},
mounted() {
this.mapInit();
/*this.$nextTick(() => {
const dom = document.getElementsByClassName("t")[0];
dom.style.height = this.$refs.table.getBoundingClientRect().height + "px";
});
console.log(moment("2022-11-29").valueOf());*/
this.getList();
},
methods: {
mapInit() {
this.map = new XjxcMap("xjxcmap", {center: [114.684979,38.038292]}, this);
//调压箱
this.labelsLayerMarksTysGoMap(getTyx, Device, true);
//阀门井
this.labelsLayerMarksFmjGoMap(getFm, Device, true);
},
labelsLayerMarksTysGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("调压箱", mapData);
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
});
},
labelsLayerMarksFmjGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("阀门井", mapData);
this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
});
},
reset() {
this.searchData = {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: [],
};
this.getList();
},
getList() {
this.loading = true;
this.map.infowindowClose();
this.target = null;
this.map.remove();
setTimeout(() => {
this.page = 1;
const { task, unt, type, state, value } = this.searchData;
this.queryParams.taskName = task;
this.queryParams.beyondEnterpriseId = unt;
listPatrol(this.queryParams).then(response => {
this.infoList = response.rows;
console.log(this.infoList)
this.total = response.total;
this.loading = false;
});
}, 200);
},
/**获取车辆轨迹操作*/
getTravel(row){
if (row.coordinates) {
try {
const path = JSON.parse(row.coordinates);
// 清除之前的轨迹
this.map.remove();
const polylineData = {
path: JSON.stringify(path),
iconType: 0, // 与 XjxcMap 中的 iconType3 对应
pipePressure: 4,
strokeWeight: 4,
title: row.taskName || "巡检轨迹"
};
// 添加折线到地图（null 表示不需要组件）
this.map.addPipeLine(polylineData, null);
// 调整地图视野
const middleIndex = Math.floor(path.length / 2);
this.map.map.panTo(path[middleIndex]);
} catch (error) {
console.error('轨迹数据解析失败:', error);
this.msgError("轨迹数据格式错误");
}
} else {
this.msgError("暂无轨迹数据");
}
},
mapDo(data) {
// 暂无信息
if (!Array.isArray(eval(data.path))) {
this.msgError("暂无巡检信息");
return;
}
this.target = data.id;
this.map.remove();
this.map.create(data, Null, Pipe);
},
},
};
</script>
<style lang="scss" scoped>
.map-bottom-wrapper {
height: 100%;
position: relative;
& > .map {
height: 100%;
}
& > .left-box {
width: 497px;
position: absolute;
top: 0;
bottom: 0;
> .top {
width: 100%;
// height: 143px;
padding-bottom: 10px;
margin-bottom: 9px;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
.title {
padding: 8px 0 4px 15px;
border-bottom: 1px solid rgba(231, 231, 231, 1);
font-size: 21px;
font-weight: 400;
}
.wrapper {
padding: 6px 12px 0px 12px;
.top-wrapper {
margin-bottom: 6px;
div {
&.input-wrapper {
width: 337px;
margin-right: 3px;
}
&.enter,
&.reset {
// flex:1;
span.text {
font-size: 12px;
color: #333333;
}
}
}
}
.middle-wrapper {
width: 100%;
margin-bottom: 6px;
> div {
//width: 150px;
// background: red;
}
}
}
}
> .bottom {
flex: 1;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
box-sizing: border-box;
padding: 12px 20px;
padding-bottom: 0;
justify-content: space-between;
.table {
flex: 1;
//background-color: red;
.target {
color: #ffc337;
font-weight: 600;
}
}
.page {
// height: 100px;
width: 100%;
}
}
}
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/components/Middle.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-20 11:09:34
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">报警处置</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">报警情况</span>
<span>{{hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum}}次</span>
</div>
<div class="second all-flex">
<div class="left">未处理总数</div>
<div class="right">已处理总数</div>
</div>
<div class="third all-flex">
<div class="left">{{ hiddenBookInfo.unFinishNum}}</div>
<div class="right">{{hiddenBookInfo.finishNum}}</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">报警处置率</span>
</div>
<div class="chars-box" id ="main1">
<!--<Chars color="#604AFF" :options="option"></Chars>-->
</div>
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
import { listDetectorReportData } from "@/api/detector/detectorReportData";
export default {
components: {
Chars,
},
created(){
this.bottomOptions();
},
data() {
return {
option:{
color:['blue','lightblue'],
grid: {
bottom: "7%",
containLabel: true,
},
tooltip: {
trigger: "item",
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
label: {
show: true,
position: 'center'
},
labelLine: {
show: false
},
data: [
{value: 0, name: '未处理'},
{value: 0, name: '已处理'},
]
}
]
},
hiddenBookInfo: {
unFinishNum: 0,
finishNum: 0
},
total:0
};
},
methods: {
bottomOptions() {
listDetectorReportData({pageNum:1}).then(response => {
this.total= response.total;
listDetectorReportData({pageNum:1,isCancelAlarm:0}).then(res => {
this.option.series[0].data= [
{value: res.total, name: '未处理'},
{value: this.total-res.total, name: '已处理'},
]
this.hiddenBookInfo= {
unFinishNum: res.total,
finishNum: this.total-res.total
}
var myChart = this.$echarts.init(document.getElementById('main1'));
myChart.setOption(this.option);
});
})
}
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 7px;
}
.two {
// flex: 1;
> .left {
margin-right: 70px;
.first {
margin-bottom: 6px;
}
.second {
width: 200px;
height: 30px;
line-height: 30px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 19px;
> div {
// flex: 1;
text-align: center;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
width: 200px;
margin-bottom: 24px;
}
}
> .right {
.first {
text-align: center !important;
}
.chars-box {
width: 220px;
height: 220px;
margin: 0 auto;
}
}
> div {
font-size: 16px;
flex: 1;
// display: flex;
// flex-direction: column;
}
.left,
.right {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.first {
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
}
}
.three {
font-size: 16px;
flex: 1;
// background: red;
.chars-box {
flex: 1;
}
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/components/Pipe.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-14 15:49:20
* @LastEditTime: 2022-04-14 17:52:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue
-->
<template>
<div class="pipe-wrapper">
<div class="top">
<div class="title">{{ deviceData.title }}</div>
<div class="close" @click="close">
<img src="@/assets/image-xjxc/close.png" alt="" />
</div>
</div>
<div class="bottom">
<div class="ele flex">
<div class="left zzz">任务标题</div>
<div class="right zzz">中燃翔科测试</div>
</div>
<div class="ele flex">
<div class="left zzz">任务类型</div>
<div class="right zzz">入户安检</div>
</div>
<div class="ele flex">
<div class="left zzz">任务内容</div>
<div class="right zzz">巡检巡查</div>
</div>
<div class="ele flex">
<div class="left zzz">执行单位</div>
<div class="right zzz">中燃翔科</div>
</div>
<div class="ele flex">
<div class="left zzz">执行人</div>
<div class="right zzz">林俊杰</div>
</div>
<div class="ele flex">
<div class="left">发现问题</div>
<div class="right img-wrapper">
<el-image
v-if="imgSrc"
style="width: 80px; height: 80px"
:src="imgSrc"
:preview-src-list="[imgSrc]"
:z-index="999999"
>
</el-image>
<img v-else src="@/assets/image-xjxc/nomal.jpg" alt="" />
</div>
</div>
<div class="ele flex">
<div class="left zzz">问题描述</div>
<div title="还没有找到问题原因" class="right zzz">还没有找到问题原因</div>
</div>
<div class="ele flex end">
<div class="left zzz">发现时间</div>
<div class="right">2022-01-02 12:12:12</div>
</div>
</div>
</div>
</template>
<script>
// deviceData
export default {
data() {
return {
// imgSrc:
// "http://222.223.203.154:8092/gassafety/profile/upload/2022/04/08/3f197bb6-ad51-43df-aded-e1b005008ad6.jpg",
};
},
methods: {
close() {
this.mapClass.infowindowClose();
},
},
};
</script>
<style lang="scss" scoped>
.pipe-wrapper {
width: 230px;
padding: 10px 0 12px;
background-color: #fff;
box-sizing: border-box;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
position: relative;
&::before {
content: "";
border-style: solid;
border-width: 9px 13px 9px 7px;
border-color: transparent #fff transparent transparent ;
position: absolute;
left:-20px;
top:50%;
margin-top:-9px;
}
.top {
box-sizing: border-box;
padding-bottom: 5px;
border-bottom: 1px solid #c4c4c4;
.title {
padding-left: 21px;
color: #1d8cf3;
font-size: 14px;
font-weight: 500;
}
.close {
position: absolute;
width: 13px;
height: 13px;
right: 10px;
top: 13px;
cursor: pointer;
img {
width: 100%;
}
}
}
.bottom {
padding: 10px 15px 0px 21px;
.ele {
font-size: 12px;
padding-bottom: 4px;
border-bottom: 1px dashed #ececec;
margin-bottom: 5px;
> div {
width: 80px;
color: #333333;
&.left{
font-weight: 500;
}
&.right {
text-align: left;
}
&.img-wrapper {
height: 80px;
}
}
&.end {
border-bottom: 0px;
}
}
}
}
</style>
\ No newline at end of file
zh-baseversion-web/src/views/supervision/safetysupervise/components/Right.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-14 18:00:06
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">报警设备</div>
<div class="four all-flex-h">
<div class="top flex">
<div>设备编号</div>
<div>设备类型</div>
<div>预警信息</div>
<div>预警时间</div>
</div>
<div class="scroll-wrapper">
<div v-if="loading" class="loading">加载中...</div>
<Scroll v-else-if="inforList.length > 0" :dataList="inforList">
<template v-slot="{ dataList }">
<ScroItem
v-for="(item, index) in dataList"
:key="item.fConGasProInforId"
:data="item"
:index="index"
/>
</template>
</Scroll>
<div v-else class="no-data">暂无数据</div>
</div>
</div>
</div>
</template>
<script>
import { listDetectorReportData } from "@/api/detector/detectorReportData";
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
import {getInfo} from "@/api/login";
export default {
components: {
Scroll,
ScroItem
},
data() {
return {
notStarted:0,
completed:0,
inProgress:0,
loading: false,
user:{},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
isCancelAlarm:0
},
inforList:[],
arr: [
],
};
},
mounted() {},
created() {
this.getuserInfo();
},
methods: {
getuserInfo(){
getInfo().then(response => {
this.user = response.user.roles[0]
this.getList();
});
},
getList() {
this.loading = true;
listDetectorReportData(this.queryParams).then(response => {
this.inforList = response.rows;
this.loading = false;
});
},
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 22px;
}
.two {
box-shadow: 0px 0px 3px 1px #dddddd;
height: 28px;
font-size: 14px;
margin-bottom: 15px;
> div {
line-height: 28px;
flex: 1;
text-align: center;
&.left {
color: #1f8df3;
}
&.middle {
flex: 1;
color: #03c4f1;
}
&.right {
color: #ffc337;
}
}
}
.three {
font-size: 16px;
margin-bottom: 10px;
> div {
flex: 1;
line-height: 24px;
text-align: center;
}
}
.four {
flex: 1;
font-size: 14px;
// 这个解决子元素overhidden失效问题
min-height: 0;
>.top {
background: rgba(24, 144, 255, 0.1);
height: 29px;
line-height: 29px;
> div {
flex: 1;
text-align: center;
}
}
.scroll-wrapper {
// font-size: 14px;
flex: 1;
// 这个解决子元素overhidden失效问题
min-height: 0;
// background: red;
// overflow: hidden;
// position:relative;
}
}
.loading, .no-data {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/components/ScroItem.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-12 18:02:16
* @LastEditTime: 2022-04-13 09:24:43
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
-->
<template>
<div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
<div class="left zzz" :title="data.detectorCode">{{ data.detectorCode }}</div>
<div class="zzz" :title="data.fConstructionEnd">
{{getType(data.detectorType)}}
</div>
<div class="zzz" :title="data.statusName || ''">{{ data.statusName || '' }}</div>
<div class="zzz" :title="data.alarmTime || ''">{{ data.alarmTime || '-' }}</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
},
index: {
type: Number,
},
},
methods: {
getType(value){
if(value==1){
return "家用探测器";
}else if(value==2){
return "工业探测器";
}else if(value==3){
return "激光家报";
}else if(value==4){
return "地下井探测器";
}else{
return '-'
}
}
}
};
</script>
<style lang="scss" scoped>
.top {
width: 100%;
height: 29px;
line-height: 29px;
&.n {
color: #333333;
}
&.n2 {
color: #1f8df3;
background: rgba(0, 0, 0, 0.1);
}
> div {
flex: 1;
text-align: center;
font-size: 12px;
box-sizing: border-box;
padding: 0 2px;
&.left{
padding: 0 5px;
}
}
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/components/Scroll.vue 0 → 100644
View file @ a7a5d1df
<template>
<div class="scroll-container" ref="container">
<div class="scroll-content" :style="{ transform: `translateY(${translateY}px)` }">
<slot :dataList="dataList" />
</div>
</div>
</template>
<script>
export default {
props: {
dataList: {
type: Array,
default: () => [],
},
speed: {
type: Number,
default: 0.5
},
interval: {
type: Number,
default: 24
}
},
data() {
return {
timer: null,
translateY: 0,
containerHeight: 0,
contentHeight: 0,
isHover: false
};
},
mounted() {
this.initScroll();
},
watch: {
dataList: {
handler() {
this.$nextTick(() => {
this.resetScroll();
this.initScroll();
});
},
deep: true
}
},
methods: {
initScroll() {
if (!this.$refs.container) return;
this.containerHeight = this.$refs.container.clientHeight;
this.contentHeight = this.$refs.container.firstElementChild?.scrollHeight || 0;
// 如果内容高度小于容器高度，不需要滚动
if (this.contentHeight <= this.containerHeight) {
this.stopScroll();
return;
}
this.startScroll();
},
startScroll() {
this.stopScroll();
this.timer = setInterval(() => {
if (this.isHover) return;
this.translateY -= this.speed;
// 当内容完全滚出容器时，重置位置
if (Math.abs(this.translateY) >= this.contentHeight) {
this.translateY = this.containerHeight;
}
}, this.interval);
},
stopScroll() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
resetScroll() {
this.translateY = 0;
this.stopScroll();
}
},
beforeDestroy() {
this.stopScroll();
}
};
</script>
<style lang="scss" scoped>
.scroll-container {
height: 100%;
overflow: hidden;
position: relative;
}
.scroll-content {
position: absolute;
width: 100%;
transition: transform 0.1s linear;
}
</style>
zh-baseversion-web/src/views/supervision/safetysupervise/index.vue 0 → 100644
View file @ a7a5d1df
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
-->
<template>
<div class="app-container xjxc">
<div class="wrapper flex-h">
<div class="top flex">
<div class="left">
<Left />
</div>
<div class="middle">
<Middle />
</div>
<div class="right">
<Right />
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<MapBottom/>
</div>
</div>
</div>
</template>
<script>
import Left from "./components/Left";
import Middle from "./components/Middle";
import Right from "./components/Right";
import MapBottom from "./components/MapBottom";
export default {
components: {
Left,
Middle,
Right,
MapBottom
},
data() {
return {
};
},
mounted(){
}
};
</script>
<style lang="scss" scoped>
.app-main {
}
.xjxc {
height: calc(100vh - 50px) !important;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex-h {
display: flex;
// justify-content: space-around;
flex-direction: column;
height: 100%;
.top {
height: 38.7%;
.left {
width: 34%;
padding: 15px 24px 19px;
}
.middle {
width: 35.3%;
padding: 15px 50px 19px 51px;
}
.right {
width: 30%;
padding: 15px 29px;
}
> div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
}
>.middle {
margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
height: 2px;
}
.bottom {
flex: 1;
background-color: red;
}
> div {
// height: 50%;
}
}
</style>
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