Commit 8bfae5f3 authored by liuyangyang's avatar liuyangyang

Merge branch 'dev' of https://app.bmetech.com/liuzhaohui/dctomproject into dev

parents 496e7dd0 d48ee858
......@@ -7,11 +7,13 @@ const ENV = import.meta.env
const requestObj = {};
const source = axios.CancelToken.source()
const service = axios.create({
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
}
},
cancelToken: source.token
});
service.interceptors.request.use(
......
......@@ -91,14 +91,14 @@ const handleSave = ()=> {
width: 100%;
.real-btn {
width: auto;
height: 28px;
height: 32px;
background: rgb(64, 158, 255);
border: 1px solid rgb(64, 158, 255);
border-radius: 4px;
box-shadow: 0 1px 9px 0 rgba(12, 123, 255, 0.3) inset;
text-align: center;
padding: 0 16px;
line-height: 28px;
line-height: 32px;
color: rgba(255, 255, 255, 0.85);
margin-right: 16px;
cursor: pointer;
......
......@@ -4,6 +4,7 @@
<el-form-item label="事件名称:">
<el-select v-model="formInline.eventNameId"
placeholder="请选择"
style="width: 280px"
>
<el-option
v-for="(item, index) in basicConfiguration.ticketEventName"
......@@ -20,16 +21,20 @@
<el-form-item label="所属区域:">
<el-select v-model="formInline.branchFactoryIds"
placeholder="请选择"
style="width: 180px"
>
<el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.branchFactoryId"
:label="item.branchFactory"
:value="item.branchFactoryId"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="formInline.deviceType">
<el-select v-model="formInline.deviceType"
style="width: 180px"
placeholder="请选择"
>
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in basicConfiguration.deviceList"
......@@ -41,14 +46,13 @@
</el-select>
</el-form-item>
<el-form-item label="发生时间">
<el-date-picker type="daterange"
<el-date-picker type="datetimerange"
v-model="formInline.createTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
......@@ -97,6 +101,7 @@
:show-dialog="doneDialog.show"
:title="doneDialog.title"
:width="doneDialog.width"
:btn-group="doneDialog.btnGroup"
@handleBtn="saveDeal"
@close:showDialog="doneDialog.show = false"
>
......@@ -121,15 +126,15 @@
<div class="alarm-content">
<div class="content-item">
<span class="name">编号:</span>
<span class="value">{{ workSheetDetail.workTicketNo }}</span>
<span class="value">{{ workSheetDetail?.workTicketNo }}</span>
</div>
<div class="content-item">
<span class="name">创建时间:</span>
<span class="value">{{ workSheetDetail.createTime }}</span>
<span class="value">{{ workSheetDetail?.createTime }}</span>
</div>
<div class="content-item">
<span class="name">闭环控制状态:</span>
<span class="value work-status">{{ workSheetDetail.desc }}</span>
<span class="value work-status">{{ workSheetDetail?.desc }}</span>
</div>
</div>
</el-col>
......@@ -141,12 +146,12 @@
<div class="content-item">
<span class="name">所属区域:</span>
<span class="value">{{
workSheetDetail.branchFactory || "--"
workSheetDetail?.branchFactory || "--"
}}</span>
</div>
<div class="content-item">
<span class="name">发生位置:</span>
<span class="value">{{ workSheetDetail.deviceName }}</span>
<span class="value">{{ workSheetDetail?.deviceName }}</span>
</div>
<div
class="content-item"
......@@ -179,19 +184,16 @@
workSheetDetail.warnType != 4 &&
workSheetDetail.warnType != 18
"
>{{ workSheetDetail.value }}{{ workSheetDetail.unit }}</span
>{{ workSheetDetail?.value }}{{ workSheetDetail?.unit }}</span
>
<span
class="value alarm-value"
v-else-if="workSheetDetail?.warnType == 4"
>{{ warnValueFilter(workSheetDetail?.offlineTime) }}</span>
</div>
<div class="content-item" v-if="workSheetDetail.convertValue">
<div class="content-item" v-if="workSheetDetail?.convertValue">
<span class="name">折算值:</span>
<span class="value alarm-value"
>{{ workSheetDetail.convertValue
}}{{ workSheetDetail.unit }}</span
>
<span class="value alarm-value">{{ workSheetDetail?.convertValue }}{{ workSheetDetail?.unit }}</span>
</div>
<div class="content-item">
<span class="name">告警时间:</span>
......@@ -537,7 +539,7 @@
<div class="label-title">原因分析</div>
<el-input
class="input-style"
v-model="form.reason"
v-model="dialogReason"
type="textarea"
:rows="3"
placeholder="请输入内容"
......@@ -551,7 +553,7 @@
<div>
<el-input
class="input-style"
v-model="form.measure"
v-model="dialogMeasure"
type="textarea"
:rows="3"
placeholder="请输入内容"
......@@ -565,22 +567,24 @@
<common-dialog
:showDialog="assignDialog.show"
:title="assignDialog.title"
:btn-group="assignDialog.btnGroup"
:width="assignDialog.width"
@handleBtn="saveAssign"
@close:showDialog="assignDialog.show = false"
>
<el-form :inline="true">
<el-form>
<el-form-item label="分派人:">
<el-select v-model="handlerPeopleId" filterable placeholder="请选择分派人">
<el-option
v-for="(item, i) in handlerPeople"
:key="i"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addPerson">新增</el-button>
<div class="inline-box">
<el-select v-model="handlerPeopleId" filterable placeholder="请选择分派人">
<el-option
v-for="(item, i) in handlerPeople"
:key="i"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-button type="primary" class="addBtn" @click="addPerson">新增</el-button>
</div>
</el-form-item>
<el-form-item label="已分派人:">
<el-tag
......@@ -601,7 +605,7 @@
import { ref, reactive, onMounted, onBeforeUnmount,computed } from 'vue'
import CommonTable from "@/components/commonTable/index.vue";
import commonDialog from "./components/dialog.vue";
import { getDataFun, postDataJson, postDataJSON } from '@/request/method.js';
import { getData, getDataFun, postDataJson, postDataJSON } from '@/request/method.js';
import moment from 'moment';
import { getToken } from '@/utils/auth.js';
import { ElMessage } from 'element-plus'
......@@ -625,9 +629,27 @@ const workTicketNo = ref('');
const handlerPeopleId = ref('');
const handlerPeople = ref([]);
const getHandlerPeople = async () => {
const url = '/transfer-work-ticket-pc/getTicketHandler?pageSize=999&pageNo=1';
try {
let result = await getData(url);
if (result && result.code === 1) {
const { records } = result.data;
handlerPeople.value = records;
}
} catch (e) {
ElMessage({
message: '接口报错',
type: 'error'
})
}
}
const assignDialog = ref({
title: '闭环控制分派',
show: false,
width: '30%',
btnGroup: [
{
attrKey: 'save',
......@@ -671,7 +693,7 @@ const saveAssign = ()=> {
})
});
const params = {
workTicketNo,
workTicketNo: workTicketNo.value,
receiveUser: '',
receiveUserName: '',
handleUsers: tempArr
......@@ -771,7 +793,7 @@ const onReset =()=> {
const doneDialog = ref({
title: '闭环控制分派',
show: false,
width: '50%',
width: '45%',
btnGroup: [
{
attrKey: 'save',
......@@ -788,8 +810,9 @@ const viewData = {
const handleDone = async (data)=> {
doneDialog.value.title = data.eventName;
workTicketNo.value = data.workTicketNo;
let res = await getDetail(data.workTicketNo);
doneDialog.value.show = true;
/*let res = await getDetail(data.workTicketNo);
personTag.value = [];
if (res.handleUsers && res.handleUsers.length > 0) {
res.handleUsers.forEach(item => {
......@@ -801,12 +824,13 @@ const handleDone = async (data)=> {
});
});
}
disposeWorkSheetDetail(res);*/
disposeWorkSheetDetail(res);
}
const saveDeal = () => {
const { workTicketNo, handleValue, imgUrl } = workSheetDetail.value;
const { resson,measure } = this.form;
const reason = dialogReason.value;
const measure = dialogMeasure.value;
const param = { workTicketNo, handleValue, reason, measure, imgUrl };
const url = '/transaction/doc/finishTransaction';
disposeHandle(url, param);
......@@ -833,8 +857,10 @@ const disposeHandle = async (url, param) => {
// 分派
const handleDispatch = async (data)=> {
assignDialog.value.show = true;
/*let res = await getDetail(data.workTicketNo);
getHandlerPeople();
workTicketNo.value = data.workTicketNo;
let res = await getDetail(data.workTicketNo);
assignDialog.value.show = true;
personTag.value = [];
if (res.handleUsers && res.handleUsers.length > 0) {
res.handleUsers.forEach(item => {
......@@ -845,7 +871,7 @@ const handleDispatch = async (data)=> {
userName: item.userName
});
});
}*/
}
}
const getDetail = (workTicketNo) => {
......@@ -867,42 +893,7 @@ const changeBag = (data)=>{
}
const tableData = ref([
{
id: 1,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 1
},
{
id: 2,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 2
},
{
id: 3,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '20',
level: 3
}
]);
const tableData = ref([]);
const tableColumns = ref([
{
......@@ -983,8 +974,9 @@ const getWarnAndTicketConfigMap = ()=> {
}
getDataFun(url,params).then(res => {
if (res && res.code === 1) {
const { ticketEventName, eventType } = res.data;
const { ticketEventName, deviceType} = res.data;
basicConfiguration.ticketEventName = basicConfiguration.ticketEventName.concat(ticketEventName);
basicConfiguration.deviceList = deviceType;
}
});
};
......@@ -1076,10 +1068,8 @@ const disposeType = (list)=> {
const srcList = ref([]);
const form = ref({
reason: "",
measure: "",
});
const dialogReason = ref('');
const dialogMeasure = ref('');
const imgUrlList = ref([]);
const alarmImags = ref([]);
const disposeWorkSheetDetail = (obj)=> {
......@@ -1115,9 +1105,9 @@ const disposeWorkSheetDetail = (obj)=> {
}
onMounted(()=>{
// getBranchTypeList();
// getWarnAndTicketConfigMap();
// searchData();
getBranchTypeList();
getWarnAndTicketConfigMap();
searchData();
});
const formModel = ref({
......@@ -1153,48 +1143,48 @@ const handlePaginationChange = (pagination) => {
color: #fff;
text-align: center;
}
.table-box {
height: calc(100vh - 200px);
}
.yellow {
// color: #faa508;
position: relative;
&::before {
content: ' ';
content: " ";
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffb224;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
.red {
position: relative;
&::before {
content: ' ';
content: " ";
width: 8px;
height: 8px;
border-radius: 50%;
background: #db001d;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
.purple {
position: relative;
&::before {
content: ' ';
content: " ";
width: 8px;
height: 8px;
border-radius: 50%;
background: #aa05fa;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
.view-btn {
......@@ -1204,6 +1194,7 @@ const handlePaginationChange = (pagination) => {
.form-box {
height: 60vh;
overflow-y: auto;
overflow-x: hidden;
.label-title {
position: relative;
padding-left: 14px;
......@@ -1283,5 +1274,14 @@ const handlePaginationChange = (pagination) => {
background: #2182a0;
border: 1px solid #2182a0;
}
:deep(.el-tag) {
margin-right: 10px;
}
.inline-box {
display: flex;
.addBtn {
margin-left: 10px;
}
}
}
</style>
\ No newline at end of file
......@@ -4,6 +4,7 @@
<el-form-item label="事件名称:">
<el-select v-model="formInline.eventNameId"
placeholder="请选择"
style="width: 280px"
>
<el-option
v-for="(item, index) in basicConfiguration.ticketEventName"
......@@ -20,17 +21,20 @@
<el-form-item label="所属区域:">
<el-select v-model="formInline.branchFactoryIds"
placeholder="请选择"
style="width: 180px"
>
<el-option label="全部" value="" />
<el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.branchFactoryId"
:label="item.branchFactory"
:value="item.branchFactoryId"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="formInline.deviceType">
<el-select v-model="formInline.deviceType"
style="width: 180px"
placeholder="请选择"
>
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in basicConfiguration.deviceList"
......@@ -42,14 +46,13 @@
</el-select>
</el-form-item>
<el-form-item label="发生时间">
<el-date-picker type="daterange"
<el-date-picker type="datetimerange"
v-model="formInline.createTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
......@@ -935,42 +938,7 @@ const changeBag = (data)=>{
}
const tableData = [
{
id: 1,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 1
},
{
id: 2,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 2
},
{
id: 3,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '20',
level: 3
}
];
const tableData = ref([]);
const tableColumns = ref([
{
......@@ -1051,8 +1019,9 @@ const getWarnAndTicketConfigMap = ()=> {
}
getDataFun(url,params).then(res => {
if (res && res.code === 1) {
const { ticketEventName, eventType } = res.data;
const { ticketEventName, deviceType } = res.data;
basicConfiguration.ticketEventName = basicConfiguration.ticketEventName.concat(ticketEventName);
basicConfiguration.deviceList = deviceType;
}
});
};
......@@ -1143,9 +1112,9 @@ const disposeType = (list)=> {
}
onMounted(() => {
// getBranchTypeList();
// getWarnAndTicketConfigMap();
// searchData();
getBranchTypeList();
getWarnAndTicketConfigMap();
searchData();
});
const currentPage = ref(1);
......@@ -1176,6 +1145,9 @@ const handlePaginationChange = (pagination) => {
color: #fff;
text-align: center;
}
.table-box {
height: calc(100vh - 200px);
}
.yellow {
// color: #faa508;
position: relative;
......@@ -1186,9 +1158,8 @@ const handlePaginationChange = (pagination) => {
border-radius: 50%;
background: #ffb224;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
.red {
......@@ -1200,9 +1171,8 @@ const handlePaginationChange = (pagination) => {
border-radius: 50%;
background: #db001d;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
......@@ -1215,9 +1185,8 @@ const handlePaginationChange = (pagination) => {
border-radius: 50%;
background: #aa05fa;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
left: 0;
top: 6px;
}
}
.view-btn {
......
<template>
<div class="title layout1">
<span>告警:</span>
<span class="jump-icon">>></span>
</div>
<div class="content">
<div class="item" v-for="item in listInfo" :key="item.id">
{{item.info}}
</div>
</div>
</template>
<script setup>
const props = defineProps({
listInfo: {
type: Array,
default: () => [],
},
});
</script>
<style scoped lang="scss">
.title {
height: 20px;
.jump-icon {
font-weight: bold;
color: #018796;
}
}
.content {
width: 100%;
height: calc(15vh - 30px);
padding: 10px 0px 10px 30px;
box-sizing: border-box;
overflow-y: auto;
.item {
width: 100%;
}
}
.content::-webkit-scrollbar {
width: 2px;
background-color: rgba(13, 15, 18, 0.1);
}
.layout1 {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
\ No newline at end of file
<template>
<div class="top-box">
<el-form
:model="form"
label-width="auto"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="除尘器名称">
<el-select
v-model="form.dustName"
placeholder="请选择除尘器"
style="width: 240px"
>
</el-select>
</el-form-item>
<el-form-item label="分析时间">
<el-date-picker
v-model="form.dateValue"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</el-form-item>
</el-form>
</div>
<div class="layout1">
<div class="left-box">
<div class="part1">
<div class="chart-box" v-for="(item, index) in chartData" :key="item">
<div :id="'chart' + index" class="chart-item"></div>
</div>
</div>
<div class="warn-info"></div>
<div class="dust-box">
<div class="top-box">
<el-form
:model="form"
label-width="auto"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="除尘器名称">
<el-select
v-model="form.dusterNo"
placeholder="请选择除尘器"
style="width: 240px"
>
<el-option
v-for="item in dusterList"
:key="item.dusterNo"
:label="item.dusterName"
:value="item.dusterNo"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="分析时间">
<el-date-picker
v-model="form.dateValue"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</el-form-item>
</el-form>
</div>
<div class="right-box">
<div class="part1"></div>
<div class="part2">
<div class="dust-title">2号窑尾除尘器</div>
<div class="dust-info">
<div class="info-item" v-for="item in dustInfo" :key="item.label">
<span class="lable">{{ item.label }}</span>
<span class="value">{{ item.value }}</span>
<span class="unit">{{ item.unit }}</span>
<div class="layout1">
<div class="left-box">
<div class="part1">
<div class="chart-box" v-for="(item, index) in chartData" :key="item">
<div :id="'chart' + index" class="chart-item"></div>
</div>
</div>
<div class="indicator-box">
<div class="indicator-item" id="indicatorOne"></div>
<div class="indicator-item" id="indicatorTwo"></div>
<div class="warn-info">
<warnCom :listInfo="testList"></warnCom>
</div>
<div class="position-info">
<div class="left">
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
<div class="right-box">
<div class="part1"></div>
<div class="part2">
<div class="dust-title">2号窑尾除尘器</div>
<div class="dust-info">
<div class="info-item" v-for="item in dustInfo" :key="item.label">
<span class="lable">{{ item.label }}</span>
<span class="value">{{ item.value }}</span>
<span class="unit">{{ item.unit }}</span>
</div>
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
<div class="indicator-box">
<div class="indicator-item" id="indicatorOne"></div>
<div class="indicator-item" id="indicatorTwo"></div>
</div>
<div class="position-info">
<div class="left">
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
</div>
<div class="right">
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
</div>
</div>
</div>
<div class="right">
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
<div class="other-info">
<div>
<span>反吹仓室:</span>
<span>3#仓-1排</span>
</div>
<div class="part">
<div class="point warn" v-for="item in 6" :key="item"></div>
<div>
<span>泄露仓室:</span>
<span>5#仓、10#仓、13#仓</span>
</div>
<div>
<span>故障仓室:</span>
<span>5#仓、10#仓、13#仓</span>
</div>
</div>
</div>
<div class="other-info">
<div>
<span>反吹仓室:</span>
<span>3#仓-1排</span>
</div>
<div>
<span>泄露仓室:</span>
<span>5#仓、10#仓、13#仓</span>
</div>
<div>
<span>故障仓室:</span>
<span>5#仓、10#仓、13#仓</span>
</div>
<div class="warn-info">
<warnCom :listInfo="testList"></warnCom>
</div>
</div>
<div class="warn-info"></div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { getDataFun } from "@/request/method.js";
import { useUsersStore } from "@/pinia/user.js";
import moment from "moment";
import warnCom from "./components/warn.vue";
const userStore = useUsersStore();
const form = reactive({
dustName: "",
dateValue: [],
dusterNo: "",
dateValue: [
new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 7),
new Date(),
],
});
const option = {
xAxis: {
......@@ -125,12 +145,29 @@ const initChart = () => {
});
};
const dustInfo = reactive([
{ label: "压差", value: "0.0", unit: "KPa" },
{ label: "粉尘浓度", value: "0.0", unit: "mg/m3" },
{ label: "电磁阀数量", value: "0.0", unit: "KPa" },
{ label: "仓室数量", value: "0.0", unit: "KPa" },
{ label: "布袋检测仪数量", value: "0.0", unit: "KPa" },
{ label: "脉冲检测仪数量", value: "0.0", unit: "KPa" },
{
label: "压差",
value: "0.0",
unit: "",
key: "pressureDiff",
unitKey: "pressureDiffUnit",
},
{
label: "粉尘浓度",
value: "0.0",
unit: "",
key: "dustConcentration",
unitKey: "dustConcentrationUnit",
},
{ label: "电磁阀数量", value: "0.0", unit: "", key: "valveNum" },
{ label: "仓室数量", value: "0.0", unit: "", key: "compartNum" },
{ label: "布袋检测仪数量", value: "0.0", unit: "", key: "bagDetectorNum" },
{
label: "脉冲检测仪数量",
value: "0.0",
unit: "",
key: "pulseDetectorNum",
},
]);
const option2 = {
series: [
......@@ -214,25 +251,165 @@ const indicatorFun = (target, domId, option) => {
target.value = echarts.init(document.getElementById(domId));
target.value.setOption(option);
};
const dusterList = ref([]);
// 获取除尘器名称
const getDusterNameEnum = () => {
const url = "/bag/cycle/getDusterList";
getDataFun(url, {})
.then((res) => {
// dusterList.value = (res && res.data) || [];
dusterList.value = [
{
dusterNo: "wp001",
dusterName: "雾炮001",
},
];
// 判断除尘器名称是否有值
form.dusterNo = dusterList.value[0].dusterNo;
})
.catch(() => {
dusterList.value = [];
});
};
// 获取健康度指数
const getHealthIndex = () => {
if (!form.dusterNo) {
return;
}
const url = "/dusterStatusMonitor/healthIndexCurve";
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD HH:mm:ss"),
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD HH:mm:ss"),
};
getDataFun(url, params).then((res) => {
if (res && res.data) {
}
});
};
// 获取压力差
// 获取能耗
// 获取除尘器详情
const getDustDetail = () => {
if (!form.dusterNo) {
return;
}
const url = "/dusterStatusMonitor/dusterDetail";
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD HH:mm:ss"),
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD HH:mm:ss"),
};
getDataFun(url, params)
.then((res) => {
if (res && res.data) {
for (let i = 0; i < dustInfo.length; i++) {
dustInfo[i].value = res.data[dustInfo[i].key] || 0;
dustInfo[i].unit = "个";
(dustInfo[i].unitKey &&
(dustInfo[i].unit = res.data[dustInfo[i].unitKey])) ||
"个";
}
} else {
dustInfo.forEach((item) => {
item.value = 0;
});
}
})
.catch(() => {
dustInfo.forEach((item) => {
item.value = 0;
});
});
};
const testList = reactive([
{
id: 1,
info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
},
{
id: 2,
info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
},
{
id: 3,
info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
},
{
id: 4,
info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
},
{
id: 5,
info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
},
]);
const closedLoopInfoList = reactive([]);
const warnInfoList = reactive([]);
// 获取告警信息
const getAlarmInfo = () => {
if (!form.dusterNo) {
return;
}
const url = "/dusterStatusMonitor/warnAndClosedLoopInfo";
const params = {
customerId: userStore.customerId,
deviceNo: form.dusterNo,
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD HH:mm:ss"),
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD HH:mm:ss"),
};
getDataFun(url, params)
.then((res) => {
closedLoopInfoList =
(res && res.data && res.data.closedLoopInfoList) || [];
warnInfoList = (res && res.data && res.data.warnInfoList) || [];
})
.catch(() => {
closedLoopInfoList = [];
warnInfoList = [];
});
};
onMounted(() => {
getDusterNameEnum();
initChart();
indicatorFun(indicatorOneInstance, "indicatorOne", option2);
indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
});
watch(
() => form.dusterNo,
() => {
getHealthIndex();
getDustDetail();
getAlarmInfo();
}
);
</script>
<style lang="scss" scoped>
$borderColor: #bbbdc3;
.dust-box {
width: 100%;
height: calc(100% - 14px);
background: #fff;
box-sizing: border-box;
background: #ffffff;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 1rem;
overflow: hidden;
}
.top-box {
}
.left-box {
width: 45%;
.part1 {
border-radius: 15px;
background-color: #fff;
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
width: 100%;
height: 100%;
height: 70vh;
height: 67vh;
.chart-box {
width: 100%;
height: 31%;
......@@ -248,15 +425,17 @@ $borderColor: #bbbdc3;
.part1 {
width: 100%;
height: 10vh;
border-radius: 15px;
background-color: #fff;
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
}
.part2 {
margin-top: 20px;
width: 100%;
height: calc(60vh - 20px);
border-radius: 15px;
background-color: #fff;
height: calc(57vh - 20px);
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
overflow: hidden;
overflow-y: auto;
padding: 20px 0;
......@@ -307,7 +486,8 @@ $borderColor: #bbbdc3;
width: 48%;
flex-wrap: wrap;
// box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px 0px;
box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px
0px;
// box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
}
.part {
......@@ -339,12 +519,18 @@ $borderColor: #bbbdc3;
border-top: 1px solid $borderColor;
}
}
.part2::-webkit-scrollbar {
width: 2px;
background-color: rgba(13, 15, 18, 0.1);
}
}
.warn-info {
margin-top: 10px;
height: 15vh;
border-radius: 15px;
background-color: #fff;
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 10px 30px;
}
.layout1 {
display: flex;
......
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