Skip to content

G
gassafety-progress
Commit 7617257a authored by wuqinghua's avatar wuqinghua
Browse files
Options

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	gassafetyprogress-web/src/views/regulation/device/index.vue
#	gassafetyprogress-web/src/views/regulation/gasuser/index.vue
parents 76b34c17 9c8ee7c5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3225 additions and 767 deletions
gassafetyprogress-admin/src/main/java/com/zehong/web/controller/operationMonitor/THiddenTroubleInfoController.java
View file @ 7617257a
......@@ -27,7 +27,7 @@ import com.zehong.common.core.page.TableDataInfo;
* @date 2022-03-24
*/
@RestController
@RequestMapping("/system/info")
@RequestMapping("/system/hidden")
public class THiddenTroubleInfoController extends BaseController
{
@Autowired
......@@ -36,7 +36,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 查询燃气隐患列表
*/
@PreAuthorize("@ss.hasPermi('system:info:list')")
@PreAuthorize("@ss.hasPermi('system:hidden:list')")
@GetMapping("/list")
public TableDataInfo list(THiddenTroubleInfo tHiddenTroubleInfo)
{
......@@ -53,7 +53,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 导出燃气隐患列表
*/
@PreAuthorize("@ss.hasPermi('system:info:export')")
@PreAuthorize("@ss.hasPermi('system:hidden:export')")
@Log(title = "燃气隐患", businessType = BusinessType.EXPORT)
@GetMapping("/export")
public AjaxResult export(THiddenTroubleInfo tHiddenTroubleInfo)
......@@ -66,7 +66,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 获取燃气隐患详细信息
*/
@PreAuthorize("@ss.hasPermi('system:info:query')")
@PreAuthorize("@ss.hasPermi('system:hidden:query')")
@GetMapping(value = "/{hiddenTroubleId}")
public AjaxResult getInfo(@PathVariable("hiddenTroubleId") Long hiddenTroubleId)
{
......@@ -76,7 +76,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 新增燃气隐患
*/
@PreAuthorize("@ss.hasPermi('system:info:add')")
@PreAuthorize("@ss.hasPermi('system:hidden:add')")
@Log(title = "燃气隐患", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody THiddenTroubleInfo tHiddenTroubleInfo)
......@@ -87,7 +87,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 修改燃气隐患
*/
@PreAuthorize("@ss.hasPermi('system:info:edit')")
@PreAuthorize("@ss.hasPermi('system:hidden:edit')")
@Log(title = "燃气隐患", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody THiddenTroubleInfo tHiddenTroubleInfo)
......@@ -98,7 +98,7 @@ public class THiddenTroubleInfoController extends BaseController
/**
* 删除燃气隐患
*/
@PreAuthorize("@ss.hasPermi('system:info:remove')")
@PreAuthorize("@ss.hasPermi('system:hidden:remove')")
@Log(title = "燃气隐患", businessType = BusinessType.DELETE)
@DeleteMapping("/{hiddenTroubleIds}")
public AjaxResult remove(@PathVariable Long[] hiddenTroubleIds)
......
gassafetyprogress-system/src/main/java/com/zehong/system/domain/TComplainDeal.java
View file @ 7617257a
......@@ -37,7 +37,7 @@ public class TComplainDeal extends BaseEntity
@Excel(name = "转办记录")
private String transferRecord;
@Excel(name = "反馈事件")
@Excel(name = "反馈时间")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date dealTime;
/** 办理情况 */
......
gassafetyprogress-system/src/main/java/com/zehong/system/domain/THiddenTroubleInfo.java
View file @ 7617257a
......@@ -83,7 +83,18 @@ public class THiddenTroubleInfo extends BaseEntity
@Excel(name = "备注")
private String remarks;
public void setHiddenTroubleId(Long hiddenTroubleId)
/**上报人名称*/
private String reportPersonName;
public String getReportPersonName() {
return reportPersonName;
}
public void setReportPersonName(String reportPersonName) {
this.reportPersonName = reportPersonName;
}
public void setHiddenTroubleId(Long hiddenTroubleId)
{
this.hiddenTroubleId = hiddenTroubleId;
}
......
gassafetyprogress-system/src/main/resources/mapper/system/THiddenTroubleInfoMapper.xml
View file @ 7617257a
......@@ -21,10 +21,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<result property="hiddenTroubleDealFinishTime" column="hidden_trouble_deal_finish_time" />
<result property="isDel" column="is_del" />
<result property="remarks" column="remarks" />
<result property="reportPersonName" column="report_person_name" />
</resultMap>
<sql id="selectTHiddenTroubleInfoVo">
select hidden_trouble_id, work_id, hidden_trouble_name, hidden_trouble_level, hidden_trouble_type, longitude, latitude, picture_url, hidden_trouble_describe, report_time, (select u.user_name from sys_user u where u.user_id = report_person) AS report_person, hidden_trouble_deal_status, hidden_trouble_deal_condition, hidden_trouble_deal_finish_time, is_del, remarks from t_hidden_trouble_info
select hidden_trouble_id, work_id, hidden_trouble_name, hidden_trouble_level, hidden_trouble_type, longitude, latitude, picture_url, hidden_trouble_describe, report_time, (select u.user_name from sys_user u where u.user_id = report_person) AS report_person_name, report_person, hidden_trouble_deal_status, hidden_trouble_deal_condition, hidden_trouble_deal_finish_time, is_del, remarks from t_hidden_trouble_info
</sql>
<select id="selectTHiddenTroubleInfoList" parameterType="THiddenTroubleInfo" resultMap="THiddenTroubleInfoResult">
......
gassafetyprogress-web/src/api/operationMonitor/hiddenTrouble.js
View file @ 7617257a
......@@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询燃气隐患列表
export function listInfo(query) {
return request({
url: '/system/info/list',
url: '/system/hidden/list',
method: 'get',
params: query
})
......@@ -12,7 +12,7 @@ export function listInfo(query) {
// 查询燃气隐患
export function hiddenTroubleList(query) {
return request({
url: '/system/info/hiddenTroubleList',
url: '/system/hidden/hiddenTroubleList',
method: 'get',
params: query
})
......@@ -21,41 +21,41 @@ export function hiddenTroubleList(query) {
// 查询燃气隐患详细
export function getInfo(hiddenTroubleId) {
return request({
url: '/system/info/' + hiddenTroubleId,
url: '/system/hidden/' + hiddenTroubleId,
method: 'get'
})
}
// 新增燃气隐患
export function addInfo(data) {
export function addHiddenInfo(data) {
return request({
url: '/system/info',
url: '/system/hidden',
method: 'post',
data: data
})
}
// 修改燃气隐患
export function updateInfo(data) {
export function updateHiddenInfo(data) {
return request({
url: '/system/info',
url: '/system/hidden',
method: 'put',
data: data
})
}
// 删除燃气隐患
export function delInfo(hiddenTroubleId) {
export function delHiddenInfo(hiddenTroubleId) {
return request({
url: '/system/info/' + hiddenTroubleId,
url: '/system/hidden/' + hiddenTroubleId,
method: 'delete'
})
}
// 导出燃气隐患
export function exportInfo(query) {
export function exportHiddenInfo(query) {
return request({
url: '/system/info/export',
url: '/system/hidden/export',
method: 'get',
params: query
})
......
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css
View file @ 7617257a
@font-face {
font-family: "iconfont"; /* Project id 3276749 */
src: url('iconfont.woff2?t=1648286292510') format('woff2'),
url('iconfont.woff?t=1648286292510') format('woff'),
url('iconfont.ttf?t=1648286292510') format('truetype');
src: url('iconfont.woff2?t=1648524577887') format('woff2'),
url('iconfont.woff?t=1648524577887') format('woff'),
url('iconfont.ttf?t=1648524577887') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bingo:before {
content: "\e625";
}
.icon-x:before {
content: "\e600";
}
.icon-jt:before {
content: "\e8f1";
}
......
gassafetyprogress-web/src/assets/styles/all.scss
View file @ 7617257a
......@@ -56,8 +56,8 @@
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.el-dialog__header{
border-bottom:1px solid #cccccc;
.el-dialog__header {
border-bottom: 1px solid #cccccc;
}
.bigwindow {
// 全局表格样式
......@@ -613,19 +613,17 @@
// overflow-y: none !important;
}
}
// map里的label
.amap-info {
position: fixed !important;
z-index: 999 !important;
}
.amap-marker-label{
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border:none !important;
padding:10px;
.amap-marker-label {
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border: none !important;
padding: 10px;
}
.left {
.el-table__body-wrapper {
......@@ -668,16 +666,20 @@
padding: 0 2px !important;
}
//去除高德logo
.amap-logo{
.amap-logo {
display: none;
opacity:0 !important;
opacity: 0 !important;
}
.amap-copyright {
opacity:0;
opacity: 0;
}
.paddingnone {
padding: 0 !important;
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
}
gassafetyprogress-web/src/components/emergency/Timeline.vue
View file @ 7617257a
<template>
<ul class="timeline-wrapper">
<li class="timeline-item" >
<div class="timeline-box">
<div class="out-circle">
<div class="in-circle"></div>
</div>
<div class="long-line"></div>
</div>
<div class="timeline-content">
<div class="timeline-date el-form-div">
<div style="width: 180px">{{nowItem.createTime}}</div>
<div >事件发布</div>
</div>
<div class="timeline-title">{{ nowItem.eventName}}</div>
<div class="timeline-title">地址：{{ nowItem.address}}</div>
</div>
</li>
<li class="timeline-item" v-for="t in timelineList" :key="t.id">
<div class="timeline-box">
<div class="out-circle">
......@@ -8,7 +24,11 @@
<div class="long-line"></div>
</div>
<div class="timeline-content">
<div class="timeline-date">{{t.createTime}}</div>
<div class="timeline-date el-form-div">
<div style="width: 180px">{{t.createTime}}</div>
<div v-if="t.eventType==2">预案指引</div>
<div v-if="t.eventType==1">信息处置</div>
</div>
<div class="timeline-title">{{ t.management}}</div>
<div class="timeline-desc">
<span
......@@ -36,8 +56,8 @@
default: () => {
return []
}
}
},
nowItem:{}
},
methods: {
checkFile(url) {
......@@ -53,7 +73,12 @@
margin: 0;
padding: 0;
}
.el-form-div{
display:flex;
flex-direction:row;
justify-content:flex-start;
width: 100%;
}
/* 时间线 */
.timeline-item {
position: relative;
......
gassafetyprogress-web/src/layout/components/Navbar.vue
View file @ 7617257a
......@@ -11,11 +11,30 @@
<!--<img src="@/assets/xiaoxi.png" :hidden="xiaohidden" style="height: 40px;width: 40px;margin-top: 5px;cursor: pointer;">-->
<!--</div>-->
<!-- <search id="header-search" class="right-menu-item" /> -->
          <el-badge :value="total" :max="99" class="item" >
            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" @click="$router.push('/emergency/emergency')"></i>
          </el-badge>
<!--          <el-badge :value="total" :max="99" class="item" >-->
<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
<!--          </el-badge>-->
<el-dropdown class="avatar-container right-menu-item hover-effect" style="margin-right: 0px" trigger="click">
<div class="avatar-wrapper" >
<el-badge :value="total" :max="99" class="item" >
   <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>
 </el-badge>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="total==0">
<span>暂无消息</span>
</el-dropdown-item>
<div v-for="(item,index) in receivedList" >
<el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)">
<span>您有新消息：{{item.eventName}}</span>
</el-dropdown-item>
<el-dropdown-item v-if="index>0" divided @click.native="openMassage(item.id,item.eventName)">
<span>您有新消息：{{item.eventName}}</span>
</el-dropdown-item>
</div>
</el-dropdown-menu>
</el-dropdown>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
......@@ -46,7 +65,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters,mapMutations } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
......@@ -69,13 +88,15 @@ export default {
userType:-2,
total:null,
xiaohidden:false,
receivedList:[],
routerPath:"",
}
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'device'
'device',
]),
setting: {
get() {
......@@ -95,34 +116,23 @@ export default {
}
},
mounted(){
getUserProfile().then(response => {
this.userType = response.data.deptId;
});
//定时检测新消息
setInterval(() => {
var params = {
pageNum: 1,
pageSize: 100,
status:5,
enterpriseId:this.userType
};
if(this.userType==-2){
params.governmentRead=0;
params.enterpriseId=null;
}else {
params.companyRead=0
}
listReceive(params).then(response => {
if(response.total!=0){
this.total= response.total;
}else{
this.total= "";
}
});
}, 5000);
getUserProfile().then(response => {
this.userType = response.data.deptId;
if(this.userType!=-2){
this.queryParams.enterpriseId = response.data.deptId;
}
this.getList();
});
this.socket();
},
methods: {
...mapMutations({
SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY"
}
),
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
......@@ -136,6 +146,61 @@ mounted(){
location.href = '/index';
})
}).catch(() => {});
},
openMassage(id,title){
//this.$router.push('/emergency/emergency?eventid='+id);
this.routerPath="/emergency/emergency";
if(window.location.pathname==this.routerPath){
// this.$parent.showDetail(id,title);
this.SET_EMERGENCY({
eventId:id,
eventName:title,
})
}else {
this.$router.push({path: this.routerPath,query:{eventId:id,eventName:title}});
}
},
socket() {
console.log("socket执行");
this.ws = new WebSocket(
"ws://192.168.2.17:8903/gassafety/websocketServer"
);
this.ws.onopen = (evt) => {
console.log("WebSockets开启");
};
this.ws.onmessage = (evt) => {
console.log("推送", evt);
const obj = JSON.parse(evt.data);
console.log("接受socketobj", obj);
this.getList();
};
this.ws.onclose = () => {
console.log("ws协议关闭");
};
},
getList(){
console.log(this.userType)
var params = {
pageNum: 1,
pageSize: 100,
status:5,
enterpriseId:this.userType
};
if(this.userType==-2){
params.governmentRead=0;
params.enterpriseId=null;
}else {
params.companyRead=0
}
listReceive(params).then(response => {
this.receivedList = response.rows;
if(response.total!=0){
this.total= response.total;
}else{
this.total= "";
}
});
}
}
}
......
gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js 0 → 100644
View file @ 7617257a
This diff is collapsed.
gassafetyprogress-web/src/utils/mapClass/yjmap.js
View file @ 7617257a
......@@ -734,6 +734,9 @@ export class EditorMap {
});
}
}
setZoomAndCenter(longitude,latitude){
this.map.setZoomAndCenter(14, [longitude,latitude]);
}
// 普通调用方法
// 设备报警
deviceAlarm(obj) {
......
gassafetyprogress-web/src/views/complainDeal/index.vue
View file @ 7617257a
......@@ -159,7 +159,7 @@
<el-input v-model="form.complainName" placeholder="请输入投诉人姓名" :disabled="readonly"/>
</el-form-item>
<el-form-item label="指派单位" prop="complainAssignEnterproseId" >
<el-select style="width: 100%" v-model="form.complainAssignEnterproseName" placeholder="请选择预案等级" @change="qiyechang" :disabled="readonly">
<el-select style="width: 100%" v-model="form.complainAssignEnterproseName" placeholder="请选择指派单位" @change="qiyechang" :disabled="readonly">
<el-option
v-for = "dict in enterpriseList"
:key = "dict.enterpriseId"
......@@ -176,7 +176,7 @@
<el-input v-model="form.complainPhone" placeholder="请输入投诉人电话" :disabled="readonly"/>
</el-form-item>
<el-form-item label="指派人" prop="complainAssignManId">
<el-select v-model="form.complainAssignMan" placeholder="请选择预案等级" clearable style = "width: 100%" @change="manChang" :disabled="readonly">
<el-select v-model="form.complainAssignMan" placeholder="请选择指派人" clearable style = "width: 100%" @change="manChang" :disabled="readonly">
<el-option
v-for = "dict in peopleList"
:key = "dict.id"
......@@ -191,6 +191,16 @@
<el-form-item label="投诉事项" prop="complainMatter">
<el-input v-model="form.complainMatter" type = "textarea" placeholder="请输入投诉事项" :disabled="readonly"/>
</el-form-item>
<el-form-item label="反馈时间" prop="dealTime" :style="display">
<el-date-picker clearable size="small"
v-model="form.dealTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择反馈时间"
:disabled="readonly"
style="width: 280px">
</el-date-picker>
</el-form-item>
<el-form-item label="反馈内容" prop="dealCondition" :style="display">
<el-input v-model="form.dealCondition" type = "textarea" placeholder="请输入办理情况" :disabled="readonly"/>
</el-form-item>
......@@ -479,7 +489,7 @@ export default {
getComplainDeal(complainDealId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改投诉处置";
this.title = "投诉处置详情";
var statusName = this.selectDictLabel(this.taskStateOptions, row.complainStatus);
this.form.complainStatus=statusName;
});
......
gassafetyprogress-web/src/views/emergency/index.vue
View file @ 7617257a
......@@ -114,9 +114,9 @@
>
<img
:src="item.imgurl"
style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
style="margin-top: 8px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
/>
{{ item.name }}
{{ item.name }} ({{ item.num }})
</div>
</div>
......@@ -365,36 +365,42 @@ export default {
arr2: [
{
val: 10,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-jydw.png"),
name: "救援队伍",
},
{
val: 11,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-wz.png"),
name: "救援物资",
},
{
val: 12,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-cl.png"),
name: "救援车辆",
},
{
val: 13,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-yy.png"),
name: "医 院",
},
{
val: 15,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-xf.png"),
name: "消防队伍",
},
{
val: 16,
num:0,
ischeck: false,
imgurl: require("@/assets/image/yj-xj.png"),
name: "巡检人员",
......@@ -478,8 +484,9 @@ export default {
this.map = new EditorMap(
"map",
{
center: path,
//center: path,
//mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
center: [114.208007, 38.260288],
zoom: 14.5,
},
this
......@@ -536,6 +543,12 @@ export default {
listDevice(params).then(response => {
response.rows.forEach((item) => {
item.iconType = item.deviceType+9;
if(item.deviceType<5){
this.arr2[item.deviceType-1].num++;
}else {
this.arr2[item.deviceType-2].num++;
}
});
this.deviceList = response.rows;
//console.log(this.deviceList)
......@@ -598,8 +611,8 @@ export default {
this.dialogTableVisible = false;
},
getPath(res){
console.log("res", res);
console.log(this.form.longitude, this.form.latitude);
//console.log("res", res);
//console.log(this.form.longitude, this.form.latitude);
//确认选择经纬度
this.form.longitude = res[0];
this.form.latitude = res[1];
......@@ -745,12 +758,30 @@ export default {
this.selarr1.splice(ind, 1);
} else {
this.selarr1.push(item.val);
//找中心点
console.log(item.val);
if(item.val>=10){
for(var i=0;i<this.deviceList.length;i++){
if(this.deviceList[i].iconType==item.val){
console.log(this.deviceList[i])
this.map.setZoomAndCenter(this.deviceList[i].longitude,this.deviceList[i].latitude);
break;
}
}
// this.deviceList.forEach((item2) => (
// if(item2.iconType==item.val){
//
// }
//
// ));
}
}
this.map.allfilter(this.selarr, this.selarr1);
//this.map.setZoomAndCenter(14, [116.326655,39.899438]);
},
//用户的设备center
getDetectorInfoList(httpFunc, queryParams, title) {
console.log(queryParams);
//console.log(queryParams);
return httpFunc(queryParams).then((res) => {
// console.log("queryParams", res);
if (res.code == 200) {
......@@ -1009,7 +1040,7 @@ export default {
.typelist-div {
width: 450px;
height: 50px;
z-index: 9999;
z-index: 999;
position: fixed;
top: 0;
margin-top: 80px;
......@@ -1017,16 +1048,17 @@ export default {
}
.typelist-div2{
width: 150px;
height: 50px;
z-index: 9999;
height: 230px;
z-index: 999;
position: fixed;
margin-top: 80px;
margin-left: 10px;
background: white;
margin-left: 15px;
}
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #000000;
line-height: auto;
background: #ffffff;
......
gassafetyprogress-web/src/views/inspectionWork/workOrder/components/HiddenTrouble.vue
View file @ 7617257a
......@@ -53,7 +53,7 @@
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row,scope.$index)"
@click="viewDetail(scope.row,scope.$index)"
v-if="isView"
>详情</el-button>
<el-button
......@@ -236,6 +236,19 @@ export default {
this.title = "新增隐患信息"
this.hiddenOpen = true;
},
/** 详情按钮操作 */
viewDetail(row,index) {
this.reset();
this.index = index;
this.hiddenForm = {...row};
this.title = "查看隐患信息"
this.hiddenOpen = true;
if (this.hiddenForm.pictureUrl) {
this.fileList.push({
url: this.hiddenForm.pictureUrl,
});
}
},
/** 修改按钮操作 */
handleUpdate(row,index) {
this.reset();
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:12:04
* @LastEditTime: 2022-03-29 10:09: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/monitorData/component/charsData/CzCard.vue
......@@ -9,21 +9,24 @@
<template>
<div class="czcard">
<my-collapse title="场站" ref="myCollapse">
<my-collapse
title="场站"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div class="filter" v-for="item in filterList" :key="item.value">
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
<FilterVue
:filterList="filterList"
@fliterTypeChange="fliterTypeChange"
/>
</template>
<template #container>
<div class="container" :class="{ start: getShowNum }">
<div v-for="item in czList" :key="item.deviceName" v-show="item.show">
<div
v-for="(item, index) in czList"
:key="item.deviceName + index"
v-show="item.show"
>
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
......@@ -35,29 +38,31 @@
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
import FilterVue from "./FilterVue";
export default {
// 场站
components: {
MyCollapse,
CzItem,
FilterVue,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "全部", count: 100, type: "all" },
{ value: "加气站", count: 100, type: 1 },
{ value: "加气站1", count: 100, type: 2 },
{ value: "加气站2", count: 100, type: 3 },
{ value: "加气站3", count: 100, type: 4 },
{ value: "加气站4", count: 100, type: 5 },
{ value: "加气站5", count: 100, type: 6 },
{ value: "加气站7", count: 100, type: 7 },
{ value: "门站", count: 100, type: 2 },
{ value: "调压站", count: 100, type: 3 },
{ value: "储备站", count: 100, type: 4 },
{ value: "气化站", count: 100, type: 5 },
],
deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
deviceTypeArr: [1, 2, 3, 4, 5],
czList: [
{
deviceName: "加气站a",
deviceName: "加气站",
state: 1,
a: 25,
b: 56,
......@@ -69,8 +74,8 @@ export default {
type: 1,
},
{
deviceName: "加气站b",
state: 1,
deviceName: "门站",
state: 2,
a: 25,
b: 56,
c: 54,
......@@ -81,7 +86,7 @@ export default {
type: 2,
},
{
deviceName: "加气站c",
deviceName: "调压站",
state: 1,
a: 25,
b: 56,
......@@ -93,7 +98,7 @@ export default {
type: 3,
},
{
deviceName: "加气站d",
deviceName: "储备站",
state: 1,
a: 25,
b: 56,
......@@ -105,7 +110,7 @@ export default {
type: 4,
},
{
deviceName: "加气站e",
deviceName: "气化站",
state: 1,
a: 25,
b: 56,
......@@ -114,10 +119,10 @@ export default {
e: 56,
image: "",
show: true,
type: 4,
type: 5,
},
{
deviceName: "加气站f",
deviceName: "气化站",
state: 1,
a: 25,
b: 56,
......@@ -126,10 +131,10 @@ export default {
e: 56,
image: "",
show: true,
type: 4,
type: 5,
},
{
deviceName: "加气站g",
deviceName: "储备站",
state: 1,
a: 25,
b: 56,
......@@ -140,7 +145,6 @@ export default {
show: true,
type: 4,
},
],
};
},
......@@ -156,6 +160,7 @@ export default {
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
......@@ -177,18 +182,16 @@ export default {
},
//过滤选择
fliterTypeChange(data) {
const { type } = data;
const index = this.deviceTypeArr.indexOf(type);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(type);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
this.filter([...data]);
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
......@@ -206,24 +209,7 @@ export default {
</script>
<style lang="scss" scoped>
.filter {
margin-right: 12px;
margin-top: 5px;
font-size: 14px;
.text {
cursor: pointer;
&:hover {
color: #06d7b189 !important;
}
&.active {
color: #06d7b1;
}
}
.number {
font-weight: 500;
color: #1890ff;
}
}
.container {
width: 100%;
flex-wrap: wrap;
......@@ -236,9 +222,13 @@ export default {
}
& > div {
margin-bottom: 20px;
margin-left:1%;
margin-left: 1%;
width: 24%;
min-width: 295px;
border: 1px solid #e6ebf5;
border-radius: 4px;
box-sizing: border-box;
}
}
.flex {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-26 10:27:00
* @LastEditTime: 2022-03-26 16:38:29
* @LastEditTime: 2022-03-28 18:03:04
* @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/monitorData/component/charsData/CzItem.vue
-->
<template>
<div class="czitem flex">
<div class="czitem flex" :class="{nopadding:changeStyle}">
<div class="left">
<div class="img">
<div class="state">
{{ list.state == "0" ? "正常" : "报警" }}
<div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
{{ stateType[list.state] }}
</div>
<img v-if="list.src" src="" alt="" />
暂无图片
</div>
<div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
<div v-if="!changeStyle" v-unValue class="device-name zzz">{{ list.deviceName }}</div>
</div>
<div class="right">
<div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
<div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
<div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
<div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
<div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
<div>
温度：<span :class="{ active: list.a > 50 }">{{ list.a }}°C</span>
</div>
<div>
水温：<span :class="{ active: list.b > 50 }">{{ list.b }}°C</span>
</div>
<div>
压力：<span :class="{ active: list.c > 50 }">{{ list.c }}Pa</span>
</div>
<div>
湿度：<span :class="{ active: list.d > 50 }">{{ list.d }}°C</span>
</div>
<div>
水温：<span :class="{ active: list.e > 50 }">{{ list.e }}°C</span>
</div>
</div>
</div>
</template>
<script>
export default {
// 场站子组件
props: {
list: {
type: Object,
},
// 从外部传一个值，来改变一些样式
changeStyle:{
type:Boolean,
default:false,
},
stateType:{
type:Object,
default:()=>({"1":"正常",2:"报警"})
}
},
};
</script>
......@@ -46,8 +68,6 @@ export default {
min-height: 191px;
padding: 14px 12px 18px 25px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e6ebf5;
// display: flex;
.left {
// margin-right: 48px;
......@@ -73,6 +93,15 @@ export default {
line-height: 28px;
color: #06d7b1;
font-size: 14px;
&.active1 {
color: #06d7b1;
}
&.active2 {
color: #FF6C68;
}
&.active3 {
color: #bbbbbb;
}
}
img {
width: 100%;
......@@ -90,7 +119,7 @@ export default {
min-width: 80px;
& > div {
margin-bottom: 10px;
span.active{
span.active {
color: red;
}
}
......@@ -100,4 +129,8 @@ export default {
display: flex;
justify-content: space-between;
}
.nopadding{
padding-bottom:0 !important;
min-height:170px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue 0 → 100644
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:08:25
* @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/monitorData/component/charsData/Filter.vue
-->
<template>
<div class="fliter-vue">
<div class="filter" v-for="(item, index) in filterList" :key="item.value">
<!-- 全部 -->
<template v-if="index == 0">
<span
class="text"
:class="{
active: deviceTypeArr.length == filterList.length - 1
}"
@click="fliterTypeChange(item)"
>{{ item.value }}
<i class="iconfont icon-bingo"></i>
</span>
<span class="number">({{ item.count }})</span>
</template>
<template v-else>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}
<i class="iconfont icon-bingo"></i>
</span>
<span class="number">({{ item.count }})</span>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
deviceTypeArr: [],
allArray: [],
};
},
props: {
// 传进来的参数
filterList: Array,
},
created() {
this.deviceTypeArr = this.filterList
.filter((item) => item.type > 0)
.map((item) => item.type);
// 全选时的数组内容
this.allArray = [...this.deviceTypeArr];
},
methods: {
fliterTypeChange(data) {
const { type } = data;
// 如果点的是全选
if (type == "all") {
if (this.deviceTypeArr.length == this.filterList.length - 1) {
this.deviceTypeArr = [];
} else {
this.deviceTypeArr = [...this.allArray];
}
} else {
const index = this.deviceTypeArr.indexOf(type);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(type);
}
}
this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
},
},
};
</script>
<style lang="scss" scoped>
.fliter-vue {
display: flex;
}
.filter {
margin-right: 30px;
margin-top: 5px;
font-size: 14px;
.text {
cursor: pointer;
position: relative;
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
top: 0px;
color: rgba(0, 0, 0, 0);
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #000000;
left: -12px;
top: 50%;
margin-top: -5px;
}
&:hover {
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, .5);
}
}
&.active {
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, 1);
}
}
}
.number {
font-weight: 500;
color: #1890ff;
}
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue2.vue 0 → 100644
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:14:11
* @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/monitorData/component/charsData/Filter.vue
-->
<template>
<div class="fliter-vue">
<div
class="filter"
v-for="(item, index) in filterList"
:key="item.value"
:class="`one-${item.state}`"
>
<!-- 全部 -->
<template v-if="index == 0">
<span
class="text"
@click="fliterTypeChange(item)"
:class="{ active: deviceTypeArr.length == filterList.length - 1}"
>{{ item.value }}
<i class="iconfont icon-bingo"></i>
</span>
<span class="number">({{ item.count }})</span>
</template>
<template v-else>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}
<i class="iconfont icon-bingo"></i>
</span>
<span class="number">({{ item.count }})</span>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
deviceTypeArr: [],
allArray: [],
};
},
props: {
// 传进来的参数
filterList: Array,
},
created() {
this.deviceTypeArr = this.filterList
.filter((item) => item.state > 0)
.map((item) => item.state);
// 全选时的数组内容
this.allArray = [...this.deviceTypeArr];
},
methods: {
fliterTypeChange(data) {
const { state } = data;
// 如果点的是全选
if (state == "all") {
if (this.deviceTypeArr.length == this.filterList.length - 1) {
this.deviceTypeArr = [];
} else {
this.deviceTypeArr = [...this.allArray];
}
} else {
const index = this.deviceTypeArr.indexOf(state);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(state);
}
}
this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
},
},
};
</script>
<style lang="scss" scoped>
$one: #06d7b1 !important;
$two: #ff6c68 !important;
$three: #bbbbbb !important;
$all: #000000;
.fliter-vue {
display: flex;
}
.filter {
margin-right: 30px;
margin-top: 5px;
font-size: 14px;
.text {
cursor: pointer;
position: relative;
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
top: 0px;
color: rgba(0, 0, 0, 0);
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #000000;
left: -12px;
top: 50%;
margin-top: -5px;
}
&:hover {
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, .5);
}
}
&.active {
.iconfont {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, 1);
}
}
}
.number {
font-weight: 500;
color: #1890ff !important;
}
&.one-all {
.number,
.text {
color: $all;
}
}
&.one-1 {
.number,
.text {
color: $one;
}
}
&.one-2 {
.number,
.text {
color: $two;
}
}
&.one-3 {
.number,
.text {
color: $three;
}
}
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 15:33:25
* @LastEditTime: 2022-03-29 10:12:49
* @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/monitorData/component/charsData/CzCard.vue
......@@ -16,7 +16,7 @@
>
<div class="title flex">
<div class="left">
<div class="device">{{title}}</div>
<div class="device">{{ title }}</div>
<slot name="chackbox" />
</div>
<div class="right">
......@@ -28,7 +28,11 @@
</div>
</div>
<div ref="container">
<slot name="container" />
<transition name="fade" mode="out-in">
<div :key="listNum">
<slot name="container" />
</div>
</transition>
</div>
</div>
</div>
......@@ -38,16 +42,22 @@
import { mapGetters } from "vuex";
export default {
props:{
title:String,
props: {
title: String,
// 动画需求
listNum: {
type: Number,
default: "1",
},
},
data() {
return {
carHide: true,
transitionHeight: "60px",
};
},
computed: {
...mapGetters(["sidebar"]),
},
......@@ -56,25 +66,32 @@ export default {
setTimeout(this.getHeight, 200);
// this.getHeight();
},
listNum(val) {
console.log(val);
setTimeout(() => {
this.getHeight();
}, 300);
},
},
mounted() {
this.getHeight();
},
methods: {
hide() {
this.carHide = !this.carHide;
this.getHeight();
},
getHeight() {
const { height } = this.$refs?.container?.getBoundingClientRect();
if(!height){
return;
}
// if (!height) {
// return;
// }
// 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
if (height > 0) {
this.transitionHeight = height + 60 + 18 + "px";
}else{
this.transitionHeight="60px";
} else {
this.transitionHeight = "60px";
}
},
},
......@@ -82,6 +99,13 @@ export default {
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.25s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.card {
transition: all 0.5s;
// height: 212px;
......@@ -92,12 +116,12 @@ export default {
box-sizing: border-box;
padding: 15px 22px 18px 22px;
overflow: hidden;
margin-bottom:20px;
margin-bottom: 20px;
&.hide {
height: 60px !important;
}
.title {
margin-bottom: 12px;
margin-bottom: 16px;
margin-left: 40px;
.left {
display: flex;
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-26 17:15:43
* @LastEditTime: 2022-03-28 15:05:04
* @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/monitorData/component/charsData.vue
......@@ -46,6 +46,8 @@ export default {
<style lang="scss" scoped>
.chars-data {
padding: 26px 108px 0 88px;
// padding: 26px 108px 0 88px;
padding: 20px;
padding-right: 50px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ 7617257a
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-25 15:27:44
* @LastEditTime: 2022-03-28 17:20:55
* @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/monitorData/index.vue
......@@ -16,7 +16,11 @@
@click="isComChange(index)"
></div>
</div>
<component :is="currentTabComponent"></component>
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</transition>
</div>
</template>
......@@ -50,7 +54,7 @@ export default {
display: flex;
justify-content: right;
margin-right: 37px;
padding-top: 38px;
padding-top: 15px;
div {
cursor: pointer;
padding: 4px;
......
gassafetyprogress-web/src/views/regulation/device/index.vue
View file @ 7617257a
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
......@@ -19,18 +25,17 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="所在地址" prop="deviceAddr">-->
<!-- <el-input-->
<!-- v-model="queryParams.deviceAddr"-->
<!-- placeholder="请输入所在地址"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
......@@ -365,7 +370,7 @@
<el-row>
<el-col :span="11">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%">
<el-select v-model="form.deviceType" placeholder="请选择设备类型">
<el-option label="阀井" value="1" />
<el-option label="调压箱" value="2" />
</el-select>
......@@ -374,7 +379,7 @@
<el-col :span="11">
<el-form-item label="权属单位" prop="beyondEnterpriseId">
<el-select v-model="form.beyondEnterpriseId" style="width: 100%" placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
<el-select v-model="form.beyondEnterpriseId" placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
<el-option v-for="item in test" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId">
</el-option>
</el-select>
......
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