Commit daba6cf8 authored by lei's avatar lei

fix:空压机表头问题

parent 14730474
...@@ -128,11 +128,9 @@ export default { ...@@ -128,11 +128,9 @@ export default {
this.$router.push(`/screen/${val}`); this.$router.push(`/screen/${val}`);
}, },
goToSys() { goToSys() {
var link = this.$router.resolve({ this.$router.push({
path: "/", path: "/",
}); });
window.open(link.href);
return;
}, },
openVideo() { openVideo() {
// window.open(this.videoData); // window.open(this.videoData);
......
...@@ -4,13 +4,21 @@ ...@@ -4,13 +4,21 @@
<div class="left"> <div class="left">
<div class="item-class" v-for="item in leftList" :key="item.name"> <div class="item-class" v-for="item in leftList" :key="item.name">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<span class="item-name" :style="{ color: item.color }">{{ item.name }}</span> <span class="item-name" :style="{ color: item.color }">{{
item.name
}}</span>
<span class="item-value">{{ item.value }}</span> <span class="item-value">{{ item.value }}</span>
</div> </div>
<div class="left-botton"> <div class="left-botton">
<span class="item-name">主控<br />位置</span> <span class="item-name">主控<br />位置</span>
<span class="item-value"> <span class="item-value">
<count-to :start-val="0" :end-val="Number(zgposition)" :duration="860" :decimals="2" separator="," /> <count-to
:start-val="0"
:end-val="Number(zgposition)"
:duration="860"
:decimals="2"
separator=","
/>
</span> </span>
</div> </div>
</div> </div>
...@@ -20,15 +28,26 @@ ...@@ -20,15 +28,26 @@
<div class="center-box"> <div class="center-box">
<div class="dianti-target" :style="targetStyle">{{ displayTrend }}</div> <div class="dianti-target" :style="targetStyle">{{ displayTrend }}</div>
<div class="dianti-number"> <div class="dianti-number">
<p v-for="(item, index) in elevatorTimes" :key="'diantiNmuber' + index"> <p
v-for="(item, index) in elevatorTimes"
:key="'diantiNmuber' + index"
>
<span>{{ item.name }}</span <span>{{ item.name }}</span
><span>{{ item.value }}</span> ><span>{{ item.value }}</span>
</p> </p>
</div> </div>
<div class="dianti-peizhong" :style="counterweightStyle"></div> <div class="dianti-peizhong" :style="counterweightStyle"></div>
<div class="dianti-box" :class="{ active: isMoving }" :style="elevatorStyle"></div> <div
class="dianti-box"
:class="{ active: isMoving }"
:style="elevatorStyle"
></div>
<div class="dianti-louceng" style="top: 290px; left: 526px"> <div class="dianti-louceng" style="top: 290px; left: 526px">
<div class="louceng-item" v-for="(floor, index) in floors" :key="index"> <div
class="louceng-item"
v-for="(floor, index) in floors"
:key="index"
>
{{ floor }} {{ floor }}
</div> </div>
</div> </div>
...@@ -37,12 +56,21 @@ ...@@ -37,12 +56,21 @@
<!-- 右侧状态区 --> <!-- 右侧状态区 -->
<div class="right"> <div class="right">
<div class="right-item-class" v-for="(item, index) in rightList" :key="'right-' + index"> <div
class="right-item-class"
v-for="(item, index) in rightList"
:key="'right-' + index"
>
<div class="left-item-box">{{ item.name }}</div> <div class="left-item-box">{{ item.name }}</div>
<div class="right-item-box"> <div class="right-item-box">
<div <div
class="right-item-box-item" class="right-item-box-item"
v-for="(value, subIndex) in [item.value1, item.value2, item.value3, item.value4]" v-for="(value, subIndex) in [
item.value1,
item.value2,
item.value3,
item.value4,
]"
:key="'value-' + index + '-' + subIndex" :key="'value-' + index + '-' + subIndex"
:class="{ active: value.status == 1 }" :class="{ active: value.status == 1 }"
> >
...@@ -54,13 +82,22 @@ ...@@ -54,13 +82,22 @@
<div class="title">提升机巡检记录</div> <div class="title">提升机巡检记录</div>
<div class="right-item-body"> <div class="right-item-body">
<div class="table-header"> <div class="table-header">
<span v-for="(header, index) in tableHeaders" :key="index">{{ header }}</span> <span v-for="(header, index) in tableHeaders" :key="index">{{
header
}}</span>
</div> </div>
<div class="table-content" v-for="(item, index) in tableList" :key="'table-' + index"> <div
class="table-content"
v-for="(item, index) in tableList"
:key="'table-' + index"
>
<span>{{ item.user_name }}</span> <span>{{ item.user_name }}</span>
<span>{{ item.device_name }}</span> <span>{{ item.device_name }}</span>
<span>{{ item.device_state == 0 ? '正常' : '异常' }}</span> <span :class="item.device_state == 0 ? '' : 'red'">{{
<span>{{ parseTime(item.polling_data, '{y}-{m}-{d}') }}</span> item.device_state == 0 ? "正常" : "异常"
}}</span>
<span>{{ parseTime(item.polling_data, "{y}-{m}-{d}") }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -69,12 +106,16 @@ ...@@ -69,12 +106,16 @@
</template> </template>
<script> <script>
import CountTo from 'vue-count-to'; import CountTo from "vue-count-to";
import { getElevatorData, getElevatorTimes, getRecentFive } from '@/api/tyler/jst'; import {
getElevatorData,
getElevatorTimes,
getRecentFive,
} from "@/api/tyler/jst";
// 修改位置配置常量(添加中间点容差) // 修改位置配置常量(添加中间点容差)
const POSITIONS = [ const POSITIONS = [
{ {
name: '去井口', name: "去井口",
value: 0, value: 0,
depth: 0, depth: 0,
glposy: 76, glposy: 76,
...@@ -82,7 +123,7 @@ const POSITIONS = [ ...@@ -82,7 +123,7 @@ const POSITIONS = [
range: [-205, 0], range: [-205, 0],
}, },
{ {
name: '去一中', name: "去一中",
value: 1, value: 1,
depth: 410, depth: 410,
glposy: 253, glposy: 253,
...@@ -90,7 +131,7 @@ const POSITIONS = [ ...@@ -90,7 +131,7 @@ const POSITIONS = [
range: [-430, -206], range: [-430, -206],
}, },
{ {
name: '去二中', name: "去二中",
value: 2, value: 2,
depth: 450, depth: 450,
glposy: 338, glposy: 338,
...@@ -98,7 +139,7 @@ const POSITIONS = [ ...@@ -98,7 +139,7 @@ const POSITIONS = [
range: [-470, -431], range: [-470, -431],
}, },
{ {
name: '去三中', name: "去三中",
value: 3, value: 3,
depth: 490, depth: 490,
glposy: 422, glposy: 422,
...@@ -106,7 +147,7 @@ const POSITIONS = [ ...@@ -106,7 +147,7 @@ const POSITIONS = [
range: [-510, -471], range: [-510, -471],
}, },
{ {
name: '去四中', name: "去四中",
value: 4, value: 4,
depth: 530, depth: 530,
glposy: 506, glposy: 506,
...@@ -114,7 +155,7 @@ const POSITIONS = [ ...@@ -114,7 +155,7 @@ const POSITIONS = [
range: [-550, -511], range: [-550, -511],
}, },
{ {
name: '去五中', name: "去五中",
value: 5, value: 5,
depth: 570, depth: 570,
glposy: 596, glposy: 596,
...@@ -132,7 +173,7 @@ export default { ...@@ -132,7 +173,7 @@ export default {
tableList: [], tableList: [],
// 电梯状态 // 电梯状态
zgposition: 0, zgposition: 0,
zgtrend: '待命', zgtrend: "待命",
isMoving: false, isMoving: false,
// 动画控制 // 动画控制
...@@ -144,31 +185,33 @@ export default { ...@@ -144,31 +185,33 @@ export default {
targetPos: null, targetPos: null,
// 静态配置 // 静态配置
floors: ['一中', '二中', '三中', '四中', '五中'], floors: ["一中", "二中", "三中", "四中", "五中"],
tableHeaders: ['检查人', '检查设备', '是否正常', '日期'], tableHeaders: ["检查人", "检查设备", "是否正常", "日期"],
elevatorTimes: [], elevatorTimes: [],
}; };
}, },
computed: { computed: {
// 电梯状态显示 // 电梯状态显示
displayTrend() { displayTrend() {
return this.zgtrend.includes('待命') ? `${this.zgtrend}` : `前往:${this.zgtrend}`; return this.zgtrend.includes("待命")
? `${this.zgtrend}`
: `前往:${this.zgtrend}`;
}, },
// 电梯目标样式 // 电梯目标样式
targetStyle() { targetStyle() {
return { return {
top: '300px', top: "300px",
left: '170px', left: "170px",
backgroundColor: this.zgtrend.includes('待命') ? '#999' : '#fecb00', backgroundColor: this.zgtrend.includes("待命") ? "#999" : "#fecb00",
}; };
}, },
// 电梯位置样式 // 电梯位置样式
elevatorStyle() { elevatorStyle() {
return this.calculatePosition('glposy'); return this.calculatePosition("glposy");
}, },
// 配重位置样式 // 配重位置样式
counterweightStyle() { counterweightStyle() {
return this.calculatePosition('pzposy'); return this.calculatePosition("pzposy");
}, },
}, },
watch: {}, watch: {},
...@@ -197,45 +240,65 @@ export default { ...@@ -197,45 +240,65 @@ export default {
// 计算当前位置 // 计算当前位置
calculatePosition(type) { calculatePosition(type) {
if (!POSITIONS.length) return { top: '450px', left: '428px' }; if (!POSITIONS.length) return { top: "450px", left: "428px" };
const currentDepth = Number(this.zgposition) || 0; const currentDepth = Number(this.zgposition) || 0;
// 添加安全判断 // 添加安全判断
const position = (this.zgtrend === '待命' ? this.findNearestPosition(currentDepth) : this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0]; const position =
(this.zgtrend === "待命"
? this.findNearestPosition(currentDepth)
: this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0];
return { return {
top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值 top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值
left: type === 'glposy' ? '428px' : '365px', left: type === "glposy" ? "428px" : "365px",
}; };
}, },
// 加强查找方法的安全性 // 加强查找方法的安全性
findNearestPosition(depth) { findNearestPosition(depth) {
console.log(depth, '当前深度'); console.log(depth, "当前深度");
// 处理负数区间匹配 // 处理负数区间匹配
const rangeMatch = POSITIONS.find(p => depth >= p.range[0] && depth <= p.range[1]); const rangeMatch = POSITIONS.find(
console.log('负数区间匹配结果:', rangeMatch?.name); (p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("负数区间匹配结果:", rangeMatch?.name);
if (rangeMatch) return rangeMatch; if (rangeMatch) return rangeMatch;
console.log('区间匹配结果:', rangeMatch?.name); console.log("区间匹配结果:", rangeMatch?.name);
// 无区间匹配时找最近深度(使用原始深度值) // 无区间匹配时找最近深度(使用原始深度值)
return POSITIONS.reduce((prev, curr) => (Math.abs(curr.depth - Math.abs(depth)) < Math.abs(prev.depth - Math.abs(depth)) ? curr : prev), POSITIONS[0]); return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - Math.abs(depth)) <
Math.abs(prev.depth - Math.abs(depth))
? curr
: prev,
POSITIONS[0]
);
}, },
// 查找最近楼层 // 查找最近楼层
// 统一后的查找方法 // 统一后的查找方法
findNearestPosition(depth) { findNearestPosition(depth) {
console.log('当前深度:', depth); console.log("当前深度:", depth);
// 优先匹配区间范围 // 优先匹配区间范围
const rangeMatch = POSITIONS.find(p => depth >= p.range[0] && depth <= p.range[1]); const rangeMatch = POSITIONS.find(
console.log('区间匹配结果:', rangeMatch?.name); (p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("区间匹配结果:", rangeMatch?.name);
if (rangeMatch) return rangeMatch; if (rangeMatch) return rangeMatch;
// 无区间匹配时找最近深度 // 无区间匹配时找最近深度
return POSITIONS.reduce((prev, curr) => (Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth) ? curr : prev), POSITIONS[0]); return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth)
? curr
: prev,
POSITIONS[0]
);
}, },
// 计算移动中的位置 // 计算移动中的位置
...@@ -244,11 +307,16 @@ export default { ...@@ -244,11 +307,16 @@ export default {
// 添加位置强制更新 // 添加位置强制更新
this.currentPos = nearest; this.currentPos = nearest;
this.targetPos = this.targetPos; this.targetPos = this.targetPos;
const progress = Math.min(1, Math.abs(currentDepth - nearest.depth) / Math.abs(this.targetPos.depth - nearest.depth)); const progress = Math.min(
1,
Math.abs(currentDepth - nearest.depth) /
Math.abs(this.targetPos.depth - nearest.depth)
);
return { return {
...nearest, ...nearest,
[type]: nearest[type] + (this.targetPos[type] - nearest[type]) * progress, [type]:
nearest[type] + (this.targetPos[type] - nearest[type]) * progress,
}; };
}, },
...@@ -263,9 +331,9 @@ export default { ...@@ -263,9 +331,9 @@ export default {
// 获取数据 // 获取数据
async getdata() { async getdata() {
let obj = { let obj = {
Shift: '当班次数', Shift: "当班次数",
Today: '当日次数', Today: "当日次数",
Month: '当月次数', Month: "当月次数",
}; };
try { try {
const res = await getElevatorData(); const res = await getElevatorData();
...@@ -277,7 +345,7 @@ export default { ...@@ -277,7 +345,7 @@ export default {
//获取提升机次数 //获取提升机次数
const res2 = await getElevatorTimes(); const res2 = await getElevatorTimes();
if (res2.code === 200) { if (res2.code === 200) {
this.elevatorTimes = res2.data.map(e => { this.elevatorTimes = res2.data.map((e) => {
return { return {
name: obj[e.name], name: obj[e.name],
value: e.value, value: e.value,
...@@ -285,7 +353,7 @@ export default { ...@@ -285,7 +353,7 @@ export default {
}); });
} }
} catch (error) { } catch (error) {
console.error('数据获取失败:', error); console.error("数据获取失败:", error);
} }
}, },
...@@ -294,107 +362,107 @@ export default { ...@@ -294,107 +362,107 @@ export default {
// 左侧数据列表 // 左侧数据列表
this.leftList = [ this.leftList = [
{ {
icon: 'icon1', icon: "icon1",
name: '主控速度', name: "主控速度",
value: `${Number(data.mainSpeed).toFixed(2)}m/s`, value: `${Number(data.mainSpeed).toFixed(2)}m/s`,
color: '#00FEEF', color: "#00FEEF",
}, },
{ {
icon: 'icon1', icon: "icon1",
name: '编码器速度', name: "编码器速度",
value: `${Number(data.coderSpeed).toFixed(2)}m/s`, value: `${Number(data.coderSpeed).toFixed(2)}m/s`,
color: '#00FEEF', color: "#00FEEF",
}, },
{ {
icon: 'icon1', icon: "icon1",
name: '给定速度', name: "给定速度",
value: `${Number(data.givenSpeed).toFixed(2)}m/s`, value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
color: '#00FEEF', color: "#00FEEF",
}, },
{ {
icon: 'icon1', icon: "icon1",
name: '从编码器速度', name: "从编码器速度",
value: `${Number(data.givenSpeed).toFixed(2)}m/s`, value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
color: '#00FEEF', color: "#00FEEF",
}, },
{ {
icon: 'icon2', icon: "icon2",
name: '主罐位置', name: "主罐位置",
value: `${Number(data.position).toFixed(2)}m`, value: `${Number(data.position).toFixed(2)}m`,
color: '#26DEFF', color: "#26DEFF",
}, },
{ {
icon: 'icon2', icon: "icon2",
name: '位置偏差', name: "位置偏差",
value: `${Number(data.locationDeviation).toFixed(2)}m`, value: `${Number(data.locationDeviation).toFixed(2)}m`,
color: '#26DEFF', color: "#26DEFF",
}, },
{ {
icon: 'icon3', icon: "icon3",
name: '电枢电流', name: "电枢电流",
value: `${Number(data.motorCurrent).toFixed(2)}A`, value: `${Number(data.motorCurrent).toFixed(2)}A`,
color: '#FECB00', color: "#FECB00",
}, },
{ {
icon: 'icon3', icon: "icon3",
name: '磁场电流', name: "磁场电流",
value: `${Number(data.runningPressure).toFixed(2)}A`, value: `${Number(data.runningPressure).toFixed(2)}A`,
color: '#FECB00', color: "#FECB00",
}, },
{ {
icon: 'icon1', icon: "icon1",
name: '运行油压', name: "运行油压",
value: `${Number(data.controlPosition).toFixed(2)}MPa`, value: `${Number(data.controlPosition).toFixed(2)}MPa`,
color: '#3AFF7B', color: "#3AFF7B",
}, },
]; ];
// 右侧数据列表 // 右侧数据列表
this.rightList = [ this.rightList = [
{ {
name: '硬件条件', name: "硬件条件",
value1: { name: '运行准备', status: data.runPrepare }, value1: { name: "运行准备", status: data.runPrepare },
value2: { name: '主风机启', status: data.mainFan }, value2: { name: "主风机启", status: data.mainFan },
value3: { name: '变流器启', status: data.transformer }, value3: { name: "变流器启", status: data.transformer },
value4: { value4: {
name: '液压站启', name: "液压站启",
status: data.hydraulicStation, status: data.hydraulicStation,
}, },
}, },
{ {
name: '安全保护', name: "安全保护",
value1: { value1: {
name: '硬件安全', name: "硬件安全",
status: data.hardwareSecurity, status: data.hardwareSecurity,
}, },
value2: { value2: {
name: '软件安全', name: "软件安全",
status: data.hardwareSecurity, status: data.hardwareSecurity,
}, },
value3: { name: '操作台安全', status: data.consoleSafety }, value3: { name: "操作台安全", status: data.consoleSafety },
value4: { name: '轻故障', status: data.minorMalfunction }, value4: { name: "轻故障", status: data.minorMalfunction },
}, },
{ {
name: '信号方向', name: "信号方向",
value1: { name: '井口信号', status: data.wellheadSignal }, value1: { name: "井口信号", status: data.wellheadSignal },
value2: { name: '信号继电器', status: data.signalRelay }, value2: { name: "信号继电器", status: data.signalRelay },
value3: { name: '选择正向', status: data.chooseForward }, value3: { name: "选择正向", status: data.chooseForward },
value4: { name: '选择反向', status: data.chooseReverse }, value4: { name: "选择反向", status: data.chooseReverse },
}, },
{ {
name: '闸回路', name: "闸回路",
value1: { name: '手动闸', status: data.manualGate }, value1: { name: "手动闸", status: data.manualGate },
value2: { name: '工作闸', status: data.workGate }, value2: { name: "工作闸", status: data.workGate },
value3: { name: '全敞闸', status: data.openGate }, value3: { name: "全敞闸", status: data.openGate },
value4: { name: '一级制动', status: data.firstBraking }, value4: { name: "一级制动", status: data.firstBraking },
}, },
{ {
name: '开车回路', name: "开车回路",
value1: { name: '选低速', status: data.lowSpeed }, value1: { name: "选低速", status: data.lowSpeed },
value2: { name: '使能输出', status: data.enableOutput }, value2: { name: "使能输出", status: data.enableOutput },
value3: { name: '装置解封', status: data.deviceUnsealed }, value3: { name: "装置解封", status: data.deviceUnsealed },
value4: { name: '系统减速', status: data.systemSlowdown }, value4: { name: "系统减速", status: data.systemSlowdown },
}, },
]; ];
...@@ -414,7 +482,9 @@ export default { ...@@ -414,7 +482,9 @@ export default {
this.zgtrend = `待命(${nearest.name})`; this.zgtrend = `待命(${nearest.name})`;
this.isMoving = false; this.isMoving = false;
} else { } else {
this.targetPos = POSITIONS.find(item => item.value == data.currentAction) || POSITIONS[0]; this.targetPos =
POSITIONS.find((item) => item.value == data.currentAction) ||
POSITIONS[0];
this.zgtrend = this.targetPos.name; this.zgtrend = this.targetPos.name;
this.isMoving = true; this.isMoving = true;
} }
...@@ -461,14 +531,14 @@ export default { ...@@ -461,14 +531,14 @@ export default {
async getInspectionRecords() { async getInspectionRecords() {
try { try {
const response = await getRecentFive(); const response = await getRecentFive();
console.log('response:', response); console.log("response:", response);
if (response.code === 200) { if (response.code === 200) {
this.tableList = response.data; this.tableList = response.data;
} else { } else {
console.error('获取巡检记录失败:', response.message); console.error("获取巡检记录失败:", response.message);
} }
} catch (error) { } catch (error) {
console.error('获取巡检记录时发生错误:', error); console.error("获取巡检记录时发生错误:", error);
} }
}, },
}, },
...@@ -477,8 +547,8 @@ export default { ...@@ -477,8 +547,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.main-content { .main-content {
font-family: 'fangsong'; font-family: "fangsong";
background: url('~@/assets/images/screen/tfxt/bg.png') no-repeat center; background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px; padding-top: 100px;
display: flex; // 新增弹性布局 display: flex; // 新增弹性布局
justify-content: space-between; // 左右两侧贴边 justify-content: space-between; // 左右两侧贴边
...@@ -489,7 +559,7 @@ export default { ...@@ -489,7 +559,7 @@ export default {
width: 390px; width: 390px;
height: 60px; height: 60px;
border-radius: 10px; border-radius: 10px;
background: url('~@/assets/images/screen/tsj/bg5.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg5.png") no-repeat center;
background-size: 100%; background-size: 100%;
margin-bottom: 20px; margin-bottom: 20px;
.icon { .icon {
...@@ -499,15 +569,18 @@ export default { ...@@ -499,15 +569,18 @@ export default {
margin-left: 15px; margin-left: 15px;
vertical-align: middle; // 新增垂直对齐 vertical-align: middle; // 新增垂直对齐
&.icon1 { &.icon1 {
background: url('~@/assets/images/screen/tsj/icon1.png') no-repeat center; background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background-size: 100% 100%; background-size: 100% 100%;
} }
&.icon2 { &.icon2 {
background: url('~@/assets/images/screen/tsj/icon2.png') no-repeat center; background: url("~@/assets/images/screen/tsj/icon2.png") no-repeat
center;
background-size: 100% 100%; background-size: 100% 100%;
} }
&.icon3 { &.icon3 {
background: url('~@/assets/images/screen/tsj/icon3.png') no-repeat center; background: url("~@/assets/images/screen/tsj/icon3.png") no-repeat
center;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
...@@ -543,7 +616,7 @@ export default { ...@@ -543,7 +616,7 @@ export default {
width: 390px; width: 390px;
height: 112px; height: 112px;
border-radius: 10px; border-radius: 10px;
background: url('~@/assets/images/screen/tsj/bg6.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; // 新增弹性布局 display: flex; // 新增弹性布局
align-items: center; // 新增垂直居中 align-items: center; // 新增垂直居中
...@@ -579,7 +652,7 @@ export default { ...@@ -579,7 +652,7 @@ export default {
.center-box { .center-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('~@/assets/images/screen/tsj/bg1.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg1.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.dianti-target { .dianti-target {
...@@ -606,7 +679,7 @@ export default { ...@@ -606,7 +679,7 @@ export default {
.dianti-peizhong { .dianti-peizhong {
width: 18px; width: 18px;
height: 90px; height: 90px;
background: url('~@/assets/images/screen/tsj/bg4.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
...@@ -614,19 +687,20 @@ export default { ...@@ -614,19 +687,20 @@ export default {
.dianti-box { .dianti-box {
width: 46px; width: 46px;
height: 78px; height: 78px;
background: url('~@/assets/images/screen/tsj/bg3.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
&.active { &.active {
&::before { &::before {
content: ''; content: "";
width: 16px; width: 16px;
height: 26px; height: 26px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: url('~@/assets/images/screen/tsj/icon5.png') no-repeat center; background: url("~@/assets/images/screen/tsj/icon5.png") no-repeat
center;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
...@@ -664,7 +738,7 @@ export default { ...@@ -664,7 +738,7 @@ export default {
.right-item-class { .right-item-class {
width: 100%; width: 100%;
height: 118px; height: 118px;
background: url('~@/assets/images/screen/tsj/bg6.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; // 新增弹性布局 display: flex; // 新增弹性布局
align-items: center; // 垂直居中 align-items: center; // 垂直居中
...@@ -700,7 +774,8 @@ export default { ...@@ -700,7 +774,8 @@ export default {
margin: 0; // 移除原有宽度限制 margin: 0; // 移除原有宽度限制
line-height: 40px; // 垂直居中 line-height: 40px; // 垂直居中
&.active { &.active {
background: url('~@/assets/images/screen/tsj/button.png') no-repeat center; background: url("~@/assets/images/screen/tsj/button.png") no-repeat
center;
background-size: 100% 100%; background-size: 100% 100%;
line-height: 40px; // 垂直居中 line-height: 40px; // 垂直居中
color: black; color: black;
...@@ -711,7 +786,7 @@ export default { ...@@ -711,7 +786,7 @@ export default {
.right-item-botton { .right-item-botton {
width: 100%; width: 100%;
height: 190px; height: 190px;
background: url('~@/assets/images/screen/tsj/bg7.png') no-repeat center; background: url("~@/assets/images/screen/tsj/bg7.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
.title { .title {
...@@ -750,6 +825,9 @@ export default { ...@@ -750,6 +825,9 @@ export default {
// 第三列特殊样式 // 第三列特殊样式
color: #00ff0d; // 正常状态绿色 color: #00ff0d; // 正常状态绿色
} }
&.red {
color: red;
}
} }
// 鼠标悬停效果 // 鼠标悬停效果
......
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px"> <el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="" prop="deviceName"> <el-form-item label="" prop="deviceName">
<el-select v-model="queryParams.deviceName" placeholder="空压机名称" clearable> <el-select
<el-option v-for="dict in deviceName" :key="dict.id" :label="dict.deviceName" :value="dict.id" /> v-model="queryParams.deviceName"
placeholder="空压机名称"
clearable
>
<el-option
v-for="dict in deviceName"
:key="dict.id"
:label="dict.deviceName"
:value="dict.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
...@@ -18,43 +33,117 @@ ...@@ -18,43 +33,117 @@
></el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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 icon="el-icon-download" size="mini" type="primary" plain @click="exportData">导出</el-button> --> <!-- <el-button icon="el-icon-download" size="mini" type="primary" plain @click="exportData">导出</el-button> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="loading" :data="infoList"> <el-table v-loading="loading" :data="infoList">
<el-table-column label="空压机名称" align="center" prop="deviceName" width="120" /> <el-table-column
<el-table-column label="空压机编号" align="center" prop="deviceId" width="120" /> label="空压机名称"
<el-table-column label="监测时间" align="center" prop="time" width="160" /> align="center"
<el-table-column label="管道压力(Kpa)" align="center" prop="pipelinePressure" width="140" /> prop="deviceName"
<el-table-column label="瞬时流量(m³)" align="center" prop="flowRate" width="140" /> width="120"
<el-table-column label="瞬时流速(m³/s)" align="center" prop="velocity" width="140" /> />
<el-table-column label="气体温度(℃)" align="center" prop="gasTemperature" width="120" /> <el-table-column
<el-table-column label="管道压力(假)(Kpa)" align="center" prop="pipelinePressureFalse" /> label="空压机编号"
<el-table-column label="瞬时流量(假)(m³)" align="center" prop="flowRateFalse" /> align="center"
<el-table-column label="瞬时流速(假)(m³/s)" align="center" prop="velocityFalse" /> prop="deviceId"
<el-table-column label="气体温度(假)(℃)" align="center" prop="gasTemperatureFalse" /> width="120"
<el-table-column label="状态" align="center" prop="fanRunStatus" width="140"> />
<el-table-column
label="监测时间"
align="center"
prop="time"
width="160"
/>
<el-table-column
label="管道压力(Kpa)"
align="center"
prop="pipelinePressure"
width="140"
/>
<el-table-column
label="瞬时流量(m³)"
align="center"
prop="flowRate"
width="140"
/>
<el-table-column
label="瞬时流速(m³/s)"
align="center"
prop="velocity"
width="140"
/>
<el-table-column
label="气体温度(℃)"
align="center"
prop="gasTemperature"
width="120"
/>
<el-table-column
label="管道压力(Kpa)"
align="center"
prop="pipelinePressureFalse"
/>
<el-table-column
label="瞬时流量(m³)"
align="center"
prop="flowRateFalse"
/>
<el-table-column
label="瞬时流速(m³/s)"
align="center"
prop="velocityFalse"
/>
<el-table-column
label="气体温度(℃)"
align="center"
prop="gasTemperatureFalse"
/>
<el-table-column
label="状态"
align="center"
prop="fanRunStatus"
width="140"
>
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-tag v-if="row.fanRunStatus == 1" type="success" size="mini">启动</el-tag> <el-tag v-if="row.fanRunStatus == 1" type="success" size="mini"
<el-tag v-else-if="row.fanRunStatus == 2" type="danger" size="mini">停止</el-tag> >启动</el-tag
>
<el-tag v-else-if="row.fanRunStatus == 2" type="danger" size="mini"
>停止</el-tag
>
<el-tag v-else-if="fanRunStatus == 3" size="mini">复位</el-tag> <el-tag v-else-if="fanRunStatus == 3" size="mini">复位</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div> </div>
</template> </template>
<script> <script>
import { listKongHis } from '@/api/tyler/kong'; import { listKongHis } from "@/api/tyler/kong";
import { kongDeviceName } from '@/api/tyler/common'; import { kongDeviceName } from "@/api/tyler/common";
export default { export default {
name: 'Info', name: "Info",
data() { data() {
return { return {
// 根路径 // 根路径
...@@ -77,7 +166,7 @@ export default { ...@@ -77,7 +166,7 @@ export default {
}; };
}, },
created() { created() {
kongDeviceName().then(res => { kongDeviceName().then((res) => {
this.deviceName = res.rows; this.deviceName = res.rows;
}); });
this.getList(); this.getList();
...@@ -85,16 +174,22 @@ export default { ...@@ -85,16 +174,22 @@ export default {
methods: { methods: {
/** 导出按钮操作 */ /** 导出按钮操作 */
exportData() { exportData() {
this.download('/business/pump/history/export ', {}, `空压机运行历史数据_${new Date().getTime()}.xlsx`); this.download(
"/business/pump/history/export ",
{},
`空压机运行历史数据_${new Date().getTime()}.xlsx`
);
}, },
/** 查询空压机基本信息列表 */ /** 查询空压机基本信息列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listKongHis(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listKongHis(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.infoList = response.rows; this.infoList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); }
);
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
...@@ -104,7 +199,7 @@ export default { ...@@ -104,7 +199,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateRange = [];
this.resetForm('queryForm'); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
}, },
......
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="" prop="deviceId"> <el-form-item label="" prop="deviceId">
<el-select v-model="queryParams.deviceId" placeholder="空压机名称" clearable> <el-select
<el-option v-for="dict in deviceName" :key="dict.id" :label="dict.deviceName" :value="dict.id" /> v-model="queryParams.deviceId"
placeholder="空压机名称"
clearable
>
<el-option
v-for="dict in deviceName"
:key="dict.id"
:label="dict.deviceName"
:value="dict.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
...@@ -18,42 +34,117 @@ ...@@ -18,42 +34,117 @@
></el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-item>
</el-form> </el-form>
<el-table v-loading="loading" :data="infoList"> <el-table v-loading="loading" :data="infoList">
<el-table-column label="空压机名称" align="center" prop="deviceName" width="120" /> <el-table-column
<el-table-column label="空压机编号" align="center" prop="deviceId" width="120" /> label="空压机名称"
<el-table-column label="监测时间" align="center" prop="time" width="160" /> align="center"
<el-table-column label="管道压力(Kpa)" align="center" prop="pipelinePressure" width="140" /> prop="deviceName"
<el-table-column label="瞬时流量(m³)" align="center" prop="flowRate" width="140" /> width="120"
<el-table-column label="瞬时流速(m³/s)" align="center" prop="velocity" width="140" /> />
<el-table-column label="气体温度(℃)" align="center" prop="gasTemperature" width="120" /> <el-table-column
<el-table-column label="管道压力(假)(Kpa)" align="center" prop="pipelinePressureFalse" /> label="空压机编号"
<el-table-column label="瞬时流量(假)(m³)" align="center" prop="flowRateFalse" width="140" /> align="center"
<el-table-column label="瞬时流速(假)(m³/s)" align="center" prop="velocityFalse" /> prop="deviceId"
<el-table-column label="气体温度(假)(℃)" align="center" prop="gasTemperatureFalse" /> width="120"
<el-table-column label="状态" align="center" prop="fanRunStatus" width="140"> />
<el-table-column
label="监测时间"
align="center"
prop="time"
width="160"
/>
<el-table-column
label="管道压力(Kpa)"
align="center"
prop="pipelinePressure"
width="140"
/>
<el-table-column
label="瞬时流量(m³)"
align="center"
prop="flowRate"
width="140"
/>
<el-table-column
label="瞬时流速(m³/s)"
align="center"
prop="velocity"
width="140"
/>
<el-table-column
label="气体温度(℃)"
align="center"
prop="gasTemperature"
width="120"
/>
<el-table-column
label="管道压力(Kpa)"
align="center"
prop="pipelinePressureFalse"
/>
<el-table-column
label="瞬时流量(m³)"
align="center"
prop="flowRateFalse"
width="140"
/>
<el-table-column
label="瞬时流速(m³/s)"
align="center"
prop="velocityFalse"
/>
<el-table-column
label="气体温度(℃)"
align="center"
prop="gasTemperatureFalse"
/>
<el-table-column
label="状态"
align="center"
prop="fanRunStatus"
width="140"
>
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-tag v-if="row.fanRunStatus == 1" type="success" size="mini">启动</el-tag> <el-tag v-if="row.fanRunStatus == 1" type="success" size="mini"
<el-tag v-else-if="row.fanRunStatus == 2" type="danger" size="mini">停止</el-tag> >启动</el-tag
>
<el-tag v-else-if="row.fanRunStatus == 2" type="danger" size="mini"
>停止</el-tag
>
<el-tag v-else-if="fanRunStatus == 3" size="mini">复位</el-tag> <el-tag v-else-if="fanRunStatus == 3" size="mini">复位</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div> </div>
</template> </template>
<script> <script>
import { listrealKong } from '@/api/tyler/kongReal'; import { listrealKong } from "@/api/tyler/kongReal";
import { kongDeviceName } from '@/api/tyler/common'; import { kongDeviceName } from "@/api/tyler/common";
export default { export default {
name: 'Info', name: "Info",
data() { data() {
return { return {
// 根路径 // 根路径
...@@ -76,16 +167,20 @@ export default { ...@@ -76,16 +167,20 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
id: [{ required: true, message: 'id不能为空', trigger: 'blur' }], id: [{ required: true, message: "id不能为空", trigger: "blur" }],
deviceName: [{ required: true, message: '空压机名称不能为空', trigger: 'blur' }], deviceName: [
deviceId: [{ required: true, message: '空压机编号不能为空', trigger: 'blur' }], { required: true, message: "空压机名称不能为空", trigger: "blur" },
],
deviceId: [
{ required: true, message: "空压机编号不能为空", trigger: "blur" },
],
}, },
deviceName: [], deviceName: [],
dateRange: [], dateRange: [],
}; };
}, },
created() { created() {
kongDeviceName().then(res => { kongDeviceName().then((res) => {
this.deviceName = res.rows; this.deviceName = res.rows;
}); });
this.getList(); this.getList();
...@@ -94,11 +189,13 @@ export default { ...@@ -94,11 +189,13 @@ export default {
/** 查询空压机基本信息列表 */ /** 查询空压机基本信息列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listrealKong(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listrealKong(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.infoList = response.rows; this.infoList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); }
);
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
...@@ -108,7 +205,7 @@ export default { ...@@ -108,7 +205,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateRange = [];
this.resetForm('queryForm'); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
}, },
......
...@@ -92,8 +92,8 @@ ...@@ -92,8 +92,8 @@
<el-table-column label="卡号" align="center" prop="cardNumber" /> <el-table-column label="卡号" align="center" prop="cardNumber" />
<el-table-column label="部门" align="center" prop="departName" /> <el-table-column label="部门" align="center" prop="departName" />
<el-table-column label="分站名称" align="center" prop="locationName" /> <el-table-column label="分站名称" align="center" prop="locationName" />
<el-table-column label="到达位置" align="center" prop="localtion" /> <!-- <el-table-column label="到达位置" align="center" prop="localtion" />
<el-table-column label="来向" align="center" prop="" /> <el-table-column label="来向" align="center" prop="" /> -->
<el-table-column label="时间" align="center" prop="lastTime"> <el-table-column label="时间" align="center" prop="lastTime">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.lastTime) }}</span> <span>{{ parseTime(scope.row.lastTime) }}</span>
......
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