admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: AI预警，地磅管理页面调整，温度计优化。

Browse Source
This commit is contained in:
cjp 2023-09-13 11:08:38 +08:00
parent 72ff136b83
commit 1674d97e51
10 changed files with 114 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue
View File

@ -268,8 +268,8 @@ onBeforeUnmount(async () => {
} }
.history-content { .history-content {
height: 100%; height: 100%;
background: url("@/assets/images/cardImg.png") no-repeat; // background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
position: relative; position: relative;
.rightHeader { .rightHeader {
width: 20%; width: 20%;

10
src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Card title="今日告警"> <Card title="今日告警">
<div class="bottomBox"> <div class="bottomBox">
<div class="content"> <div class="list-content">
<div class="tabList"> <div class="tabList">
<div>序号</div> <div>序号</div>
<div>抓拍照片</div> <div>抓拍照片</div>
@ -282,12 +282,12 @@ onMounted(async () => {});
font-family: OPPOSansH; font-family: OPPOSansH;
} }
} }
.content { .list-content {
height: 95%; height: 95%;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
background: url("@/assets/images/cardImg.png") no-repeat; // background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
.tabList { .tabList {
display: flex; display: flex;
width: 100%; width: 100%;
@ -307,7 +307,7 @@ onMounted(async () => {});
} }
} }
.listBox { .listBox {
height: 90%; height: 95%;
overflow: scroll; overflow: scroll;
.listStyle { .listStyle {
display: flex; display: flex;

2
src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/index.vue
View File

@ -54,7 +54,7 @@ export default {
} }
} }
.bottom { .bottom {
height: 50%; height: 45%;
display: flex; display: flex;
.bottomLeft { .bottomLeft {
width: 50%; width: 50%;

9
src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue
View File

@ -278,13 +278,4 @@ onBeforeUnmount(async () => {
} }
} }
} }
::v-deep .el-input__wrapper {
background: #112d59;
}
::v-deep .el-input__inner {
color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
color: #fff;
}
</style> </style>

4
src/views/sevenLargeScreen/digitalConstruction/loadometerManage/topLeft.vue
View File

@ -53,7 +53,7 @@ const option = reactive({
left: "0%", left: "0%",
right: "0%", right: "0%",
bottom: "0%", bottom: "0%",
top: "5%", top: "2%",
containLabel: true containLabel: true
}, },
// backgroundColor: '#101129', // backgroundColor: '#101129',
@ -287,6 +287,8 @@ onMounted(async () => {
.box { .box {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 3%;
padding-top: 3%;
position: relative; position: relative;
} }
.rightHeader { .rightHeader {

20
src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomLeft.vue
View File

@ -1,21 +1,20 @@
<template> <template>
<Card title="今日告警"> <Card title="今日告警">
<div class="bottomBox"> <div class="bottom-left">
<div class="content"> <div class="left-content">
<div class="tabList"> <div class="tabList">
<div>序号</div> <div>序号</div>
<div>报警设备</div> <div>报警设备</div>
<div>报警时间</div> <div>报警时间</div>
<div>报警类型</div> <div>报警类型</div>
</div> </div>
<div class="listBox"> <div class="listBox">
<div v-for="(item, index) in list" class="listStyle" :key="item.id"> <div v-for="(item, index) in list" class="listStyle" :key="item.id">
<div>{{ index + 1 }}</div> <div>{{ index + 1 }}</div>
<!-- <div>{{ item.dev }}</div> --> <!-- <div>{{ item.dev }}</div> -->
<div>{{ item.devName }}</div> <div>{{ item.devName }}</div>
<div>{{ item.warnTime }}</div> <div>{{ item.warnTime }}</div>
<div style="padding-left: 1%">{{ item.warnType }}</div> <div>{{ item.warnType }}</div>
</div> </div>
<div class="notoDta" v-if="list.length == 0"> <div class="notoDta" v-if="list.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
@ -204,7 +203,7 @@ onMounted(async () => {});
} }
} }
} }
.bottomBox { .bottom-left {
width: 100%; width: 100%;
height: 100%; height: 100%;
.title { .title {
@ -220,12 +219,11 @@ onMounted(async () => {});
font-family: OPPOSansH; font-family: OPPOSansH;
} }
} }
.content { .left-content {
height: 95%; height: 100%;
width: 100%; width: 100%;
margin-top: 10px; // background: url("@/assets/images/cardImg.png") no-repeat;
background: url("@/assets/images/cardImg.png") no-repeat; // background-size: 100% 100%;
background-size: 100% 100%;
.tabList { .tabList {
display: flex; display: flex;
align-items: center; align-items: center;
@ -251,7 +249,7 @@ onMounted(async () => {});
display: flex; display: flex;
align-items: center; align-items: center;
color: #fff; color: #fff;
height: 10%; height: 14%;
font-size: calc(100vw * 12 / 1920); font-size: calc(100vw * 12 / 1920);
.list-img { .list-img {
width: 10%; width: 10%;

38
src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/bottomRight.vue
View File

@ -17,6 +17,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png"; import symbolIcon from "@/assets/images/lineSymbol.png";
import symbolIcon2 from "@/assets/images/lineSymbol2.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue"; import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
// import { getSelectDataListApi } from "@/api/modules/distribution"; // import { getSelectDataListApi } from "@/api/modules/distribution";
@ -32,21 +34,19 @@ let unit = ref("单位:V" as any);
let yData = ref([10, 5, 20, 25, 15, 25, 12, 13, 14, 20] as any); let yData = ref([10, 5, 20, 25, 15, 25, 12, 13, 14, 20] as any);
// 图表数据项 // 图表数据项
let option = ref(null as any); let option = ref(null as any);
// 选中 // 选中
let checked = ref(1); let checked = ref(1);
// 当前对应的种类
let nowType = ref("温度");
function getNowData(type: any) { function getNowData(type: any) {
checked.value = type; checked.value = type;
nowType.value = "温度";
// 初始化option // 初始化option
// initOption(); // initOption();
} }
function getWeekData(type: any) { function getWeekData(type: any) {
checked.value = type; checked.value = type;
// 初始化option nowType.value = "湿度";
// initOption();
}
function getMonthData(type: any) {
checked.value = type;
// 初始化option // 初始化option
// initOption(); // initOption();
} }
@ -66,6 +66,11 @@ function initOption() {
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "#010306",
borderColor: "#010306",
textStyle: {
color: "#FFFFFF"
},
axisPointer: { axisPointer: {
lineStyle: { lineStyle: {
color: { color: {
@ -91,13 +96,16 @@ function initOption() {
global: false global: false
} }
} }
},
formatter: function (params) {
return params[0].name + "<br/>" + params[0].marker + nowType.value + ":" + params[0].value + "℃";
} }
}, },
grid: { grid: {
top: "20%", top: "20%",
left: "6%", left: "6%",
right: "4%", right: "4%",
bottom: "30%" bottom: "12%"
// containLabel: true // containLabel: true
}, },
xAxis: [ xAxis: [
@ -164,6 +172,22 @@ function initOption() {
], ],
series: [ series: [
{ {
// markPoint: {
// // 标记的数据，可以是最大值最小值也可以是自定义的坐标
// data: [
// {
// name: "今日上报",
// yAxis: yData.value[2],
// xAxis: twenty_four_time.value[2] // 标记数据的x轴的位置，由于是最后一个点，所以这个位置是固定的，用百分比表示该图标内最后一个点的位置即可
// }
// ],
// symbol: `image://${symbolIcon2}`,
// symbolSize: 30 // 标记图形的大小
// // 标注点的样式
// // itemStyle: {
// // color: "#FF4747" // 标注点颜色
// // }
// },
type: "line", type: "line",
// smooth: true, //是否平滑 // smooth: true, //是否平滑
showAllSymbol: true, showAllSymbol: true,

7
src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/index.vue
View File

@ -40,9 +40,8 @@ export default {
.top { .top {
height: 67%; height: 67%;
display: flex; display: flex;
margin-bottom: 1%;
.topLeft { .topLeft {
width: 23%; width: 25%;
// background-color: orchid; // background-color: orchid;
} }
.topCenter { .topCenter {
@ -55,11 +54,11 @@ export default {
} }
} }
.topRight { .topRight {
width: 23%; width: 25%;
} }
} }
.bottom { .bottom {
height: 35%; height: 30%;
display: flex; display: flex;
.bottomLeft { .bottomLeft {
width: 50%; width: 50%;

42
src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/topLeft.vue
View File

@ -25,9 +25,8 @@ import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
const store = GlobalStore(); const store = GlobalStore();
let option = ref(); let option = ref();
let realValue = ref(0); let realValue = ref(-12);
function initOption() { function initOption() {
realValue.value = -8; //真实温度
let TP_value = 0; // 展示温度 let TP_value = 0; // 展示温度
TP_value = realValue.value; TP_value = realValue.value;
let kd = []; // 刻度 let kd = []; // 刻度
@ -38,6 +37,16 @@ function initOption() {
let boxPosition = [65, 0]; // 显示内容的定位 let boxPosition = [65, 0]; // 显示内容的定位
let TP_txt = ""; // 显示内容 文本 let TP_txt = ""; // 显示内容 文本
// 刻度最大值
let maxValue = 80;
if (TP_value > maxValue) {
maxValue = TP_value;
}
// 刻度差值
let diffValue = 0;
diffValue = 130 - maxValue;
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据 // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
for (let i = 0, len = 145; i <= len; i++) { for (let i = 0, len = 145; i <= len; i++) {
if (i < 10 || i > 130) { if (i < 10 || i > 130) {
@ -68,7 +77,7 @@ function initOption() {
} }
//中间线的渐变色和文本内容 //中间线的渐变色和文本内容
if (realValue.value > 70) { if (TP_value > 70) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -91,7 +100,7 @@ function initOption() {
color: "#E01F28" color: "#E01F28"
} }
); );
} else if (realValue.value > 20) { } else if (TP_value > 20) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -110,7 +119,7 @@ function initOption() {
color: "#E4D225" color: "#E4D225"
} }
); );
} else if (realValue.value > 2) { } else if (TP_value > 2) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -137,15 +146,16 @@ function initOption() {
} }
); );
} }
if (realValue.value > 82) { // if (TP_value > 82) {
showValue = 80; // showValue = 80;
} else { // } else {
if (realValue.value < -40) { // if (TP_value < -40) {
showValue = -40; // showValue = -40;
} else { // } else {
// showValue = TP_value;
// }
// }
showValue = TP_value; showValue = TP_value;
}
}
// 避免温度过低 右侧指示内容出界 // 避免温度过低 右侧指示内容出界
if (TP_value < -10) { if (TP_value < -10) {
boxPosition = [65, -120]; boxPosition = [65, -120];
@ -226,7 +236,7 @@ function initOption() {
xAxisIndex: 0, xAxisIndex: 0,
data: [ data: [
{ {
value: showValue + 50 value: showValue + diffValue
} }
], ],
barWidth: 13, barWidth: 13,
@ -353,7 +363,7 @@ function initOption() {
return ""; return "";
} else { } else {
if ((params.dataIndex - 10) % 20 === 0) { if ((params.dataIndex - 10) % 20 === 0) {
return params.dataIndex - 50; return params.dataIndex - diffValue;
} else { } else {
return ""; return "";
} }
@ -392,7 +402,7 @@ function initOption() {
return ""; return "";
} else { } else {
if ((params.dataIndex - 10) % 20 === 0) { if ((params.dataIndex - 10) % 20 === 0) {
return params.dataIndex - 50; return params.dataIndex - diffValue;
} else { } else {
return ""; return "";
} }

56
src/views/sevenLargeScreen/digitalConstruction/standardCureRoom/topRight.vue
View File

@ -5,7 +5,9 @@
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" /> <img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
</div> </div>
<div class="humidity-detail"> <div class="humidity-detail">
<div class="text-detail"><i>湿度: {{ realValue }}%RH</i></div> <div class="text-detail">
<i>湿度: {{ realValue }}%RH</i>
</div>
<div class="icon-detail"> <div class="icon-detail">
<img src="@/assets/images/standardCureRoom/thermometer.png" alt="" /> <img src="@/assets/images/standardCureRoom/thermometer.png" alt="" />
</div> </div>
@ -27,21 +29,26 @@ import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
const store = GlobalStore(); const store = GlobalStore();
let option = ref(); let option = ref();
let realValue = ref(0 as any); let realValue = ref(120 as any);
function initOption() { function initOption() {
realValue.value = 120; //真实温度 let TP_value = realValue.value; // 展示温度
let TP_value = 0; // 展示温度
TP_value = realValue.value - 60;
let kd = []; // 刻度 let kd = []; // 刻度
let kd2 = []; let kd2 = [];
let Gradient = []; // 存放颜色的数组 let Gradient = []; // 存放颜色的数组
let leftColor = ""; // 显示文本的颜色
let showValue = ""; // 显示内容 温度数字 let showValue = ""; // 显示内容 温度数字
let boxPosition = [65, 0]; // 显示内容的定位
let TP_txt = ""; // 显示内容 文本 // 刻度最大值
let maxValue = 120;
if (TP_value > 120) {
maxValue = TP_value;
}
// 刻度差值
let diffValue = 0;
diffValue = 130 - maxValue;
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据 // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
for (let i = 0, len = 145; i <= len; i++) { for (let i = 0, len = 155; i <= len; i++) {
if (i < 10 || i > 130) { if (i < 10 || i > 130) {
kd.push(""); kd.push("");
} else { } else {
@ -54,7 +61,7 @@ function initOption() {
} }
} }
} }
console.log("刻度", kd);
for (let i = 0, len = 145; i <= len; i++) { for (let i = 0, len = 145; i <= len; i++) {
if (i < 10 || i > 130) { if (i < 10 || i > 130) {
kd2.push(""); kd2.push("");
@ -70,7 +77,7 @@ function initOption() {
} }
//中间线的渐变色和文本内容 //中间线的渐变色和文本内容
if (realValue.value > 110) { if (TP_value > 110) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -93,7 +100,7 @@ function initOption() {
color: "#E01F28" color: "#E01F28"
} }
); );
} else if (realValue.value > 60) { } else if (TP_value > 60) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -112,7 +119,7 @@ function initOption() {
color: "#E4D225" color: "#E4D225"
} }
); );
} else if (realValue.value > 42) { } else if (TP_value > 42) {
Gradient.push( Gradient.push(
{ {
offset: 0, offset: 0,
@ -139,15 +146,16 @@ function initOption() {
} }
); );
} }
if (realValue.value > 122) { // if (TP_value > 120) {
showValue = 120; // showValue = 120;
} else { // } else {
if (realValue.value < 0) { // if (TP_value < 0) {
showValue = 0; // showValue = 0;
} else { // } else {
// showValue = TP_value;
// }
// }
showValue = TP_value; showValue = TP_value;
}
}
// 避免温度过低 右侧指示内容出界 // 避免温度过低 右侧指示内容出界
if (TP_value < -10) { if (TP_value < -10) {
boxPosition = [65, -120]; boxPosition = [65, -120];
@ -228,7 +236,7 @@ function initOption() {
xAxisIndex: 0, xAxisIndex: 0,
data: [ data: [
{ {
value: showValue + 70 value: showValue + diffValue
} }
], ],
barWidth: 13, barWidth: 13,
@ -355,7 +363,7 @@ function initOption() {
return ""; return "";
} else { } else {
if ((params.dataIndex - 10) % 20 === 0) { if ((params.dataIndex - 10) % 20 === 0) {
return params.dataIndex - 10; return params.dataIndex - diffValue;
} else { } else {
return ""; return "";
} }
@ -394,7 +402,7 @@ function initOption() {
return ""; return "";
} else { } else {
if ((params.dataIndex - 10) % 20 === 0) { if ((params.dataIndex - 10) % 20 === 0) {
return params.dataIndex - 10; return params.dataIndex - diffValue;
} else { } else {
return ""; return "";
} }