fix: AI预警，地磅管理页面调整，温度计优化。
This commit is contained in:
cjp
parent
72ff136b83
commit
1674d97e51
@ -268,8 +268,8 @@ onBeforeUnmount(async () => {
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
width: 20%;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="今日告警">
|
||||
<div class="bottomBox">
|
||||
<div class="content">
|
||||
<div class="list-content">
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
<div>抓拍照片</div>
|
||||
@ -282,12 +282,12 @@ onMounted(async () => {});
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.list-content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tabList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -307,7 +307,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 90%;
|
||||
height: 95%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 50%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 50%;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -53,7 +53,7 @@ const option = reactive({
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
top: "5%",
|
||||
top: "2%",
|
||||
containLabel: true
|
||||
},
|
||||
// backgroundColor: '#101129',
|
||||
@ -287,6 +287,8 @@ onMounted(async () => {
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 3%;
|
||||
padding-top: 3%;
|
||||
position: relative;
|
||||
}
|
||||
.rightHeader {
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<Card title="今日告警">
|
||||
<div class="bottomBox">
|
||||
<div class="content">
|
||||
<div class="bottom-left">
|
||||
<div class="left-content">
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
<div>报警设备</div>
|
||||
<div>报警时间</div>
|
||||
<div>报警类型</div>
|
||||
</div>
|
||||
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<!-- <div>{{ item.dev }}</div> -->
|
||||
<div>{{ item.devName }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
<div style="padding-left: 1%">{{ item.warnType }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
@ -204,7 +203,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomBox {
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
@ -220,12 +219,11 @@ onMounted(async () => {});
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 95%;
|
||||
.left-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tabList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -251,7 +249,7 @@ onMounted(async () => {});
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 10%;
|
||||
height: 14%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
.list-img {
|
||||
width: 10%;
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import symbolIcon2 from "@/assets/images/lineSymbol2.png";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// 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 option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
// 当前对应的种类
|
||||
let nowType = ref("温度");
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
nowType.value = "温度";
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
nowType.value = "湿度";
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
@ -66,6 +66,11 @@ function initOption() {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#010306",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
@ -91,13 +96,16 @@ function initOption() {
|
||||
global: false
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + "<br/>" + params[0].marker + nowType.value + ":" + params[0].value + "℃";
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "6%",
|
||||
right: "4%",
|
||||
bottom: "30%"
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
@ -164,6 +172,22 @@ function initOption() {
|
||||
],
|
||||
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",
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
|
||||
@ -40,9 +40,8 @@ export default {
|
||||
.top {
|
||||
height: 67%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 23%;
|
||||
width: 25%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
@ -55,11 +54,11 @@ export default {
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 23%;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 35%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 50%;
|
||||
|
||||
@ -25,9 +25,8 @@ import { onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
let option = ref();
|
||||
let realValue = ref(0);
|
||||
let realValue = ref(-12);
|
||||
function initOption() {
|
||||
realValue.value = -8; //真实温度
|
||||
let TP_value = 0; // 展示温度
|
||||
TP_value = realValue.value;
|
||||
let kd = []; // 刻度
|
||||
@ -38,6 +37,16 @@ function initOption() {
|
||||
let boxPosition = [65, 0]; // 显示内容的定位
|
||||
let TP_txt = ""; // 显示内容 文本
|
||||
|
||||
// 刻度最大值
|
||||
let maxValue = 80;
|
||||
if (TP_value > maxValue) {
|
||||
maxValue = TP_value;
|
||||
}
|
||||
|
||||
// 刻度差值
|
||||
let diffValue = 0;
|
||||
diffValue = 130 - maxValue;
|
||||
|
||||
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
|
||||
for (let i = 0, len = 145; i <= len; i++) {
|
||||
if (i < 10 || i > 130) {
|
||||
@ -68,7 +77,7 @@ function initOption() {
|
||||
}
|
||||
|
||||
//中间线的渐变色和文本内容
|
||||
if (realValue.value > 70) {
|
||||
if (TP_value > 70) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -91,7 +100,7 @@ function initOption() {
|
||||
color: "#E01F28"
|
||||
}
|
||||
);
|
||||
} else if (realValue.value > 20) {
|
||||
} else if (TP_value > 20) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -110,7 +119,7 @@ function initOption() {
|
||||
color: "#E4D225"
|
||||
}
|
||||
);
|
||||
} else if (realValue.value > 2) {
|
||||
} else if (TP_value > 2) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -137,15 +146,16 @@ function initOption() {
|
||||
}
|
||||
);
|
||||
}
|
||||
if (realValue.value > 82) {
|
||||
showValue = 80;
|
||||
} else {
|
||||
if (realValue.value < -40) {
|
||||
showValue = -40;
|
||||
} else {
|
||||
showValue = TP_value;
|
||||
}
|
||||
}
|
||||
// if (TP_value > 82) {
|
||||
// showValue = 80;
|
||||
// } else {
|
||||
// if (TP_value < -40) {
|
||||
// showValue = -40;
|
||||
// } else {
|
||||
// showValue = TP_value;
|
||||
// }
|
||||
// }
|
||||
showValue = TP_value;
|
||||
// 避免温度过低 右侧指示内容出界
|
||||
if (TP_value < -10) {
|
||||
boxPosition = [65, -120];
|
||||
@ -226,7 +236,7 @@ function initOption() {
|
||||
xAxisIndex: 0,
|
||||
data: [
|
||||
{
|
||||
value: showValue + 50
|
||||
value: showValue + diffValue
|
||||
}
|
||||
],
|
||||
barWidth: 13,
|
||||
@ -353,7 +363,7 @@ function initOption() {
|
||||
return "";
|
||||
} else {
|
||||
if ((params.dataIndex - 10) % 20 === 0) {
|
||||
return params.dataIndex - 50;
|
||||
return params.dataIndex - diffValue;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
@ -392,7 +402,7 @@ function initOption() {
|
||||
return "";
|
||||
} else {
|
||||
if ((params.dataIndex - 10) % 20 === 0) {
|
||||
return params.dataIndex - 50;
|
||||
return params.dataIndex - diffValue;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||||
</div>
|
||||
<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">
|
||||
<img src="@/assets/images/standardCureRoom/thermometer.png" alt="" />
|
||||
</div>
|
||||
@ -27,21 +29,26 @@ import { onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
let option = ref();
|
||||
let realValue = ref(0 as any);
|
||||
let realValue = ref(120 as any);
|
||||
function initOption() {
|
||||
realValue.value = 120; //真实温度
|
||||
let TP_value = 0; // 展示温度
|
||||
TP_value = realValue.value - 60;
|
||||
let TP_value = realValue.value; // 展示温度
|
||||
let kd = []; // 刻度
|
||||
let kd2 = [];
|
||||
let Gradient = []; // 存放颜色的数组
|
||||
let leftColor = ""; // 显示文本的颜色
|
||||
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；构造一个数据
|
||||
for (let i = 0, len = 145; i <= len; i++) {
|
||||
for (let i = 0, len = 155; i <= len; i++) {
|
||||
if (i < 10 || i > 130) {
|
||||
kd.push("");
|
||||
} else {
|
||||
@ -54,7 +61,7 @@ function initOption() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log("刻度", kd);
|
||||
for (let i = 0, len = 145; i <= len; i++) {
|
||||
if (i < 10 || i > 130) {
|
||||
kd2.push("");
|
||||
@ -70,7 +77,7 @@ function initOption() {
|
||||
}
|
||||
|
||||
//中间线的渐变色和文本内容
|
||||
if (realValue.value > 110) {
|
||||
if (TP_value > 110) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -93,7 +100,7 @@ function initOption() {
|
||||
color: "#E01F28"
|
||||
}
|
||||
);
|
||||
} else if (realValue.value > 60) {
|
||||
} else if (TP_value > 60) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -112,7 +119,7 @@ function initOption() {
|
||||
color: "#E4D225"
|
||||
}
|
||||
);
|
||||
} else if (realValue.value > 42) {
|
||||
} else if (TP_value > 42) {
|
||||
Gradient.push(
|
||||
{
|
||||
offset: 0,
|
||||
@ -139,15 +146,16 @@ function initOption() {
|
||||
}
|
||||
);
|
||||
}
|
||||
if (realValue.value > 122) {
|
||||
showValue = 120;
|
||||
} else {
|
||||
if (realValue.value < 0) {
|
||||
showValue = 0;
|
||||
} else {
|
||||
showValue = TP_value;
|
||||
}
|
||||
}
|
||||
// if (TP_value > 120) {
|
||||
// showValue = 120;
|
||||
// } else {
|
||||
// if (TP_value < 0) {
|
||||
// showValue = 0;
|
||||
// } else {
|
||||
// showValue = TP_value;
|
||||
// }
|
||||
// }
|
||||
showValue = TP_value;
|
||||
// 避免温度过低 右侧指示内容出界
|
||||
if (TP_value < -10) {
|
||||
boxPosition = [65, -120];
|
||||
@ -228,7 +236,7 @@ function initOption() {
|
||||
xAxisIndex: 0,
|
||||
data: [
|
||||
{
|
||||
value: showValue + 70
|
||||
value: showValue + diffValue
|
||||
}
|
||||
],
|
||||
barWidth: 13,
|
||||
@ -355,7 +363,7 @@ function initOption() {
|
||||
return "";
|
||||
} else {
|
||||
if ((params.dataIndex - 10) % 20 === 0) {
|
||||
return params.dataIndex - 10;
|
||||
return params.dataIndex - diffValue;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
@ -394,7 +402,7 @@ function initOption() {
|
||||
return "";
|
||||
} else {
|
||||
if ((params.dataIndex - 10) % 20 === 0) {
|
||||
return params.dataIndex - 10;
|
||||
return params.dataIndex - diffValue;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user