Skip to content

Y
yindong-tongbai-automation
Commit 25bf70ae authored by lei's avatar lei
Browse files
Options

add:提升机系统

parent 8b1ba508
Hide whitespace changes
Inline Side-by-side
Showing with 2588 additions and 757 deletions
src/api/tyler/screen.js
View file @ 25bf70ae
...@@ -36,10 +36,10 @@ export function stationStatus(query) { ...@@ -36,10 +36,10 @@ export function stationStatus(query) {
}); });
} }
//近30天报警分析 //30天井下人数变化趋势
export function recentThDaysAlarms(query) { export function recentThDaysAlarms(query) {
return request({ return request({
url: "/business/screen/per/recentThDaysAlarms", url: "/business/screen/per/30DaysTrend",
method: "get", method: "get",
params: query, params: query,
}); });
...@@ -79,4 +79,21 @@ export function eleAll(query) { ...@@ -79,4 +79,21 @@ export function eleAll(query) {
method: "get", method: "get",
params: query, params: query,
}); });
}
//rydw中段基站分析
export function rydwMidStation(query) {
return request({
url: "/business/screen/per/baseStationAnalysis",
method: "get",
params: query,
});
}
//当月人员下井次数排行
export function monthlyRankings(query) {
return request({
url: "/business/screen/per/monthlyRanking",
method: "get",
params: query,
});
} }
\ No newline at end of file
src/views/Screen/index.vue
View file @ 25bf70ae
...@@ -8,17 +8,25 @@ ...@@ -8,17 +8,25 @@
v-if="showMenu === 3" v-if="showMenu === 3"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></psxt> ></psxt>
<v-scale-screen <v-scale-screen
ref="scale-screen" ref="scale-screen"
width="1920" width="1920"
height="1080" height="1080"
:fullScreen="true" :fullScreen="true"
> >
<dlxt <dlxt
v-if="showMenu === 6" v-if="showMenu === 6"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></dlxt> ></dlxt>
<tfxt
v-if="showMenu === 5"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></tfxt>
<tsj
v-if="showMenu === 4"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></tsj>
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 头部 -->
<div class="header por"></div> <div class="header por"></div>
...@@ -37,7 +45,7 @@ ...@@ -37,7 +45,7 @@
key="" key=""
:class="showMenu == 2 ? 'active' : ''" :class="showMenu == 2 ? 'active' : ''"
> >
<p>环境监测</p> <p>监测监控</p>
</div> </div>
<div <div
class="sub-item" class="sub-item"
...@@ -57,9 +65,27 @@ ...@@ -57,9 +65,27 @@
</div> </div>
</div> </div>
<div class="sub-header-right"> <div class="sub-header-right">
<div class="sub-item" :class="showMenu == 4 ? 'active' : ''" @click="changeMenu(4)"><p>提升机系统</p></div> <div
<div class="sub-item" :class="showMenu == 5 ? 'active' : ''" @click="changeMenu(5)"><p>风机系统</p></div> class="sub-item"
<div class="sub-item" :class="showMenu == 6 ? 'active' : ''" @click="changeMenu(6)"><p>电力系统</p></div> :class="showMenu == 4 ? 'active' : ''"
@click="changeMenu(4)"
>
<p>提升机系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 5 ? 'active' : ''"
@click="changeMenu(5)"
>
<p>通风系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 6 ? 'active' : ''"
@click="changeMenu(6)"
>
<p>电力系统</p>
</div>
</div> </div>
</div> </div>
...@@ -84,6 +110,8 @@ import hjjc from "./items/hjjc.vue"; ...@@ -84,6 +110,8 @@ import hjjc from "./items/hjjc.vue";
import psxt from "./items/psxt.vue"; import psxt from "./items/psxt.vue";
import home from "./items/home.vue"; import home from "./items/home.vue";
import dlxt from "./items/dlxt.vue"; import dlxt from "./items/dlxt.vue";
import tfxt from "./items/tfxt.vue";
import tsj from "./items/tsj.vue";
export default { export default {
name: "cockpit", name: "cockpit",
components: { components: {
...@@ -92,16 +120,18 @@ export default { ...@@ -92,16 +120,18 @@ export default {
hjjc, hjjc,
psxt, psxt,
dlxt, dlxt,
tfxt,
tsj,
}, },
data() { data() {
return { return {
previewUrl: process.env.VUE_APP_API_TARGET, previewUrl: process.env.VUE_APP_API_TARGET,
showMenu: 0, showMenu: 0,
videoData:null, videoData: null,
}; };
}, },
mounted() { mounted() {
this.getVideo() this.getVideo();
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) { if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request(); screenfull.request();
} }
...@@ -109,19 +139,16 @@ export default { ...@@ -109,19 +139,16 @@ export default {
// this.alarm30(); // this.alarm30();
}, },
methods: { methods: {
getVideo(){ getVideo() {
this.videoData = null; this.videoData = null;
listVideo().then(res => { listVideo().then((res) => {
this.videoData = this.previewUrl + res.data; this.videoData = this.previewUrl + res.data;
});
})
}, },
changeMenu(val) { changeMenu(val) {
this.showMenu = val; this.showMenu = val;
}, },
sysAnalysis(){ sysAnalysis() {},
},
goToSys() { goToSys() {
var link = this.$router.resolve({ var link = this.$router.resolve({
path: "/", path: "/",
...@@ -129,7 +156,7 @@ export default { ...@@ -129,7 +156,7 @@ export default {
window.open(link.href); window.open(link.href);
return; return;
}, },
openVideo(){ openVideo() {
window.open(this.videoData); window.open(this.videoData);
return; return;
}, },
...@@ -178,11 +205,10 @@ export default { ...@@ -178,11 +205,10 @@ export default {
.header { .header {
width: 590px; width: 590px;
height: 80px; height: 80px;
background: url("~@/assets/images/screen/tit.png") no-repeat center; background: url("~@/assets/images/screen/tit.png") no-repeat center;
background-size: 100%; background-size: 100%;
margin: 0 auto; margin: 0 auto;
} }
.sub-header { .sub-header {
display: flex; display: flex;
......
src/views/Screen/items/hjjc.vue
View file @ 25bf70ae
...@@ -83,6 +83,48 @@ ...@@ -83,6 +83,48 @@
<!-- 右侧 --> <!-- 右侧 -->
<div class="sidebar sidebar-right"> <div class="sidebar sidebar-right">
<!-- 右上历史数据图组件 --> <!-- 右上历史数据图组件 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
</div>
<div class="sub-con histrybox">
<div class="histrubox_left">
<div class="echarts_title">
<img
src="../../../assets/images/screen/jianceshebei.png"
alt=""
class="img_class"
/>
<span>环境监测设备</span>
</div>
<div class="chart_bg"></div>
<div id="EchartsPieLeft" class="chart_box"></div>
<div class="chart_number">
<span>42个</span>
<br />
<span>总数</span>
</div>
</div>
<div class="histrubox_right">
<div class="echarts_title">
<img
src="../../../assets/images/screen/shipingshebei.png"
alt=""
class="img_class"
/>
<span>视频监测设备</span>
</div>
<div class="chart_bg_right"></div>
<div id="EchartsPieRight" class="chart_box"></div>
<div class="chart_number_right">
<span>42个</span>
<br />
<span>总数</span>
</div>
</div>
</div>
</div>
<!-- 右中设备监测曲线图 -->
<div class="sidebar-item H286 alert-analysis"> <div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"> <div class="sub-title por">
<span>历史数据图</span> <span>历史数据图</span>
...@@ -101,7 +143,7 @@ ...@@ -101,7 +143,7 @@
<div class="left-chart" ref="sssj" id="sssj"></div> <div class="left-chart" ref="sssj" id="sssj"></div>
</div> </div>
</div> </div>
<!-- 右中历史数据图组件 --> <!-- 右下设备监测曲线图 -->
<div class="sidebar-item H286 alert-analysis"> <div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"> <div class="sub-title por">
<span>历史数据图</span> <span>历史数据图</span>
...@@ -120,44 +162,6 @@ ...@@ -120,44 +162,6 @@
<div class="left-chart" ref="right" id="rclssj"></div> <div class="left-chart" ref="right" id="rclssj"></div>
</div> </div>
</div> </div>
<!-- 近7日设备监测报警信息 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"><span>近7日设备监测报警信息</span></div>
<div class="sub-con sub-con-scroll-table">
<div class="custom-header custom-header2">
<span class="custom-header-item custom-header-item2">名称</span>
<span class="custom-header-item custom-header-item2"
>报警时间</span
>
<span class="custom-header-item custom-header-item2">检测值</span>
</div>
<vue-seamless-scroll
class="warp"
:data="tableData2"
:class-option="classOption2"
@mousewheel.native="handleScrollR"
ref="RightScroll"
>
<ul class="item">
<li
class="table-item custom-item custom-item2"
v-for="(item, i) in tableData2"
:key="i"
>
<span class="custom-item-content custom-item-content2">{{
item.placeName
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alarmTime
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.value
}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div> </div>
<!-- 弹窗内容 --> <!-- 弹窗内容 -->
<transition name="el-fade-in"> <transition name="el-fade-in">
...@@ -184,6 +188,9 @@ import { ...@@ -184,6 +188,9 @@ import {
import ScrollTable from "@/components/Tyler/ScrollTable.vue"; import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull"; import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
export default { export default {
name: "cockpit", name: "cockpit",
components: { components: {
...@@ -209,11 +216,6 @@ export default { ...@@ -209,11 +216,6 @@ export default {
}, },
// 设备定位分类开关 // 设备定位分类开关
checkList: ["2"], checkList: ["2"],
// 右下滚动 参数
classOption2: {
singleHeight: 47,
hoverStop: true,
},
// 左侧实施数据列表 // 左侧实施数据列表
rightTopLssjData: { rightTopLssjData: {
list: [ list: [
...@@ -262,14 +264,7 @@ export default { ...@@ -262,14 +264,7 @@ export default {
// 右上设备轮播名称 // 右上设备轮播名称
name: "", name: "",
}, },
// 右下 列表数据
tableData2: [
{
placeName: "",
alarmTime: "",
value: "",
},
],
// 中间图片数据列表 // 中间图片数据列表
equipmentList: [ equipmentList: [
{ {
...@@ -292,6 +287,8 @@ export default { ...@@ -292,6 +287,8 @@ export default {
], ],
}, },
], ],
//highCharts配置
highChartsOption: {},
}; };
}, },
mounted() { mounted() {
...@@ -309,7 +306,435 @@ export default { ...@@ -309,7 +306,435 @@ export default {
this.rcPlayFun(this.rightTopLssjData); this.rcPlayFun(this.rightTopLssjData);
}); });
getDeviceStatus().then((res) => { getDeviceStatus().then((res) => {
this.equipmentList = res.data; // this.equipmentList = res.data;
this.equipmentList = [
{
name: "三中码头门",
x: "50",
y: "436",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中码头门风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中码头门风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中空压机房",
x: "258",
y: "335",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中空压机房co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中空压机房风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "东风井",
x: "816",
y: "176",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "东风井风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "东风井开停",
equipmentTy: "开停",
isWarning: 0,
},
],
},
{
name: "二中避险硐室",
x: "75",
y: "318",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中避险硐室",
x: "85",
y: "193",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "一中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中避险硐室",
x: "102",
y: "687",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "五中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中避险硐室",
x: "96",
y: "561",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中避险硐室",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "四中避险硐室",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中车场",
x: "53",
y: "557",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中车场",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
],
},
{
name: "一中主运输巷",
x: "185",
y: "204",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中主运输巷co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "一中主运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中主运输巷",
x: "187",
y: "331",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中主运输巷CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "二中主运输巷co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中主运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中中运输巷",
x: "316",
y: "338",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中中运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "三中避险硐室",
x: "93",
y: "441",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中避险硐室co",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中车场",
x: "53",
y: "686",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中车场一氧化碳",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
],
},
{
name: "一中风机",
x: "145",
y: "199",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中风机",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "一中风机氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中西采区",
x: "341",
y: "222",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中西采区CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "一中西采区风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "一中西采区风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "一中西采区",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "三中运输巷",
x: "518",
y: "474",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中运输巷CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "三中运输巷氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "三中西采",
x: "566",
y: "499",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中西采",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中西采",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中西采",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中运输巷",
x: "206",
y: "584",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中运输巷",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "四中运输巷",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "四中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "四中运输巷",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中运输巷",
x: "166",
y: "707",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中运输巷",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "五中运输巷",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "五中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "五中运输巷",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中运输巷",
x: "367",
y: "208",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
],
},
{
name: "二中西采区",
x: "237",
y: "369",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中西采区CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "二中西采区风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "二中西采区氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "二中运输巷",
x: "415",
y: "341",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
],
},
];
}); });
getRecentSevDaysAlarms().then((res) => { getRecentSevDaysAlarms().then((res) => {
//数据空 //数据空
...@@ -318,9 +743,97 @@ export default { ...@@ -318,9 +743,97 @@ export default {
getRealData().then((res) => { getRealData().then((res) => {
this.tableData1 = res.data; this.tableData1 = res.data;
}); });
//初始化highCharts
this.getHighChartsData();
}, },
created() {}, created() {},
methods: { methods: {
getHighChartsData() {
this.highChartsOption = {
chart: {
type: "pie", //饼图
options3d: {
enabled: true, //使用3d功能
alpha: 60, //延y轴向内的倾斜角度
beta: 0,
},
backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
// spacingTop: -200, // 增加顶部间距
},
legend: {
enabled: true,
align: "center",
verticalAlign: "middle", // 修正为底部对齐
layout: "vertical", // 水平布局
y: 60, // 下移图例
itemStyle: {
color: "#fff",
fontSize: "12px", // 缩小字体
},
labelFormatter: function () {
return `${this.name}: ${this.y}`; // 在图例中显示数据
},
},
title: {
text: "", //图表的标题文字
},
subtitle: {
text: "", //副标题文字
},
plotOptions: {
pie: {
size: "55%", // 缩小饼图尺寸
allowPointSelect: false, // 允许点击,
cursor: "pointer",
innerSize: "65%", //内圆半径,
showInLegend: false,
center: ["50%", "34%"], // 调整饼图中心位置
depth: 15, //3d饼图的厚度,
dataLabels: {
enabled: false, // 启用数据标签
},
},
},
credits: {
enabled: false,
},
series: [
{
type: "pie",
name: "设备统计",
showInLegend: true,
data: [
{ name: "正常设备", y: 80, color: "RGBA(37, 160, 238, 1)" }, // 高数据部分
{ name: "异常设备", y: 20, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
],
startAngle: 0, //起始角度,
label: {
show: false,
position: "outside",
formatter: "{b}：{d}%",
normal: {
show: false,
fontSize: 40,
formatter: [" {a|{b}：{d}%}"].join("\n"),
rich: {
a: {
left: 20,
padding: [0, -140, 0, -180],
},
},
},
},
},
],
};
Highcharts.chart("EchartsPieLeft", this.highChartsOption);
this.highChartsOption.series[0].data = [
{ name: "在线", y: 40, color: "#02CD9B" }, // 高数据部分
{ name: "离线", y: 1, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
];
Highcharts.chart("EchartsPieRight", this.highChartsOption);
},
// 辅助方法：获取字段值 // 辅助方法：获取字段值
getItemField(item, fieldKey) { getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || ""; return item[this.fieldMap[fieldKey]] || "";
...@@ -664,25 +1177,6 @@ export default { ...@@ -664,25 +1177,6 @@ export default {
this.$refs.sssjControl.yPos = 0; this.$refs.sssjControl.yPos = 0;
} }
}, },
// 右侧 鼠标滚动代码
handleScrollR(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离
this.$refs.RightScroll.yPos = this.$refs.RightScroll.yPos - e.deltaY;
// 如果是正数 说明是往上滚
if (this.$refs.RightScroll.yPos > 0) {
this.$refs.RightScroll.yPos = 0;
return;
}
// 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if (
Math.abs(this.$refs.RightScroll.yPos) >
this.$refs.RightScroll.realBoxHeight / 2
) {
this.$refs.RightScroll.yPos = 0;
}
},
}, },
filters: { filters: {
capitalize: function (value) { capitalize: function (value) {
...@@ -701,15 +1195,6 @@ export default { ...@@ -701,15 +1195,6 @@ export default {
}, },
immediate: true, immediate: true,
}, },
tableData2: {
handler() {
// 数据更改时也要加
this.$nextTick(() => {
this.$refs.RightScroll.reset();
});
},
immediate: true,
},
}, },
}; };
</script> </script>
...@@ -731,6 +1216,104 @@ export default { ...@@ -731,6 +1216,104 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 0 30px; padding: 0 30px;
} }
.histrybox {
width: 100%;
height: 100%;
display: flex;
/**均分2部分 */
.histrubox_left {
width: 50%;
height: calc(100% - 46px);
.echarts_title {
height: 25px;
text-align: center;
span {
color: rgba(42, 207, 255, 1);
font-weight: 400;
font-size: 16px;
color: #2acfff;
}
}
}
.histrubox_right {
width: 50%;
height: calc(100% - 46px);
.echarts_title {
height: 25px;
text-align: center;
span {
color: rgba(42, 207, 255, 1);
font-weight: 400;
font-size: 16px;
color: #2acfff;
}
}
}
.chart_box {
width: 100%;
height: calc(100% - 25px);
}
.img_class {
width: 29px;
height: 25px;
display: inline-block;
line-height: 25px;
margin-right: 12px;
margin-bottom: -7px;
}
.chart_bg {
position: absolute;
width: 140px;
height: 150px;
background-image: url("~@/assets/images/screen/chart.png");
background-repeat: no-repeat;
background-position: cover;
background-size: 100% 100%;
// -webkit-transform: rotateX(65deg);
transform: rotateX(53deg);
left: 45px;
top: 89px;
}
.chart_bg_right {
position: absolute;
width: 140px;
height: 150px;
background-image: url("~@/assets/images/screen/chart.png");
background-repeat: no-repeat;
background-position: cover;
background-size: 100% 100%;
// -webkit-transform: rotateX(65deg);
transform: rotateX(53deg);
left: 275px;
top: 89px;
}
.chart_number {
position: absolute;
width: 100px;
height: 100px;
top: 109px;
left: 66px;
text-align: center;
span:nth-child(1) {
font-size: 30px;
font-weight: 400;
}
}
.chart_number_right {
position: absolute;
width: 100px;
height: 100px;
top: 109px;
left: 296px;
text-align: center;
span:nth-child(1) {
font-size: 30px;
font-weight: 400;
}
}
}
/* 左右侧边栏 */ /* 左右侧边栏 */
.sidebar { .sidebar {
...@@ -862,6 +1445,7 @@ export default { ...@@ -862,6 +1445,7 @@ export default {
.main-area { .main-area {
width: calc(100% - 920px); width: calc(100% - 920px);
background: url("~@/assets/images/screen/bg3.png") no-repeat center; background: url("~@/assets/images/screen/bg3.png") no-repeat center;
background-size: contain;
text-align: center; text-align: center;
position: relative; position: relative;
.dot { .dot {
......
src/views/Screen/items/rydw.vue
View file @ 25bf70ae
<template> <template>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="main-content"> <div class="main-content">
<!-- 左侧 --> <!-- 左侧 -->
<div class="sidebar sidebar-left"> <div class="sidebar sidebar-left">
<div class="sidebar-item"> <div class="sidebar-item">
<div class="sub-title por"><span>井下人员实时数据统计</span></div> <div class="sub-title por"><span>井下人员实时数据统计</span></div>
<div class="sub-con sub-con1"> <div class="sub-con sub-con1">
<div class="sub-con-left por"> <div class="sub-con-left por">
<div><p>带班领导：{{ subStaStatus.leader||0 }}</p></div> <div>
</div> <p>带班领导：{{ subStaStatus.leader || 0 }}</p>
<div class="sub-con-right">
<div><p class="p-out"><i>系统监控总人数</i><span class="por">{{ subStaStatus.systemMonitorAllCount||0 }}</span></p></div>
<div><p class="p-out"><i>下井总人数</i><span class="por">{{ subStaStatus.peopleIntoWellCount||0 }}</span></p></div>
<div><p class="p-out"><i>地面井口总人数</i><span class="por">{{ subStaStatus.groundWellCount||0 }}</span></p></div>
<div><p class="p-out"><i>重点区域人数</i><span class="por">{{ subStaStatus.keyAreaPopulation||0 }}</span></p></div>
</div>
</div> </div>
</div> </div>
<!-- 状态统计组件 --> <div class="sub-con-right">
<div class="sidebar-item status-box"> <div>
<div class="sub-title por"><span>区域人数实时分布图</span></div> <p class="p-out">
<div class="sub-con"> <i>系统监控总人数</i
<div class="left-chart" ref="left1" id="left1"></div> ><span class="por">{{
subStaStatus.systemMonitorAllCount || 0
}}</span>
</p>
</div> </div>
</div> <div>
<!-- 报警分析组件 --> <p class="p-out">
<div class="sidebar-item alert-analysis"> <i>下井总人数</i
<div class="sub-title por"><span>井下人员实时状态</span></div> ><span class="por">{{
<div class="sub-con sub-con-scroll-table"> subStaStatus.peopleIntoWellCount || 0
<div class="custom-header"> }}</span>
<span class="custom-header-item" >姓名</span> </p>
<span class="custom-header-item" >分站名称</span> </div>
<span class="custom-header-item" >距离分站</span> <div>
<span class="custom-header-item" >时间</span> <p class="p-out">
</div> <i>地面井口总人数</i
<vue-seamless-scroll :data="realTimeStatusData" class="warp " :class-option="classOption"> ><span class="por">{{
<ul > subStaStatus.groundWellCount || 0
<li v-for="(item, index) in realTimeStatusData" :key="index" class="custom-item custom-item1"> }}</span>
<span class="custom-item-content custom-item-content1" v-text="item.perName"></span> </p>
<span class="custom-item-content custom-item-content1" v-text="item.location"></span> </div>
<span class="custom-item-content custom-item-content1" v-text="item.distance"></span> <div>
<span class="custom-item-content custom-item-content1" v-text="item.lastTime"></span> <p class="p-out">
</li> <i>重点区域人数</i
</ul> ><span class="por">{{
</vue-seamless-scroll> subStaStatus.keyAreaPopulation || 0
}}</span>
</p>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- 状态统计组件 -->
<!-- 中间 --> <div class="sidebar-item status-box">
<div class="main-area"> <div class="sub-title por"><span>区域人数实时分布图</span></div>
<div class="sub-con">
<div class="left-chart" ref="left1" id="left1"></div>
<!-- 人员点位 --> </div>
<div v-for="(subStation,index) in subStationMid" :key="subStation.addressId" class="parent-container"> </div>
<div <!-- 报警分析组件 -->
class="dot" <div class="sidebar-item alert-analysis">
:class="`dot${index}`" <div class="sub-title por"><span>井下人员实时状态</span></div>
@click="handleStation(subStation.addressId)" <div class="sub-con sub-con-scroll-table">
:style="getStationStyle(subStation.addressId)" <div class="custom-header">
> <span class="custom-header-item">姓名</span>
<p>{{ subStation.count }}人</p> <span class="custom-header-item">分站名称</span>
<!-- <p style="font-size: 14px;">{{ subStation.location }}</p> --> <span class="custom-header-item">距离分站</span>
</div> <span class="custom-header-item">时间</span>
</div> </div>
<vue-seamless-scroll
:data="realTimeStatusData"
class="warp"
:class-option="classOption"
>
<ul>
<li
v-for="(item, index) in realTimeStatusData"
:key="index"
class="custom-item custom-item1"
>
<span
class="custom-item-content custom-item-content1"
v-text="item.perName"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.location"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.distance"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.lastTime"
></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div> </div>
</div>
<!-- 右侧 --> <!-- 中间 -->
<div class="sidebar sidebar-right"> <div class="main-area">
<div class="sidebar-item alert-analysis"> <!-- 人员点位 -->
<div class="sub-title por"><span>分站状态分析</span></div> <div
<div class="sub-con sub-con-r"> v-for="(subStation, index) in subStationMid"
<div class="sub-con-r-left"></div> :key="`station-${index}-${subStation.addressId}`"
<div class="sub-con-r-right"> class="parent-container"
>
<div
class="dot"
:class="`dot${index}`"
@click="handleStation(subStation.addressId)"
:style="getStationStyle(subStation.addressId)"
>
<p>{{ subStation.count }}人</p>
<!-- <p style="font-size: 14px;">{{ subStation.location }}</p> -->
</div>
</div>
</div>
<!-- 右侧 -->
<div class="sidebar sidebar-right">
<!-- 中段基站分析 -->
<div class="sidebar-item alert-analysis">
<div class="sub-title por"><span>中段基站分析</span></div>
<div class="sub-con sub-con-r">
<div class="chart-container" id="rightTop" ref="rightTop">
<!-- <div class="sub-con-r-left" ></div> -->
<!-- <div class="sub-con-r-right">
<p><span>分站总数</span><span>---------</span><span>{{ subStaStatusData[0].num }}</span></p> <p><span>分站总数</span><span>---------</span><span>{{ subStaStatusData[0].num }}</span></p>
<p><span>运行中分站</span><span>---------</span><span>{{ subStaStatusData[2].num }}</span></p> <p><span>运行中分站</span><span>---------</span><span>{{ subStaStatusData[2].num }}</span></p>
<p><span>休眠中分站</span><span>---------</span><span>{{ subStaStatusData[1].num }}</span></p> <p><span>休眠中分站</span><span>---------</span><span>{{ subStaStatusData[1].num }}</span></p>
</div> </div> -->
</div>
</div>
<!-- 重点区域组件 -->
<div class="sidebar-item alert-analysis">
<div class="sub-title por"><span>近30天报警分析</span></div>
<div class="sub-con">
<div class="left-chart" ref="right" id="right"></div>
</div> </div>
</div> <div class="legend-container">
<!-- 报警信息流 --> <ul>
<div class="sidebar-item alert-analysis"> <li>
<div class="sub-title por"><span>近7日井下人员报警信息</span></div> <span class="legend-color blue"></span><span>一中基站数</span>
<div class="sub-con sub-con-scroll-table"> <span class="txtblue">{{
<div class="custom-header custom-header2"> stationData | stationDataValue("一中基站数")
<span class="custom-header-item custom-header-item2" >姓名</span> }}</span>
<span class="custom-header-item custom-header-item2" >部门</span> </li>
<span class="custom-header-item custom-header-item2" >报警时间</span> <li>
<span class="custom-header-item custom-header-item2" >报警位置</span> <span class="legend-color cyan"></span><span>二中基站数</span>
</div> <span class="txtcyan">{{
<vue-seamless-scroll :data="recentSevDaysAlarmsData" class="warp " :class-option="classOption"> stationData | stationDataValue("二中基站数")
<ul > }}</span>
<li v-for="(item, index) in recentSevDaysAlarmsData" :key="index" class="custom-item custom-item2"> </li>
<span class="custom-item-content custom-item-content2" v-text="item.perName"></span> <li>
<span class="custom-item-content custom-item-content2" v-text="item.departName"></span> <span class="legend-color green"></span><span>三中基站数</span>
<span class="custom-item-content custom-item-content2" v-text="item.alarmTime"></span> <span class="txtgreen">{{
<span class="custom-item-content custom-item-content2" v-text="item.location"></span> stationData | stationDataValue("三中基站数")
</li> }}</span>
</ul> </li>
</vue-seamless-scroll> <li>
<span class="legend-color yellow"></span><span>四中基站数</span>
<span class="txtyellow">{{
stationData | stationDataValue("四中基站数")
}}</span>
</li>
<li>
<span class="legend-color orange"></span><span>五中基站数</span>
<span class="txtorange">{{
stationData | stationDataValue("五中基站数")
}}</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<!-- 弹窗内容 --> <!-- 近30天井下人数变化趋势图 -->
<div class="dialog-main" v-show="dialogTableVisible"> <div class="sidebar-item alert-analysis">
<div class="dia-header"> <div class="sub-title por"><span>近30天井下人数变化趋势图</span></div>
<p class="dia-tit"><span>分站信息</span></p> <div class="sub-con">
<p class="close-btn" @click="closeDialog"><span>×</span></p> <div class="left-chart" ref="right" id="right"></div>
</div> </div>
<div class="dialog-content"> </div>
<div class="sub-info"> <!-- 当月人员下井次数排行榜 -->
<p v-if="perOnlineSituationData.length>0">分站名称:{{ perOnlineSituationData[0].locationName }}</p> <div class="sidebar-item alert-analysis">
<p v-if="perOnlineSituationData.length>0">分站编号:{{ perOnlineSituationData[0].locationId }}</p> <div class="sub-title por"><span>当月人员下井次数排行榜</span></div>
<p v-if="perOnlineSituationData.length>0">分站位置:{{ perOnlineSituationData[0].location }}</p> <div class="sub-con sub-con-scroll-table">
</div> <vue-seamless-scroll
<div class="dia-table-header"> :data="recentSevDaysAlarmsData"
<span>卡号</span> class="warp_ranking"
<span>姓名</span> :class-option="classOption"
<span>部门</span> >
<span>工种</span> <ul>
<span>距离分站(m)</span> <li
<span>到达位置</span> v-for="(item, index) in recentSevDaysAlarmsData"
<span>来向</span> :key="index"
<span>时间</span> class="custom-item custom-item2"
<span>进入区域</span> >
<span>入井时间</span> <span class="custom-item-content custom-item-content2">{{
item.serialNumber
</div> }}</span>
<vue-seamless-scroll :data="perOnlineSituationData" class="warp2 " :class-option="classOption2"> <span class="custom-item-content custom-item-content2">{{
<ul v-if="perOnlineSituationData.length>0"> item.name
<li v-for="(item, index) in perOnlineSituationData" :key="index" class="custom-item custom-item3"> }}</span>
<span class="custom-item-content custom-item-content3" v-text="item.cardNumber"></span> <div
<span class="custom-item-content custom-item-content3" v-text="item.perName"></span> class="custom-item-content custom-item-content2 progressbar"
<span class="custom-item-content custom-item-content3" v-text="item.departName"></span> >
<span class="custom-item-content custom-item-content3" v-text="item.worName"></span> <div
<span class="custom-item-content custom-item-content3" v-text="item.distance"></span> class="progress"
<span class="custom-item-content custom-item-content3" v-text="item.localtion"></span> :style="{ width: progressWidth(item.frequency) }"
<span class="custom-item-content custom-item-content3" v-text="item.fromLoaction"></span> ></div>
<span class="custom-item-content custom-item-content3" v-text="item.lastTime"></span> </div>
<span class="custom-item-content custom-item-content3" v-text="item.areaName"></span> <span class="custom-item-content custom-item-content2">{{
<span class="custom-item-content custom-item-content3" v-text="item.entryTime"></span> item.frequency
}}</span>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
</div> </div>
</div> </div>
<!-- 弹窗内容 -->
<div class="dialog-main" v-show="dialogTableVisible">
<div class="dia-header">
<p class="dia-tit"><span>分站信息</span></p>
<p class="close-btn" @click="closeDialog"><span>×</span></p>
</div>
<div class="dialog-content">
<div class="sub-info">
<p v-if="perOnlineSituationData.length > 0">
分站名称:{{ perOnlineSituationData[0].locationName }}
</p>
<p v-if="perOnlineSituationData.length > 0">
分站编号:{{ perOnlineSituationData[0].locationId }}
</p>
<p v-if="perOnlineSituationData.length > 0">
分站位置:{{ perOnlineSituationData[0].location }}
</p>
</div>
<div class="dia-table-header">
<span>卡号</span>
<span>姓名</span>
<span>部门</span>
<span>工种</span>
<span>距离分站(m)</span>
<span>到达位置</span>
<span>来向</span>
<span>时间</span>
<span>进入区域</span>
<span>入井时间</span>
</div>
<vue-seamless-scroll
:data="perOnlineSituationData"
class="warp2"
:class-option="classOption2"
>
<ul v-if="perOnlineSituationData.length > 0">
<li
v-for="(item, index) in perOnlineSituationData"
:key="item.cardNumber || index"
class="custom-item custom-item3"
>
<span
class="custom-item-content custom-item-content3"
v-text="item.cardNumber"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.perName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.departName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.worName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.distance"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.localtion"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.fromLoaction"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.lastTime"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.areaName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.entryTime"
></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
...@@ -167,46 +310,72 @@ import { ...@@ -167,46 +310,72 @@ import {
realTimeStatus, realTimeStatus,
stationStatus, stationStatus,
recentThDaysAlarms, recentThDaysAlarms,
recentSevDaysAlarms,
perStationInfo, perStationInfo,
perOnlineSituation, perOnlineSituation,
rydwMidStation,
monthlyRankings,
} from "@/api/tyler/screen"; } from "@/api/tyler/screen";
export default { export default {
name: "cockpit", name: "cockpit",
data() { data() {
return { return {
dialogTableVisible:false, dialogTableVisible: false,
gridData: [{ gridData: [
date: '2016-05-02', {
name: '王小虎', date: "2016-05-02",
address: '上海市普陀区金沙江路 1518 弄' name: "王小虎",
}, { address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-04', },
name: '王小虎', {
address: '上海市普陀区金沙江路 1518 弄' date: "2016-05-04",
}, { name: "王小虎",
date: '2016-05-01', address: "上海市普陀区金沙江路 1518 弄",
name: '王小虎', },
address: '上海市普陀区金沙江路 1518 弄' {
}, { date: "2016-05-01",
date: '2016-05-03', name: "王小虎",
name: '王小虎', address: "上海市普陀区金沙江路 1518 弄",
address: '上海市普陀区金沙江路 1518 弄' },
}], {
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
realTimeStatusData: [ realTimeStatusData: [
{ perName: "陈玉强", location: "一中运输巷", distance: 14.21, lastTime: "2025-01-10 14:21:31" }, {
perName: "陈玉强",
location: "一中运输巷",
distance: 14.21,
lastTime: "2025-01-10 14:21:31",
},
], ],
recentSevDaysAlarmsData: [ recentSevDaysAlarmsData: [
{ perName: "陈玉强", departName: "生产部", alarmTime: "2025-01-10 14:21:31", location: "四中车场" }, {
], serialNumber: "1",
subStaStatus:[], name: "张三",
realTimeDistributionData:[], frequency: "45",
subStaStatusData:[ },
{num:0}, {
{num:0}, serialNumber: "1",
{num:0}, name: "张三",
frequency: "32",
},
{
serialNumber: "1",
name: "张三",
frequency: "31",
},
{
serialNumber: "1",
name: "张三",
frequency: "29",
},
], ],
recentThDaysAlarmsData:[], subStaStatus: [],
realTimeDistributionData: [],
subStaStatusData: [{ num: 0 }, { num: 0 }, { num: 0 }],
recentThDaysAlarmsData: [],
classOption: { classOption: {
singleHeight: 47, singleHeight: 47,
hoverStop: true, hoverStop: true,
...@@ -217,44 +386,48 @@ export default { ...@@ -217,44 +386,48 @@ export default {
hoverStop: true, hoverStop: true,
autoPlay: true, autoPlay: true,
}, },
perOnlineSituationData:[], perOnlineSituationData: [],
subStationMid:[ subStationMid: [
{ {
"count": 0, count: 0,
"location": "一中车场", location: "一中车场",
"addressId": 1 addressId: 1,
} },
], ],
stationPositions: { stationPositions: {
1: { left: '84px', top: '206px' }, 1: { left: "84px", top: "206px" },
2: { left: '480px', top: '230px' }, 2: { left: "480px", top: "230px" },
4: { left: '84px', top: '342px' }, 4: { left: "84px", top: "327px" },
5: { left: '148px', top: '360px' }, 5: { left: "148px", top: "335px" },
6: { left: '194px', top: '362px' }, 6: { left: "194px", top: "342px" },
7: { left: '84px', top: '440px' }, 7: { left: "84px", top: "448px" },
8: { left: '200px', top: '470px' }, 8: { left: "200px", top: "470px" },
9: { left: '816px', top: '70px' },//东风井井口 9: { left: "816px", top: "70px" }, //东风井井口
10: { left: '136px', top: '672px' }, 10: { left: "136px", top: "713px" },
11: { left: '84px', top: '540px' }, 11: { left: "84px", top: "573px" },
12: { left: '84px', top: '650px' }, 12: { left: "84px", top: "703px" },
13: { left: '152px', top: '212px' }, 13: { left: "152px", top: "212px" },
14: { left: '74px', top: '88px' },//小高尖井口 14: { left: "74px", top: "88px" }, //小高尖井口
15: { left: '342px', top: '230px' }, 15: { left: "342px", top: "230px" },
16: { left: '640px', top: '220px' }, 16: { left: "640px", top: "220px" },
17: { left: '730px', top: '20px' }, 17: { left: "730px", top: "20px" },
18: { left: '265px', top: '377px' }, 18: { left: "265px", top: "344px" },
19: { left: '200px', top: '400px' }, 19: { left: "234px", top: "377px" },
20: { left: '534px', top: '390px' }, 20: { left: "534px", top: "356px" },
21: { left: '675px', top: '367px' }, 21: { left: "675px", top: "343px" },
22: { left: '400px', top: '500px' }, 22: { left: "400px", top: "479px" },
23: { left: '300px', top: '530px' }, 23: { left: "317px", top: "528px" },
24: { left: '500px', top: '518px' }, 24: { left: "500px", top: "518px" },
25: { left: '580px', top: '500px' }, 25: { left: "580px", top: "500px" },
26: { left: '350px', top: '616px' }, 26: { left: "350px", top: "609px" },
27: { left: '252px', top: '590px' }, 27: { left: "252px", top: "599px" },
28: { left: '766px', top: '206px' }, 28: { left: "766px", top: "206px" },
} },
//中段基站数据
stationData: [
{ value: 5, name: "一中基站数", itemStyle: { color: "#007BFF" } },
],
}; };
}, },
mounted() { mounted() {
...@@ -267,16 +440,33 @@ export default { ...@@ -267,16 +440,33 @@ export default {
this.subStationObj(); this.subStationObj();
this.subStationStatusObj(); this.subStationStatusObj();
this.realTimeStatusList(); this.realTimeStatusList();
this.recentSevDaysAlarmsList();
this.perStationInfoList(); this.perStationInfoList();
this.getrydwMidStation();
this.getMonthlyRankings();
}, },
methods: { methods: {
//当月人员下井次数排行榜数据
getMonthlyRankings() {
monthlyRankings().then((res) => {
if (res.code !== 200) return;
this.recentSevDaysAlarmsData = res.data;
});
},
//控制进度条宽度
progressWidth(frequency) {
//最大值从recentSevDaysAlarmsData中获取，且保证位数为0
const maxFrequencyData = this.recentSevDaysAlarmsData.reduce(
(max, item) => Math.max(max, Math.ceil(item.frequency / 10) * 10),
0
);
const width = (frequency / maxFrequencyData) * 100 + "%";
return width;
},
// 分站状态分析 // 分站状态分析
subStationObj(){ subStationObj() {
realTimeStatistics().then(res => { realTimeStatistics().then((res) => {
this.subStaStatus = res.data; this.subStaStatus = res.data;
}) });
}, },
//区域人数实时分布图 //区域人数实时分布图
async realTimeDistributionList() { async realTimeDistributionList() {
...@@ -284,32 +474,26 @@ export default { ...@@ -284,32 +474,26 @@ export default {
const res = await realTimeDistribution(); const res = await realTimeDistribution();
this.realTimeDistributionData = res.data; this.realTimeDistributionData = res.data;
} catch (error) { } catch (error) {
console.error('Error fetching real-time distribution data:', error); console.error("Error fetching real-time distribution data:", error);
} }
}, },
//井下人员实时状态 //井下人员实时状态
realTimeStatusList(){ realTimeStatusList() {
realTimeStatus().then(res => { realTimeStatus().then((res) => {
this.realTimeStatusData = res.data; this.realTimeStatusData = res.data;
}) });
}, },
// 分站状态分析 // 分站状态分析
subStationStatusObj(){ subStationStatusObj() {
stationStatus().then(res => { stationStatus().then((res) => {
this.subStaStatusData = res.data; this.subStaStatusData = res.data;
}) });
},
//近7日井下人员报警信息
recentSevDaysAlarmsList(){
recentSevDaysAlarms().then(res => {
this.recentSevDaysAlarmsData = res.data;
})
}, },
//中间分站信息 //中间分站信息
perStationInfoList(){ perStationInfoList() {
perStationInfo().then(res => { perStationInfo().then((res) => {
this.subStationMid = res.data; this.subStationMid = res.data;
}) });
}, },
// 辅助方法：获取字段值 // 辅助方法：获取字段值
getItemField(item, fieldKey) { getItemField(item, fieldKey) {
...@@ -317,146 +501,154 @@ export default { ...@@ -317,146 +501,154 @@ export default {
}, },
async areaCharts() { async areaCharts() {
let that = this; let that = this;
let myChart = echarts.init(document.getElementById('left1')); let myChart = echarts.init(document.getElementById("left1"));
await this.realTimeDistributionList(); await this.realTimeDistributionList();
let xAxisData =that.realTimeDistributionData.map(item => item.name); let xAxisData = that.realTimeDistributionData.map((item) => item.name);
let yAxisData = that.realTimeDistributionData.map(item => item.value); let yAxisData = that.realTimeDistributionData.map((item) => item.value);
let option ={ let option = {
title: { title: {
text: "", text: "",
x: "center", x: "center",
y:"4%", y: "4%",
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: '12' fontSize: "12",
},
subtextStyle: {
color: '#90979c',
fontSize: '12',
},
}, },
tooltip: { subtextStyle: {
trigger: 'axis', color: "#90979c",
axisPointer: { fontSize: "12",
type: 'shadow'
}
}, },
grid: { },
top: '5%', tooltip: {
right: '3%', trigger: "axis",
left: '8%', axisPointer: {
bottom: '12%' type: "shadow",
}, },
xAxis: [{ },
type: 'category', grid: {
data: xAxisData, top: "5%",
axisLine: { right: "3%",
show:true, left: "8%",
lineStyle: { bottom: "12%",
color: 'rgba(255,255,255,0.12)' },
} xAxis: [
{
type: "category",
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
axisLabel: {
show: true,
margin: 10,
color: "#fff",
textStyle: {
fontSize: 12,
}, },
axisLabel: { },
show:true, },
margin: 10, ],
color: '#fff', yAxis: [
textStyle: { {
fontSize: 12 axisLabel: {
}, show: true,
formatter: "{value}",
color: "#B7CCDA",
textStyle: {
fontSize: 14,
}, },
}], },
yAxis: [{ axisTick: {
axisLabel: { //y轴刻度线
show:true, show: true,
formatter: '{value}', color: "#e2e9ff",
color: '#B7CCDA', },
textStyle: { axisLine: {
fontSize: 14 show: true,
}, color: "#e2e9ff",
lineStyle: {
color: "rgba(255,255,255,0.12)",
}, },
axisTick:{ //y轴刻度线 },
show:true, splitLine: {
color: '#e2e9ff', show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
}, },
axisLine: { },
show: true, },
color: '#e2e9ff', ],
lineStyle: { series: [
color: 'rgba(255,255,255,0.12)' {
} type: "bar",
data: yAxisData,
barWidth: "16px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#37BBFF", // 0% 处的颜色
},
{
offset: 1,
color: "#1C3454", // 100% 处的颜色
},
],
false
),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
}, },
splitLine: { },
show:true, label: {
lineStyle: { normal: {
color: 'rgba(255,255,255,0.12)' show: false,
} lineHeight: 20,
} width: 10,
}], height: 20,
series: [{ backgroundColor: "rgba(0,160,221,0.1)",
type: 'bar', // borderRadius: 200,
data: yAxisData,
barWidth: '16px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#37BBFF' // 0% 处的颜色
}, {
offset: 1,
color: '#1C3454' // 100% 处的颜色
}], false),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
}
}, },
label: { },
normal: { },
show: false, ],
lineHeight: 20, };
width: 10,
height: 20,
backgroundColor: 'rgba(0,160,221,0.1)',
// borderRadius: 200,
}
}
}]
}
myChart.setOption(option); myChart.setOption(option);
setTimeout(() => { setTimeout(() => {
myChart.resize(); myChart.resize();
}, 600); }, 600);
}, },
async recentThDaysAlarmsList() { async recentThDaysAlarmsList() {
try { try {
const res = await recentThDaysAlarms(); const res = await recentThDaysAlarms();
this.recentThDaysAlarmsData = res.data; this.recentThDaysAlarmsData = res.data;
} catch (error) { } catch (error) {
console.error('Error fetching real-time distribution data:', error); console.error("Error fetching real-time distribution data:", error);
} }
}, },
async alarm30(){ //30天井下人数变化趋势
async alarm30() {
let that = this; let that = this;
await this.recentThDaysAlarmsList(); await this.recentThDaysAlarmsList();
let salvProName =that.recentThDaysAlarmsData.map(item => item.name); console.log(this.recentThDaysAlarmsData, "this.recentThDaysAlarmsData");
let salvProValue = that.recentThDaysAlarmsData.map(item => item.num); let myChart = echarts.init(document.getElementById("right"));
let option = {
let myChart = echarts.init(document.getElementById('right'));
var salvProMax = []; //背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(salvProValue[0]);
}
let option ={
grid: { grid: {
left: "4%", left: "3%",
right: "0%", right: "3%",
bottom: "2%", bottom: "2%",
top: "2%", top: "3%",
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
...@@ -464,129 +656,179 @@ export default { ...@@ -464,129 +656,179 @@ export default {
axisPointer: { axisPointer: {
type: "none", type: "none",
}, },
//显示日期和人数
formatter: function (params) { formatter: function (params) {
return params[0].name + " : " + params[0].value; let date = params[0].name; // 日期
let value = params[0].value; // 人数
return `${date}<br/>人数: ${value}`;
}, },
}, },
xAxis: { xAxis: {
// show: false, type: "category",
type: "value", data: this.recentThDaysAlarmsData.map((item) => item.name), // 假设日期是字符串类型
axisLabel: { axisTick: {
show:true,
color: '#B7CCDA',
textStyle: {
fontSize: 14
},
},
axisLine: {
show: false, show: false,
}, },
//隔5个显示
axisLabel: {
interval: 5,
color: "#fff",
fontSize: 12,
},
},
yAxis: {
type: "value",
//虚线，取整
splitLine: { splitLine: {
show: false, show: true,
lineStyle: {
color: "#fff",
type: "dashed",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
}, },
}, },
yAxis: [ series: [
{ {
type: "category", data: this.recentThDaysAlarmsData.map((item) => item.value), // 假设值是数字类型,
inverse: true, type: "line",
axisLabel: { stack: "Total",
show: true,
textStyle: { //线条颜色
color: "#fff", itemStyle: {
fontSize: 14 color: "#37BBFF",
},
},
splitLine: {
show: false,
}, },
axisTick: { areaStyle: {
show: false, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 184, 251,0.5)",
},
{
offset: 1,
color: "rgb(55, 184, 251,0.1)",
},
]),
}, },
axisLine: { emphasis: {
show: false, focus: "series",
}, },
data: salvProName,
}, },
{ ],
type: "category", };
inverse: true, myChart.setOption(option);
axisTick: "none", setTimeout(() => {
axisLine: "none", myChart.resize();
show: false, }, 600);
axisLabel: { },
textStyle: { //获取中段基站数据
color: "#ffffff", getrydwMidStation() {
fontSize: "14", rydwMidStation().then((res) => {
}, if (res.code !== 200) {
return;
}
// 创建名称映射表;
const stationMap = {
一中: { color: "#007BFF", suffix: "基站数" },
二中: { color: "#00CCCC", suffix: "基站数" },
三中: { color: "#28A745", suffix: "基站数" },
四中: { color: "#FFC107", suffix: "基站数" },
五中: { color: "#FF5733", suffix: "基站数" },
};
// 先过滤再转换
this.stationData = res.data
.filter((item) => stationMap[item.name]) // 只保留有配置项的数据
.map((item) => ({
value: item.value,
name: item.name + stationMap[item.name].suffix,
itemStyle: { color: stationMap[item.name].color },
}));
this.$nextTick(() => {
console.log(this.stationData);
this.rightTopChart(); // 确保DOM更新后执行
});
});
},
//中段基站分析
rightTopChart() {
let myChart = echarts.init(document.getElementById("rightTop"));
let option = {
polar: {
radius: [30, "90%"],
},
angleAxis: {
max: 10,
startAngle: 90,
show: false, // 显示坐标轴
},
radiusAxis: {
type: "category",
data: this.stationData.map((item) => item.name),
axisLine: {
show: false, // 显示径向轴
lineStyle: {
color: "#fff",
}, },
data: salvProValue,
}, },
], axisLabel: {
show: false, // 显示分类标签
color: "#fff",
},
},
series: [ series: [
// 数值条（实际颜色）
{ {
name: "值",
type: "bar", type: "bar",
zlevel: 1, coordinateSystem: "polar",
stack: "a",
data: this.stationData.map((d) => d.value),
itemStyle: { itemStyle: {
normal: { color: (params) =>
// barBorderRadius: 30, this.stationData[params.dataIndex].itemStyle.color,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1C3454",
},
{
offset: 1,
color: "#37BBFF",
},
]),
},
}, },
barWidth: 10,
data: salvProValue,
}, },
// 背景条（灰色填充）
{ {
name: "背景",
type: "bar", type: "bar",
barWidth: 10, coordinateSystem: "polar",
barGap: "-100%", stack: "a",
data: salvProMax, data: this.stationData.map(() => 10), // 每个项总长度10
itemStyle: { itemStyle: {
normal: { color: "RGBA(28, 57, 92, 0.3)",
color: "rgba(24,31,68,1)",
barBorderRadius: 30,
},
}, },
}, },
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
}, },
//自动滚动 //自动滚动
autoScroll() { autoScroll() {
const divData = this.$refs.scroll_List3; const divData = this.$refs.scroll_List3;
// 拿到表格中承载数据的div元素 // 拿到表格中承载数据的div元素
divData.scrollTop += 1; divData.scrollTop += 1;
if ( if (
Math.round(divData.clientHeight + divData.scrollTop) + 1 >= Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
divData.scrollHeight divData.scrollHeight
) { ) {
// 重置table距离顶部距离 // 重置table距离顶部距离
divData.scrollTop = 0; divData.scrollTop = 0;
} }
this.scrolltimer3 = window.requestAnimationFrame( this.scrolltimer3 = window.requestAnimationFrame(
this.autoScroll.bind(this) this.autoScroll.bind(this)
); );
}, },
//停止滚动 //停止滚动
cancelScroll() { cancelScroll() {
window.cancelAnimationFrame(this.scrolltimer3) window.cancelAnimationFrame(this.scrolltimer3);
}, },
goToSys(){ goToSys() {
var link = this.$router.resolve({ var link = this.$router.resolve({
path: "/", path: "/",
}); });
...@@ -597,45 +839,51 @@ export default { ...@@ -597,45 +839,51 @@ export default {
return this.stationPositions[addressId] || {}; return this.stationPositions[addressId] || {};
}, },
handleStation(addressId) { handleStation(addressId) {
perOnlineSituation({ addressId }).then((res) => {
perOnlineSituation({addressId}).then(res => { console.log(res, "res");
console.log(res,'res')
if (res.data && res.data.length > 0) {
if(res.data&&res.data.length>0){ this.perOnlineSituationData = res.data;
this.perOnlineSituationData = res.data
this.dialogTableVisible = true; this.dialogTableVisible = true;
} }
}) });
}, },
closeDialog() { closeDialog() {
this.dialogTableVisible = false; this.dialogTableVisible = false;
this.perOnlineSituationData = [] this.perOnlineSituationData = [];
} },
},
filters: {
stationDataValue(data, value) {
//当data的name等于value时，返回data的value
return data.find((item) => item.name === value)?.value + "个" || 0;
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.por{position: relative;} .por {
.sidebar-left{ position: relative;
}
.sidebar-left {
transform-origin: left center; transform-origin: left center;
transform: scaleX(1) perspective(610px) rotateY(5deg); transform: scaleX(1) perspective(610px) rotateY(5deg);
} }
.sidebar-right{ .sidebar-right {
transform-origin:center right ; transform-origin: center right;
transform: scaleX(1) perspective(610px) rotateY(-5deg); transform: scaleX(1) perspective(610px) rotateY(-5deg);
} }
/* 主体内容 */ /* 主体内容 */
.main-content { .main-content {
// flex: 1; // flex: 1;
// display: grid; // display: grid;
// grid-template-columns: 1fr 3fr 1fr; /* 三列布局 */ // grid-template-columns: 1fr 3fr 1fr; /* 三列布局 */
// gap: 20px; // gap: 20px;
// max-height: calc(100% - 70px); // max-height: calc(100% - 70px);
// overflow: hidden; // overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding:0 30px; padding: 0 30px;
} }
/* 左右侧边栏 */ /* 左右侧边栏 */
...@@ -646,18 +894,22 @@ export default { ...@@ -646,18 +894,22 @@ export default {
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
display: grid; display: grid;
grid-template-rows: repeat(3,1fr); grid-template-rows: repeat(3, 1fr);
gap: 2px; gap: 2px;
margin-top: -10px; margin-top: -10px;
} }
.sidebar-item{ .sidebar-item {
width: 100%; width: 100%;
height: 286px; height: 286px;
margin-bottom: 30px; margin-bottom: 30px;
background: linear-gradient(180deg, rgba(1,33,58,.2) 0%, rgba(8,132,233,.2) 100%); background: linear-gradient(
180deg,
rgba(1, 33, 58, 0.2) 0%,
rgba(8, 132, 233, 0.2) 100%
);
position: relative; position: relative;
&::before{ &::before {
content: ''; content: "";
width: 460px; width: 460px;
height: 4px; height: 4px;
position: absolute; position: absolute;
...@@ -667,89 +919,91 @@ export default { ...@@ -667,89 +919,91 @@ export default {
right: 0; right: 0;
z-index: 20; z-index: 20;
} }
.sub-title{ .sub-title {
width: 100%; width: 100%;
height: 46px; height: 46px;
background: url("~@/assets/images/screen/title1.png") no-repeat center; background: url("~@/assets/images/screen/title1.png") no-repeat center;
font-weight: bold; font-weight: bold;
span{ span {
position: absolute; position: absolute;
top:-10px; top: -10px;
left:30px; left: 30px;
font-size: 22px; font-size: 22px;
} }
} }
.sub-con1{ .sub-con1 {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
.sub-con-left{ .sub-con-left {
div{ div {
margin-top: -40px; margin-top: -40px;
width: 144px; width: 144px;
height: 178px; height: 178px;
background: url("~@/assets/images/screen/icon1.png") no-repeat center; background: url("~@/assets/images/screen/icon1.png") no-repeat center;
background-size: contain; background-size: contain;
p{ p {
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
background: linear-gradient(180deg, #FFED9B 0%, #FFFFFF 48.9990234375%, #FFE25D 100%); background: linear-gradient(
180deg,
#ffed9b 0%,
#ffffff 48.9990234375%,
#ffe25d 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
} }
} }
.sub-con-right{ .sub-con-right {
div{ div {
width: 243px; width: 243px;
height: 32px; height: 32px;
background: url("~@/assets/images/screen/underline.png") no-repeat center; background: url("~@/assets/images/screen/underline.png") no-repeat
center;
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
.p-out{ .p-out {
width: 100%; width: 100%;
position: absolute; position: absolute;
left:30px; left: 30px;
top:-16px; top: -16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-right: 50px; padding-right: 50px;
span{ span {
font-size: 30px; font-size: 30px;
color: #FFD929; color: #ffd929;
text-indent: 15px; text-indent: 15px;
font-family: 'number'; font-family: "number";
margin-top: -4px; margin-top: -4px;
&::before{ &::before {
content: ''; content: "";
width: 6px; width: 6px;
height: 8px; height: 8px;
position: absolute; position: absolute;
background: url("~@/assets/images/screen/icon2.png") no-repeat center; background: url("~@/assets/images/screen/icon2.png") no-repeat
center;
left: 5px; left: 5px;
top:10px; top: 10px;
z-index: 20; z-index: 20;
} }
} }
} }
&:nth-child(1) p.p-out span{ &:nth-child(1) p.p-out span {
color: #29CAFF; color: #29caff;
} }
&:nth-child(2) p.p-out span{ &:nth-child(2) p.p-out span {
color: #00FFC0; color: #00ffc0;
} }
} }
} }
} }
} }
...@@ -763,110 +1017,139 @@ export default { ...@@ -763,110 +1017,139 @@ export default {
/* 实时分布图区域 */ /* 实时分布图区域 */
.distribution-map { .distribution-map {
height: 300px; height: 300px;
background: rgba(8, 28, 49, 0.8); background: rgba(8, 28, 49, 0.8);
border-radius: 8px; border-radius: 8px;
} }
/* 底部信息栏 */ .left-chart {
// .footer {
// height: 120px;
// margin-top: 20px;
// background: rgba(0, 72, 143, 0.6);
// border-radius: 8px;
// display: flex;
// align-items: center;
// padding: 0 30px;
// }
.left-chart{
width: 100%; width: 100%;
height: 14em; height: 14em;
} }
.sub-con-scroll-table{ .sub-con-scroll-table {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
.custom-header{ .custom-header {
width: 460px; width: 460px;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 2fr;
text-align: center; text-align: center;
color: #2ED5FF; color: #2ed5ff;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
} }
.custom-item{ .custom-item {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 2fr;
text-align: center; text-align: center;
} }
.custom-header-item{ .custom-header-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.custom-header2{ .custom-header2 {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr; grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center; text-align: center;
color: #2ED5FF; color: #2ed5ff;
} }
.custom-item2{ .custom-item2 {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr; grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center; text-align: center;
} }
.sub-con-r{ .sub-con-r {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-evenly; justify-content: flex-start; // 改为左对齐
align-items: center; align-items: center;
gap: 10px; // 添加间距控制
height: calc(100% - 70px); height: calc(100% - 70px);
.sub-con-r-left{ .chart-container {
width: 127px; width: 180px;
height: 161px; height: 180px;
background: url("~@/assets/images/screen/icon3.png") no-repeat center; margin: 0;
background-size: 100%; margin-left: 20px;
flex-shrink: 0; // 防止图表容器被压缩
} }
.sub-con-r-right{ .legend-container {
margin-left: 10px; // 缩小左侧间距
width: 250px; text-align: left;
display: flex; ul {
flex-direction: column; list-style-type: none; // 新增该属性去除默认点状样式
// gap: 10px; display: flex;
p{ flex-direction: column;
display: grid; gap: 10px; // 确保垂直间距生效
grid-template-columns: 4fr 4fr 1fr; padding-left: 0; // 移除默认padding
font-size: 18px; li {
line-height: 24px; width: 230px;
color: #BBD7EA; height: 28px;
background-color: rgba(61, 98, 147,.2); background: #173253;
padding:10px 10px; border-radius: 14px;
text-align: justify; padding-left: 30px;
box-sizing: border-box; line-height: 28px;
span:nth-child(2){ .legend-color {
color: rgba(187, 215, 234,.2); display: inline-block;
} width: 15px;
span:nth-child(3){ height: 8px;
font-weight: bold; margin-right: 25px;
font-size: 24px; margin-bottom: 2px;
color: #BBD7EA; }
background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%); span:nth-child(2) {
-webkit-background-clip: text; // 选择第二个span
-webkit-text-fill-color: transparent; color: #fff; // 示例样式
margin-right: 22px;
}
.blue {
background-color: #007bff;
}
.txtblue {
color: #007bff;
}
.cyan {
background-color: #00cccc;
}
.txtcyan {
color: #00cccc;
}
.green {
background-color: #28a745;
}
.txtgreen {
color: #28a745;
}
.yellow {
background-color: #ffc107;
color: #ffc107;
}
.txtyellow {
color: #ffc107;
}
.orange {
background-color: #ff5733;
color: #ff5733;
}
.txtorange {
color: #ff5733;
}
} }
} }
} }
} }
.warp { .warp {
height: calc(100% - 80px); height: calc(100% - 80px);
width: 460px; width: 460px;
...@@ -877,8 +1160,7 @@ export default { ...@@ -877,8 +1160,7 @@ export default {
padding: 0; padding: 0;
margin: 10px auto 0; margin: 10px auto 0;
width: 100%; width: 100%;
li.custom-item{ li.custom-item {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 2fr;
...@@ -887,26 +1169,95 @@ export default { ...@@ -887,26 +1169,95 @@ export default {
margin-bottom: 5px; margin-bottom: 5px;
height: 36px; height: 36px;
font-size: 16px; font-size: 16px;
color: #BBD7EA; color: #bbd7ea;
position: relative; position: relative;
background-color: rgba(61, 98, 147,.2); background-color: rgba(61, 98, 147, 0.2);
span{ span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
li.custom-item2{ li.custom-item2 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr; grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center; text-align: center;
} }
} }
} }
.parent-container{ .warp_ranking {
height: calc(100% - 80px);
width: 460px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding-left: 10px;
margin: 10px auto 0;
width: 100%;
li {
&.custom-item {
width: calc(100% - 10px);
display: grid;
grid-template-columns: 0.5fr 1fr 3fr 0.5fr;
text-align: center;
margin-bottom: 5px;
height: 36px;
font-size: 16px;
color: #bbd7ea;
position: relative;
background-color: rgba(61, 98, 147, 0.2);
span {
display: flex;
justify-content: center;
align-items: center;
}
}
&.custom-item2 {
display: grid;
grid-template-columns: 0.2fr 0.5fr 3fr 0.5fr;
text-align: center;
line-height: 36px;
.progressbar {
display: block;
width: 100%;
height: 8px;
margin: auto 0; // 添加垂直居中
background-color: RGBA(29, 47, 71, 1);
.progress {
height: 100%;
background: linear-gradient(270deg, #37bbff 0%, #1c3454 100%);
}
}
}
span:nth-child(1),
span:nth-child(4) {
color: rgba(55, 187, 255, 1);
}
}
/**选中前三个li */
li:nth-child(-n + 3) {
.progressbar {
.progress {
background: linear-gradient(
270deg,
#ffbe23 0%,
rgba(255, 190, 35, 0.05) 100%
);
}
}
/**选中第一个和第二个span */
span:nth-child(1),
span:nth-child(4) {
color: #ffbe23;
}
}
}
}
.parent-container {
position: relative; position: relative;
} }
.dot{ .dot {
width: 42px; width: 42px;
height: 53px; height: 53px;
background: url("~@/assets/images/screen/icon4.png") no-repeat center; background: url("~@/assets/images/screen/icon4.png") no-repeat center;
...@@ -914,21 +1265,20 @@ export default { ...@@ -914,21 +1265,20 @@ export default {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
p{ p {
font-size: 20px; font-size: 20px;
color: #BBD7EA; color: #bbd7ea;
background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%); background: linear-gradient(0deg, #47c5ff 0%, #fdfeff 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin: 0; margin: 0;
} }
&:hover{ &:hover {
background: url("~@/assets/images/screen/icon5.png") no-repeat center; background: url("~@/assets/images/screen/icon5.png") no-repeat center;
background-size: 100%; background-size: 100%;
z-index: 20; z-index: 20;
} }
} }
...@@ -943,40 +1293,40 @@ export default { ...@@ -943,40 +1293,40 @@ export default {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
width: 1262px; width: 1262px;
background: linear-gradient(0deg, #062451 0%, #09162D 100%); background: linear-gradient(0deg, #062451 0%, #09162d 100%);
box-shadow: 0px 15px 11px 2px rgba(0,20,39,0.31); box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
border: 2px solid #11B9FF; border: 2px solid #11b9ff;
} }
.dia-header { .dia-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.dia-tit{ .dia-tit {
width: 1140px; width: 1140px;
height: 46px; height: 46px;
font-size: 22px; font-size: 22px;
color: #FFFFFF; color: #ffffff;
font-weight: bold; font-weight: bold;
background: url("~@/assets/images/screen/underline-dia.png") no-repeat center; background: url("~@/assets/images/screen/underline-dia.png") no-repeat
center;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
span{ span {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: -14px; top: -14px;
} }
} }
} }
.close-btn { .close-btn {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
span{ span {
font-size: 28px; font-size: 28px;
position: absolute; position: absolute;
left: -20px; left: -20px;
...@@ -986,48 +1336,52 @@ export default { ...@@ -986,48 +1336,52 @@ export default {
.dialog-content { .dialog-content {
text-align: center; text-align: center;
.sub-info{ .sub-info {
width: 50%; width: 50%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-indent: 1em; text-indent: 1em;
font-size: 18px; font-size: 18px;
color: #36FFF8; color: #36fff8;
} }
} }
.dia-table-header{ .dia-table-header {
width: 100%; width: 100%;
height: 36px; height: 36px;
background: linear-gradient(0deg, rgba(31,169,255,0.5) 0%, rgba(31,169,255,0.03) 100%); background: linear-gradient(
0deg,
rgba(31, 169, 255, 0.5) 0%,
rgba(31, 169, 255, 0.03) 100%
);
display: grid; display: grid;
grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr ; grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
color: #2ED5FF; color: #2ed5ff;
line-height: 36px; line-height: 36px;
font-weight: bold; font-weight: bold;
} }
.warp2{ .warp2 {
width: 100%; width: 100%;
max-height: 400px; max-height: 400px;
overflow: hidden; overflow: hidden;
ul{ ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
li{ li {
margin-bottom: 20px; margin-bottom: 20px;
line-height: 40px; line-height: 40px;
font-size: 18px; font-size: 18px;
background-color: rgba(61, 98, 147,.2); background-color: rgba(61, 98, 147, 0.2);
} }
} }
} }
.custom-item3{ .custom-item3 {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr ; grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr;
text-align: center; text-align: center;
} }
.overlay { .overlay {
...@@ -1039,4 +1393,4 @@ export default { ...@@ -1039,4 +1393,4 @@ export default {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
z-index: 999; z-index: 999;
} }
</style> </style>
\ No newline at end of file
src/views/Screen/items/tfxt.vue 0 → 100644
View file @ 25bf70ae
<template>
<div class="main-content">
<div class="content">
<!--一中23线风机dom-->
<div class="fengji" style="top: 74px; left: 96px">
<div class="fengji-title">一中23线风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
<p>设定频率：100HZ</p>
<p>风压：10Kpa</p>
<p>风速：10m/s</p>
<p>风量：m3/s</p>
<p>前轴温：10°℃</p>
<p>后轴温：10°℃</p>
<p>电机温度：10°℃</p>
<p>前振动：10000mm/s</p>
<p>后振动：10000mm/s</p>
</div>
</div>
<div class="arrow-psition" style="top: 132px; left: 300px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 132px; left: 998px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 132px; left: 1398px">
<div class="fengji-arrow"></div>
</div>
<!--一中副扇风机dom-->
<div class="fengji" style="left: 760px; top: 74px">
<div class="fengji-title">一中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<!--地面空压机-->
<div class="kongya" style="left: 1160px; top: 44px">
<div class="kongya-title">地面空压机</div>
<img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
</div>
<!--东风井风机dom-->
<div class="fengji" style="right: 80px; top: 24px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
东风进风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div class="fengji-msg" style="position: absolute; right: -30px">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
<p>设定频率：100HZ</p>
<p>风压：10Kpa</p>
<p>风速：10m/s</p>
<p>风量：m3/s</p>
<p>前轴温：10°℃</p>
<p>后轴温：10°℃</p>
<p>电机温度：10°℃</p>
<p>前振动：10000mm/s</p>
<p>后振动：10000mm/s</p>
</div>
</div>
<div class="arrow-psition" style="top: 302px; left: 558px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 302px; left: 758px">
<div class="fengji-arrow"></div>
</div>
<!--二中空压机-->
<div class="kongya" style="left: 360px; top: 274px">
<div class="kongya-title">二中空压机</div>
<img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
</div>
<!--二中副扇风机dom-->
<div class="fengji" style="left: 960px; top: 247px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
二中副扇风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div
class="fengji-msg"
style="position: absolute; right: -190px; top: 20px"
>
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 472px; left: 288px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 472px; left: 888px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 472px; left: 1088px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 472px; left: 1268px">
<div class="fengji-arrow"></div>
</div>
<!--三中副扇风机dom-->
<div class="fengji" style="left: 660px; top: 415px">
<div class="fengji-title">三中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<!--四中副扇风机dom-->
<div class="fengji" style="left: 1260px; top: 583px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
四中副扇风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div
class="fengji-msg"
style="position: absolute; right: -190px; top: 20px"
>
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 642px; left: 288px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 642px; left: 588px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 642px; left: 888px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 642px; left: 1068px">
<div class="fengji-arrow"></div>
</div>
<!--五中副扇风机dom-->
<div class="fengji" style="left: 600px; top: 750px">
<div class="fengji-title">五中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 812px; left: 188px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 812px; left: 868px">
<div class="fengji-arrow"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.main-content {
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px;
.content {
width: 100%;
height: 100%;
position: relative;
background: url("~@/assets/images/screen/tfxt/line.png") no-repeat center;
background-size: 90% 95%;
background-position-x: 50px;
.fengji {
position: absolute;
width: 195px;
.fengji-title {
font-weight: 400;
font-size: 20px;
color: #ffd200;
line-height: 30px;
margin: 0;
padding-left: 5px;
}
.fengji-content {
display: flex;
img {
width: 141px;
height: 141px;
padding: 10px 18px;
}
.fengji-control {
padding-top: 16px;
.fengji-icon {
width: 53px;
height: 53px;
background: url("~@/assets/images/screen/tfxt/icon2.png") no-repeat
center;
background-size: 100% 100%;
//需要这个元素做旋转动画，围着自身圆心一直旋转
animation: rotate 2s linear infinite;
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
.fengji-lamp {
width: 53px;
height: 53px;
background: url("~@/assets/images/screen/tfxt/icon4.png") no-repeat
center;
background-size: 100%;
position: relative;
}
}
}
.fengji-button {
width: 140px;
height: 36px;
border-radius: 4px;
border: 2px solid #00d8ff;
font-weight: 400;
font-size: 18px;
color: #ffffff;
line-height: 34px;
text-align: center;
background: #0387c8;
}
.fengji-msg {
padding: 17px;
border: 2px solid #00ccff;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
line-height: 28px;
background: #05162b;
margin-top: 15px;
margin-left: -15px;
p {
margin: 0%;
}
&.msg-postion {
position: absolute;
top: 30px;
left: -180px;
}
}
}
.kongya {
position: absolute;
.kongya-title {
font-weight: 400;
font-size: 20px;
color: #ffd200;
line-height: 30px;
margin: 0;
padding-left: 5px;
text-align: center;
}
img {
width: 171px;
height: 76px;
}
}
.arrow-psition {
position: absolute;
.fengji-arrow {
width: 53px;
height: 53px;
position: absolute;
background: url("~@/assets/images/screen/tfxt/icon1.png") no-repeat
center;
//这里制作动画淡入切向右移动100px淡出，
animation: arrow 2s linear infinite;
@keyframes arrow {
0% {
opacity: 0;
transform: translateX(0px);
}
25% {
opacity: 1;
transform: translateX(25px);
}
75% {
transform: translateX(75px);
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
}
&.bevel {
// 旋转45度
transform: rotate(-45deg);
}
}
}
}
</style>
src/views/Screen/items/tsj.vue 0 → 100644
View file @ 25bf70ae
<template>
<div class="main-content">
<div class="left">
<div class="item-class" v-for="item in leftList" :key="item.name">
<i class="icon" :class="item.icon"></i>
<span class="item-name">{{ item.name }}</span>
<span class="item-value">{{ item.value }}</span>
</div>
<div class="left-botton">
<span class="item-name">主控<br />位置</span>
<span class="item-value">0.00</span>
</div>
</div>
<div class="center">
<div class="center-box">
<div class="dianti-target" style="top: 300px; left: 170px">去井口</div>
<div class="dianti-peizhong" style="top: 150px; left: 365px"></div>
<div class="dianti-box" style="top: 450px; left: 413px"></div>
<div class="dianti-louceng" style="top: 290px; left: 526px">
<div class="louceng-item">一中</div>
<div class="louceng-item">二中</div>
<div class="louceng-item">三中</div>
<div class="louceng-item">四中</div>
<div class="louceng-item">五中</div>
</div>
</div>
</div>
<div class="right">
<div class="right-item-class" v-for="item in rightList" :key="item.name">
<div class="left-item-box">{{ item.name }}</div>
<div class="right-item-box">
<div class="right-item-box-item">{{ item.value1 }}</div>
<div class="right-item-box-item">{{ item.value2 }}</div>
<div class="right-item-box-item">{{ item.value3 }}</div>
<div class="right-item-box-item">{{ item.value4 }}</div>
</div>
</div>
<div class="right-item-botton">
<div class="title">井下人工安全巡检</div>
<div class="right-item-body">
<div class="table-header">
<span>检查人</span>
<span>检查点位</span>
<span>是否正常</span>
<span>日期</span>
</div>
<div class="table-content" v-for="item in tableList" :key="item.name">
<span>{{ item.name }}</span>
<span>{{ item.point }}</span>
<span>{{ item.isNormal }}</span>
<span>{{ item.date }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return {
leftList: [
{ icon: "icon1", name: "主控速度", value: "0.00m/s" },
{ icon: "icon1", name: "编码器速度", value: "0.00m/s" },
{ icon: "icon1", name: "给定速度", value: "0.00m/s" },
{ icon: "icon1", name: "从编码器速度", value: "0.00m/s" },
{ icon: "icon2", name: "主罐位置", value: "0.00m" },
{ icon: "icon2", name: "位置偏差", value: "0.00m" },
{ icon: "icon3", name: "电枢电流", value: "0.00A" },
{ icon: "icon3", name: "磁场电流", value: "-0.08A" },
{ icon: "icon1", name: "运行油压", value: "0.08MPa" },
],
rightList: [
{
name: "硬件条件",
value1: "运行准备",
value2: "主风机启",
value3: "变流器启",
value4: "液压站启",
},
{
name: "安全保护",
value1: "硬件安全",
value2: "软件安全",
value3: "操作台安全",
value4: "轻故障",
},
{
name: "信号方向",
value1: "井口信号",
value2: "信号继电器",
value3: "选择正向",
value4: "选择反向",
},
{
name: "闸回路",
value1: "手动闸",
value2: "工作闸",
value3: "全敞闸",
value4: "一级制动",
},
{
name: "开车回路",
value1: "选低速",
value2: "使能输出",
value3: "装置解封",
value4: "系统减速",
},
],
tableList: [
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
],
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.main-content {
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px;
display: flex; // 新增弹性布局
justify-content: space-between; // 左右两侧贴边
.left {
padding-left: 91px;
padding-top: 70px;
.item-class {
width: 390px;
height: 60px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg5.png") no-repeat center;
background-size: 100%;
margin-bottom: 20px;
.icon {
width: 50px;
height: 50px;
display: inline-block;
background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background-size: 100% 100%;
margin-left: 15px;
vertical-align: middle; // 新增垂直对齐
}
.item-name {
margin-left: 15px;
font-weight: 600;
font-size: 20px;
color: #00feef;
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
width: 170px;
text-align: left;
height: 60px;
line-height: 60px;
// float: left;
}
.item-value {
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
height: 60px;
width: 110px;
font-weight: 600;
font-size: 26px;
color: #ffffff;
margin-right: 15px;
height: 60px;
line-height: 60px; // 新增行高保持垂直居中
text-align: right;
// float: left;
}
}
.left-botton {
width: 390px;
height: 112px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 新增垂直居中
.item-name {
font-weight: 600;
font-size: 26px;
color: #00feef;
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
width: 116px;
height: 72px;
text-align: center;
margin-left: 20px;
border-right: 1px solid #00feef;
margin: 0 auto 0 20px; // 修改外边距
}
.item-value {
font-weight: 600;
font-size: 26px;
color: #ffffff;
display: inline-block;
vertical-align: middle; // 新增垂直对齐
flex: 1; // 新增填充剩余空间
text-align: center;
}
}
}
.center {
width: 826px;
height: 902px;
margin: 0 50px;
padding-top: 70px;
.center-box {
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/tsj/bg1.png") no-repeat center;
background-size: 100% 100%;
position: relative;
.dianti-target {
width: 60px;
height: 250px;
background: #fecb00;
font-size: 30px;
font-weight: 600;
color: #000000;
writing-mode: vertical-rl;
text-align: center;
line-height: 60px;
letter-spacing: 10px;
position: absolute;
}
.dianti-peizhong {
width: 18px;
height: 90px;
background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
}
.dianti-box {
width: 78px;
height: 78px;
background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
}
.dianti-louceng {
position: absolute;
.louceng-item {
width: 160px;
height: 40px;
background: #00aadb;
font-weight: 400;
font-size: 24px;
color: #ffffff;
text-align: center;
line-height: 40px;
margin-bottom: 45px;
}
}
}
}
.right {
width: 400px;
padding-top: 70px;
margin-right: 50px;
.right-item-class {
width: 100%;
height: 118px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 垂直居中
padding: 0 10px; // 添加左右内边距
margin-bottom: 18px;
.left-item-box {
width: 98px;
height: 98px;
border-radius: 10px;
border: 2px solid #02dbf2;
font-weight: 400;
font-size: 24px;
color: #fecb00;
line-height: 36px;
padding: 10px 22px; // 移除原有padding
margin-right: 10px;
}
.right-item-box {
flex: 1; // 填充剩余空间
display: grid; // 使用网格布局
grid-template-columns: repeat(2, 1fr); // 两列布局
gap: 10px; // 项间距
justify-content: space-between;
.right-item-box-item {
width: 130px;
height: 44px;
border-radius: 8px;
text-align: center;
border: 2px solid #02dbf2;
font-weight: 400;
font-size: 20px;
color: #ffffff;
margin: 0; // 移除原有宽度限制
line-height: 44px; // 垂直居中
&.active {
background: #02dbf2;
color: black;
}
}
}
}
.right-item-botton {
width: 100%;
height: 190px;
background: url("~@/assets/images/screen/tsj/bg7.png") no-repeat center;
background-size: 100% 100%;
overflow: hidden;
.title {
height: 45px;
border-bottom: 1px solid #02f2ea;
margin: 0 10px;
font-weight: 400;
font-size: 22px;
color: #fecb00;
line-height: 45px;
}
.right-item-body {
width: 100%;
margin-top: 8px;
.table-header {
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr;
color: #02f2ea;
margin: 0px 10px;
span {
text-align: center;
font-size: 16px;
font-weight: 500;
}
}
.table-content {
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr;
color: #ffffff; // 内容文字颜色
font-size: 16px;
margin: 0px 10px;
span {
text-align: center;
line-height: 30px; // 行高保持垂直居中
&:nth-child(3) {
// 第三列特殊样式
color: #00ff0d; // 正常状态绿色
}
}
// 鼠标悬停效果
&:hover {
background: rgba(2, 242, 234, 0.1);
}
}
}
}
}
}
</style>
src/views/system/waterSysSet/index.vue
View file @ 25bf70ae
...@@ -32,34 +32,58 @@ ...@@ -32,34 +32,58 @@
<el-divider></el-divider> <el-divider></el-divider>
<!-- 液体高度设置 --> <!-- 液体高度设置 -->
<div class="section"> <div class="section">
<h3>设置液体高度 <el-link type="primary" :underline="false" @click="setDis">设置说明</el-link></h3> <h3>
设置液体高度
<el-link type="primary" :underline="false" @click="setDis"
>设置说明</el-link
>
</h3>
<!-- 每个水仓的设置 --> <!-- 每个水仓的设置 -->
<div v-for="(sump, index) in formData.draPeakSumpVos" :key="sump.sumpId"> <div
v-for="(sump, index) in formData.draPeakSumpVos"
:key="sump.sumpId"
>
<div class="sump-item"> <div class="sump-item">
<div class="sump-header"> <div class="sump-header">
<span>{{ sump.sumpName }}液位高度（m）：</span> <span>{{ sump.sumpName }}液位高度（m）：</span>
</div> </div>
<div class="threshold-inputs"> <div class="threshold-inputs">
<div class="threshold-item"> <div class="threshold-item">
<span>A点值</span> <span>A点值</span>
<el-input v-model="sump.heghtThresholdA" placeholder="请输入A点值" size="small"></el-input> <el-input
v-model="sump.heghtThresholdA"
placeholder="请输入A点值"
size="small"
></el-input>
</div> </div>
<div class="threshold-item"> <div class="threshold-item">
<span>B点值</span> <span>B点值</span>
<el-input v-model="sump.heghtThresholdB" placeholder="请输入B点值" size="small"></el-input> <el-input
v-model="sump.heghtThresholdB"
placeholder="请输入B点值"
size="small"
></el-input>
</div> </div>
<div class="threshold-item"> <div class="threshold-item">
<span>C点值</span> <span>C点值</span>
<el-input v-model="sump.heghtThresholdC" placeholder="请输入C点值" size="small"></el-input> <el-input
v-model="sump.heghtThresholdC"
placeholder="请输入C点值"
size="small"
></el-input>
</div> </div>
<div class="threshold-item"> <div class="threshold-item">
<span>D点值</span> <span>D点值</span>
<el-input v-model="sump.heghtThresholdD" placeholder="请输入D点值" size="small"></el-input> <el-input
v-model="sump.heghtThresholdD"
placeholder="请输入D点值"
size="small"
></el-input>
</div> </div>
</div> </div>
<div class="pump-selection"> <div class="pump-selection">
<span>对应控制水泵：</span> <span>对应控制水泵：</span>
<div class="pump-checkboxes"> <div class="pump-checkboxes">
...@@ -76,8 +100,10 @@ ...@@ -76,8 +100,10 @@
</div> </div>
</div> </div>
</div> </div>
<el-divider v-if="index < formData.draPeakSumpVos.length - 1"></el-divider> <el-divider
v-if="index < formData.draPeakSumpVos.length - 1"
></el-divider>
</div> </div>
</div> </div>
...@@ -89,17 +115,16 @@ ...@@ -89,17 +115,16 @@
</el-card> </el-card>
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<div class="warter-lev"> <div class="warter-lev">
<div class="lev-pic"></div> <div class="lev-pic"></div>
<div class="lev-content"> <div class="lev-content">
<p>①液位高度X>A时，不考虑是否在峰谷时间，自动开启水泵。</p> <p>①液位高度X>A时，不考虑是否在峰谷时间，自动开启水泵。</p>
<p>如果未在峰谷期内液压高度X<=B时，关闭水泵。</p> <p>如果未在峰谷期内液压高度X<=B时，关闭水泵。</p>
<p>如果在峰谷期内液压高度X<=D时,关闭水泵。</p> <p>如果在峰谷期内液压高度X<=D时,关闭水泵。</p>
<p>②A>=X（液压高度）X<=C时，等待峰谷期内，自动开启水泵。</p> <p>②A>=X（液压高度）X<=C时，等待峰谷期内，自动开启水泵。</p>
<p>液压高度X<=D时，自动关闭水泵。</p> <p>液压高度X<=D时，自动关闭水泵。</p>
</div>
</div> </div>
</div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
...@@ -108,18 +133,18 @@ ...@@ -108,18 +133,18 @@
import { peakGetDra, peakEditDra } from "@/api/tyler/sys"; import { peakGetDra, peakEditDra } from "@/api/tyler/sys";
export default { export default {
name: 'AutomationControl', name: "AutomationControl",
data() { data() {
return { return {
open: false, open: false,
formData: { formData: {
status: "1", // 默认开启 status: "1", // 默认开启
peakBeginTime: '', peakBeginTime: "",
peakEndTime: '', peakEndTime: "",
draPeakSumpVos: [] draPeakSumpVos: [],
}, },
timeRange: [], timeRange: [],
title:'液位高度设置说明：' title: "液位高度设置说明：",
}; };
}, },
created() { created() {
...@@ -127,34 +152,37 @@ export default { ...@@ -127,34 +152,37 @@ export default {
}, },
methods: { methods: {
getList() { getList() {
peakGetDra().then(res => { peakGetDra().then((res) => {
const data = res.data; const data = res.data;
// 保存原始水泵顺序 // 保存原始水泵顺序
this.originalPumpOrder = new Map(); this.originalPumpOrder = new Map();
data.draPeakSumpVos.forEach((sump, sumpIndex) => { data.draPeakSumpVos.forEach((sump, sumpIndex) => {
this.originalPumpOrder.set(sumpIndex, sump.draPeakPumpVos.map(p => p.pumpId)); this.originalPumpOrder.set(
sumpIndex,
sump.draPeakPumpVos.map((p) => p.pumpId)
);
}); });
// 处理数据时保持原始顺序 // 处理数据时保持原始顺序
data.draPeakSumpVos = data.draPeakSumpVos.map((sump, sumpIndex) => { data.draPeakSumpVos = data.draPeakSumpVos.map((sump, sumpIndex) => {
const orderedPumps = []; const orderedPumps = [];
const originalOrder = this.originalPumpOrder.get(sumpIndex); const originalOrder = this.originalPumpOrder.get(sumpIndex);
// 按照原始顺序重新排列水泵 // 按照原始顺序重新排列水泵
originalOrder.forEach(pumpId => { originalOrder.forEach((pumpId) => {
const found = sump.draPeakPumpVos.find(p => p.pumpId === pumpId); const found = sump.draPeakPumpVos.find((p) => p.pumpId === pumpId);
if (found) { if (found) {
orderedPumps.push({ orderedPumps.push({
...found, ...found,
pumpStatus: parseInt(found.pumpStatus, 10) pumpStatus: parseInt(found.pumpStatus, 10),
}); });
} }
}); });
return { return {
...sump, ...sump,
draPeakPumpVos: orderedPumps draPeakPumpVos: orderedPumps,
}; };
}); });
...@@ -163,7 +191,7 @@ export default { ...@@ -163,7 +191,7 @@ export default {
}); });
}, },
handleStatusChange(value) { handleStatusChange(value) {
console.log('自动化控制状态已切换为:', value); console.log("自动化控制状态已切换为:", value);
}, },
handleTimeRangeChange(value) { handleTimeRangeChange(value) {
if (value && value.length === 2) { if (value && value.length === 2) {
...@@ -178,24 +206,24 @@ export default { ...@@ -178,24 +206,24 @@ export default {
// 深拷贝时保持数组顺序 // 深拷贝时保持数组顺序
const postData = { const postData = {
...this.formData, ...this.formData,
draPeakSumpVos: this.formData.draPeakSumpVos.map(sump => ({ draPeakSumpVos: this.formData.draPeakSumpVos.map((sump) => ({
...sump, ...sump,
draPeakPumpVos: sump.draPeakPumpVos.map(pump => ({ draPeakPumpVos: sump.draPeakPumpVos.map((pump) => ({
...pump, ...pump,
pumpStatus: pump.pumpStatus.toString() pumpStatus: pump.pumpStatus.toString(),
})) })),
})) })),
}; };
peakEditDra(postData).then(res => { peakEditDra(postData).then((res) => {
this.$message.success('设置保存成功'); this.$message.success("设置保存成功");
this.getList(); this.getList();
}); });
}, },
setDis(){ setDis() {
this.open = true; this.open = true;
}, },
} },
}; };
</script> </script>
...@@ -217,9 +245,9 @@ export default { ...@@ -217,9 +245,9 @@ export default {
.control-header { .control-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: start; justify-content: flex-start;
gap: 20px; gap: 20px;
span{ span {
font-weight: bold; font-weight: bold;
} }
} }
...@@ -268,20 +296,20 @@ export default { ...@@ -268,20 +296,20 @@ export default {
.button-group { .button-group {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
gap: 15px; gap: 15px;
margin-top: 20px; margin-top: 20px;
} }
.warter-lev{ .warter-lev {
display: flex; display: flex;
justify-content: center; justify-content: center;
.lev-pic{ .lev-pic {
width: 105px; width: 105px;
height: 343px; height: 343px;
background: url("~@/assets/images/sys/warterSysSet.png") no-repeat center; background: url("~@/assets/images/sys/warterSysSet.png") no-repeat center;
background-size: 100%; background-size: 100%;
} }
.lev-content{ .lev-content {
height: 343px; height: 343px;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -293,4 +321,4 @@ export default { ...@@ -293,4 +321,4 @@ export default {
::v-deep .el-date-editor .el-range-separator { ::v-deep .el-date-editor .el-range-separator {
width: 30px; width: 30px;
} }
</style> </style>
\ No newline at end of file
vue.config.js
View file @ 25bf70ae
...@@ -91,41 +91,49 @@ module.exports = { ...@@ -91,41 +91,49 @@ module.exports = {
symbolId: 'icon-[name]' symbolId: 'icon-[name]'
}) })
.end() .end()
config.module
.rule('highcharts')
.test(/node_modules[\\/]highcharts[\\/].*\.js$/)
.use('babel-loader')
.loader('babel-loader')
.options({
presets: ['@babel/preset-env']
});
config.when(process.env.NODE_ENV !== 'development', config => { config.when(process.env.NODE_ENV !== 'development', config => {
config config
.plugin('ScriptExtHtmlWebpackPlugin') .plugin('ScriptExtHtmlWebpackPlugin')
.after('html') .after('html')
.use('script-ext-html-webpack-plugin', [{ .use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime` // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/ inline: /runtime\..*\.js$/
}]) }])
.end() .end()
config.optimization.splitChunks({ config.optimization.splitChunks({
chunks: 'all', chunks: 'all',
cacheGroups: { cacheGroups: {
libs: { libs: {
name: 'chunk-libs', name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
priority: 10, priority: 10,
chunks: 'initial' // only package third parties that are initially dependent chunks: 'initial' // only package third parties that are initially dependent
}, },
elementUI: { elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package name: 'chunk-elementUI', // split elementUI into a single package
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
}, },
commons: { commons: {
name: 'chunk-commons', name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number minChunks: 3, // minimum common number
priority: 5, priority: 5,
reuseExistingChunk: true reuseExistingChunk: true
} }
} }
}) })
config.optimization.runtimeChunk('single') config.optimization.runtimeChunk('single')
}) })
} }
} }
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