fix: 编写混凝土测温页面，以及点位弹窗。
This commit is contained in:
cjp
parent
3b6e3b20f0
commit
4ae6066fcf
@ -3,9 +3,9 @@ NODE_ENV = 'development'
|
||||
|
||||
# 本地环境接口地址(/api/index.ts文件中使用)
|
||||
# VITE_API_URL = 'http://121.196.214.246/api'
|
||||
# VITE_API_URL = 'http://182.90.224.147:100'
|
||||
VITE_API_URL = 'http://182.90.224.147:100'
|
||||
# VITE_API_URL = 'http://192.168.34.221:12360'
|
||||
VITE_API_URL = 'http://192.168.34.221:30002'
|
||||
# VITE_API_URL = 'http://192.168.34.221:30002'
|
||||
|
||||
|
||||
# 上传
|
||||
|
||||
BIN
src/assets/images/concreteMonitor/earlyBg.png
Normal file
BIN
src/assets/images/concreteMonitor/earlyBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/assets/images/concreteMonitor/listBg.png
Normal file
BIN
src/assets/images/concreteMonitor/listBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/images/concreteMonitor/realtimeBg.png
Normal file
BIN
src/assets/images/concreteMonitor/realtimeBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
src/assets/images/concreteMonitor/warnBg.png
Normal file
BIN
src/assets/images/concreteMonitor/warnBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/assets/images/unloadPlatform/runIcon1.png
Normal file
BIN
src/assets/images/unloadPlatform/runIcon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/unloadPlatform/runIcon2.png
Normal file
BIN
src/assets/images/unloadPlatform/runIcon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -163,6 +163,16 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
name: "混凝土拌合站",
|
||||
component: () => import("@/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/concreteMonitor",
|
||||
name: "混凝土测温",
|
||||
component: () => import("@/views/sevenLargeScreen/qualityControl/concreteMonitor/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/unloadPlatform",
|
||||
name: "卸料平台",
|
||||
component: () => import("@/views/sevenLargeScreen/largeMachinery/unloadPlatform/index.vue")
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
title: "七参数大屏"
|
||||
|
||||
@ -181,6 +181,10 @@ let menuList = ref([
|
||||
{
|
||||
menuName: "质量管理",
|
||||
companyPath: "/qualityManagement"
|
||||
},
|
||||
{
|
||||
menuName: "混凝土测温",
|
||||
companyPath: "/concreteMonitor"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -218,6 +222,10 @@ let menuList = ref([
|
||||
menuName: "混凝土拌合站",
|
||||
companyPath: "/concreteMixingPlant"
|
||||
},
|
||||
{
|
||||
menuName: "卸料平台",
|
||||
companyPath: "/unloadPlatform"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<Card title="实时告警">
|
||||
<div class="unload-platform-content"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.unload-platform-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<Card title="运行设备状态">
|
||||
<div class="run-dev-state">
|
||||
<div class="dev-state-icon">
|
||||
<div class="common-icon">
|
||||
<div class="text">正常</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
<div class="warn-icon">
|
||||
<div class="text">告警</div>
|
||||
<div class="num">1024</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="runDeviceState" ref="runDeviceState" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
|
||||
let max = ref(0 as any);
|
||||
|
||||
const airTypeEchart = ref(["装载重量报警", "装载重量预警"]);
|
||||
const airTypeData = ref([712, 465]);
|
||||
|
||||
const option = ref(null as any);
|
||||
function initOption() {
|
||||
airTypeData.value.map(item => {
|
||||
max.value = max.value + item;
|
||||
});
|
||||
option.value = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "50%",
|
||||
top: "15%",
|
||||
containLabel: true
|
||||
},
|
||||
// backgroundColor: '#101129',
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
max: max.value
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
verticalAlign: "bottom",
|
||||
padding: [0, 0, 5, 5],
|
||||
lineHeight: "40",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "14"
|
||||
}
|
||||
// formatter: function (val, index) {
|
||||
// console.log("val", val, index);
|
||||
// return val;
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
data: airTypeEchart.value
|
||||
},
|
||||
{
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
verticalAlign: "bottom",
|
||||
padding: [0, 0, 5, 0],
|
||||
lineHeight: "40",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "12",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#65D7F9"
|
||||
},
|
||||
value: {}
|
||||
}
|
||||
},
|
||||
formatter: function (val, index) {
|
||||
// console.log("val", val, index);
|
||||
let valuePercent = ((airTypeData.value[index] / max.value) * 100).toFixed(2);
|
||||
return "{value|" + val + "}" + "{name|" + "(" + valuePercent + "%)" + "}";
|
||||
}
|
||||
},
|
||||
data: airTypeData.value
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
data: airTypeData.value
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#14346c",
|
||||
borderRadius: 30
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
// position:'right',
|
||||
// formatter:'{@score}%',
|
||||
textStyle: {
|
||||
color: "#03fcfe",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#194077"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#4CC4F8"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
barWidth: 3,
|
||||
data: airTypeData.value
|
||||
},
|
||||
{
|
||||
name: "内圆",
|
||||
type: "scatter",
|
||||
stack: "圆",
|
||||
yAxisIndex: 0,
|
||||
data: airTypeData.value, //小白点，数据静态
|
||||
label: false,
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#fff",
|
||||
borderWidth: 4,
|
||||
color: "#fff",
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
z: 3
|
||||
},
|
||||
{
|
||||
name: "内圆框",
|
||||
type: "scatter",
|
||||
stack: "圆",
|
||||
yAxisIndex: 0,
|
||||
data: [0, 0, 0, 0], //小白点外圈，数据静态
|
||||
label: false,
|
||||
symbolSize: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#4CC4F8",
|
||||
borderWidth: 2,
|
||||
color: "#14346c",
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
drawChart();
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
let chartDom = document.getElementById("runDeviceState");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let runDeviceState = echarts.init(document.getElementById("runDeviceState"));
|
||||
runDeviceState.setOption(option.value);
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
onMounted(async () => {
|
||||
initOption();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.run-dev-state {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.dev-state-icon {
|
||||
width: 100%;
|
||||
height: 22%;
|
||||
padding-top: 5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.common-icon {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
margin-left: 4%;
|
||||
background: url("@/assets/images/unloadPlatform/runIcon1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
transform: skew(-10deg);
|
||||
margin-left: 58%;
|
||||
margin-top: 13%;
|
||||
font-size: 18px;
|
||||
font-family: OPPOSans-Medium, OPPOSans;
|
||||
color: #ffffff;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-10deg);
|
||||
font-size: 22px;
|
||||
margin-left: 58%;
|
||||
font-family: D-DIN-DIN-Bold, D-DIN-DIN;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(252deg, #ffffff 0%, #96aadb 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.warn-icon {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/unloadPlatform/runIcon2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
transform: skew(-10deg);
|
||||
margin-left: 58%;
|
||||
margin-top: 13%;
|
||||
font-size: 18px;
|
||||
font-family: OPPOSans-Medium, OPPOSans;
|
||||
color: #ffffff;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-10deg);
|
||||
font-size: 22px;
|
||||
margin-left: 58%;
|
||||
font-family: D-DIN-DIN-Bold, D-DIN-DIN;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(252deg, #ffffff 0%, #6fb1e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<Card title="历史载重">
|
||||
<div class="unload-platform-content"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.unload-platform-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="distribution-box">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<BottomCenter></BottomCenter>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TopLeft from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topLeft.vue";
|
||||
import TopCenter from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomLeft.vue";
|
||||
import BottomCenter from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-box {
|
||||
width: 100%;
|
||||
height: 102%;
|
||||
.top {
|
||||
height: 47.5%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 26%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 47.5%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bottomLeft {
|
||||
width: 26%;
|
||||
}
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 26%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="unload-platform-content"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.unload-platform-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<Card title="设备列表">
|
||||
<div class="device-list">
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div style="width: 50%">设备名称</div>
|
||||
<div style="width: 20%">最大载重(t)</div>
|
||||
<div style="width: 30%">状态</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
||||
<div style="width: 50%">{{ item.devName }}</div>
|
||||
<div style="width: 20%">{{ item.maxPayload }}</div>
|
||||
<div style="width: 30%">{{ item.devState }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
devName: "卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
devName: "盛达公馆12#楼",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
devName: "4#楼栋单元卸料平台",
|
||||
maxPayload: 93,
|
||||
devState: "正常"
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 选择框样式
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
height: 1%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.device-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 2%;
|
||||
padding-top: 3%;
|
||||
position: relative;
|
||||
.list-content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 96%;
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 45px;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<Card title="载重比分析">
|
||||
<div class="unload-platform-content"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.unload-platform-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<!-- 混凝土测温 -->
|
||||
<div class="concrete-monitor">
|
||||
<div class="left">
|
||||
<div class="leftTop"><LeftTop /></div>
|
||||
<div class="leftBottom"><LeftBottom /></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightTop"><RightTop /></div>
|
||||
<div class="rightBottom"><RightBottom /></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTop from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/leftTop.vue";
|
||||
import LeftBottom from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/leftBottom.vue";
|
||||
import RightTop from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/rightTop.vue";
|
||||
import RightBottom from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue";
|
||||
export default {
|
||||
components: {
|
||||
LeftTop,
|
||||
LeftBottom,
|
||||
RightTop,
|
||||
RightBottom
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.concrete-monitor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
&::-webkit-scrollbar {
|
||||
display: none; //隐藏滚动条
|
||||
}
|
||||
.left {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
margin-right: 1%;
|
||||
.leftTop {
|
||||
height: 50%;
|
||||
margin-bottom: 2%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftBottom {
|
||||
height: 48%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
.rightTop {
|
||||
height: 29%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1.5% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBottom {
|
||||
margin-top: 6%;
|
||||
height: 70%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<Card title="监测曲线">
|
||||
<div class="concrete-bottom-left">
|
||||
<div class="choice-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">温差</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">降温速度</div>
|
||||
</div>
|
||||
|
||||
<div class="concrete-content">
|
||||
<div class="select-right">
|
||||
<el-date-picker v-model="selectTime" type="date" size="small" />
|
||||
</div>
|
||||
<div id="concreteLine" ref="concreteLine" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
// import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
|
||||
import { onMounted, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
// let twenty_four_time = ref([] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("" as any);
|
||||
// Y轴数据
|
||||
// let yData1 = ref([
|
||||
// ["2023-9-19 05:15:00", 12],
|
||||
// ["2023-9-19 15:15:00", 200],
|
||||
// ["2023-9-19 17:15:00", 50],
|
||||
// ["2023-9-19 19:15:00", 24],
|
||||
// ["2023-9-20 05:15:00", 30],
|
||||
// ["2023-9-20 15:15:00", 60]
|
||||
// ]);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
// let rangeTime = ref("");
|
||||
let selectPoint = ref(1);
|
||||
let selectTime = ref("2023-09-01");
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// drawChart();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// drawChart();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// drawChart();
|
||||
}
|
||||
|
||||
let typeList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "表面温度",
|
||||
typeUnit: "℃"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "中上层温度",
|
||||
typeUnit: "℃"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "中层温度",
|
||||
typeUnit: "℃"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "中下层温度",
|
||||
typeUnit: "℃"
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
dayType: "底层温度",
|
||||
typeUnit: "℃"
|
||||
}
|
||||
]);
|
||||
|
||||
// 时间轴起止时间
|
||||
let startValue = ref("2023-9-19 05:15:00" as any);
|
||||
let endValue = ref("2023-9-21 05:15:00" as any);
|
||||
|
||||
function selectChange(e: any) {
|
||||
console.log("当前日期", e);
|
||||
drawChart();
|
||||
}
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
legend: {
|
||||
align: "left",
|
||||
top: "5%",
|
||||
left: "2%",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
icon: "rect",
|
||||
itemGap: 25,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// // orient: "vertical", //水平显示
|
||||
// type: "slider",
|
||||
// show: true, //显示滚动条
|
||||
// height: 0,
|
||||
// // startValue: startValue.value, //起始值
|
||||
// // endValue: endValue.value, //结束值
|
||||
// start: 0,
|
||||
// end: 35,
|
||||
// showDetail: false,
|
||||
// bottom: "8%",
|
||||
// moveHandleStyle: {
|
||||
// color: "#4AC0F3"
|
||||
// },
|
||||
// backgroundColor: "#193C8D"
|
||||
// }
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
// console.log("tooltip", params);
|
||||
let currentInnerHtml = "";
|
||||
let nowTime = params[0].axisValueLabel;
|
||||
for (let index = 0; index < params.length; index++) {
|
||||
let pointType = params[index].seriesName;
|
||||
let pointValue = params[index].data[1];
|
||||
let currentTypeData = typeList.value.filter((item: any) => {
|
||||
return item.dayType === params[index].seriesName;
|
||||
});
|
||||
let unit = currentTypeData[0].typeUnit;
|
||||
// console.log(unit, "单位");
|
||||
currentInnerHtml = currentInnerHtml + "</br>" + params[index].marker + pointType + " " + pointValue + unit;
|
||||
}
|
||||
return nowTime + currentInnerHtml;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "5%",
|
||||
right: "3%",
|
||||
bottom: "10%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
// formatter: function (value: any) {
|
||||
// //需要的时间格式
|
||||
// let t_date = new Date(value);
|
||||
// let nowMinutes: any = t_date.getMinutes();
|
||||
// if (nowMinutes < 10) {
|
||||
// nowMinutes = "0" + nowMinutes;
|
||||
// }
|
||||
// let nowSeconds: any = t_date.getSeconds();
|
||||
// if (nowSeconds < 10) {
|
||||
// nowSeconds = "0" + nowSeconds;
|
||||
// }
|
||||
// return (
|
||||
// [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join("-") +
|
||||
// " " +
|
||||
// [t_date.getHours(), nowMinutes, nowSeconds].join(":")
|
||||
// );
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false
|
||||
// data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 25,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: []
|
||||
// [
|
||||
// // {
|
||||
// // showAllSymbol: false,
|
||||
// // smooth: true, //是否平滑
|
||||
// // name: "监测点001",
|
||||
// // type: "line",
|
||||
// // showSymbol: false,
|
||||
// // color: "#4AC0F3",
|
||||
// // data: yData1.value
|
||||
// // }
|
||||
// ]
|
||||
};
|
||||
|
||||
for (let i = 0; i < typeList.value.length; i++) {
|
||||
// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
|
||||
|
||||
// 测试点位数据[x,y]
|
||||
let data = [
|
||||
["00:00", 42 * 2 * (i + 1)],
|
||||
["02:00", 24 * 2 * (i + 1)],
|
||||
["04:00", 35 * 2 * (i + 1)],
|
||||
["06:00", 30 * 2 * (i + 1)],
|
||||
["08:00", 20 * 2 * (i + 1)],
|
||||
["10:00", 50 * 2 * (i + 1)],
|
||||
["12:00", 24 * 2 * (i + 1)],
|
||||
["14:00", 30 * 2 * (i + 1)],
|
||||
["16:00", 55 * 2 * (i + 1)],
|
||||
["18:00", 30 * 2 * (i + 1)],
|
||||
["20:00", 30 * 2 * (i + 1)],
|
||||
["22:00", 30 * 2 * (i + 1)],
|
||||
["24:00", 30 * 2 * (i + 1)]
|
||||
];
|
||||
let lineObj = {
|
||||
smooth: true, //是否平滑
|
||||
name: typeList.value[i].dayType,
|
||||
type: "line",
|
||||
showSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 6,
|
||||
// color: "#4AC",
|
||||
data: data
|
||||
};
|
||||
option.value.series.push(lineObj);
|
||||
}
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", option.value);
|
||||
let chartDom = document.getElementById("concreteLine");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let concreteLine = echarts.init(document.getElementById("concreteLine"));
|
||||
concreteLine.setOption(option.value);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.concrete-bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.concrete-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: 22%;
|
||||
width: 10%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choice-right {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -6%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 5%;
|
||||
margin-right: 4%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 5%;
|
||||
margin-right: 4%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="pit-top-left">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="point-state-top">
|
||||
<div class="common">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">正常</div>
|
||||
</div>
|
||||
<div class="warn">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">预警</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">报警</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="point-map">
|
||||
<img src="@/assets/images/concreteMonitor/realtimeBg.png" alt="" />
|
||||
<div class="point-list" v-for="item in list" :key="item.id">
|
||||
<div
|
||||
class="point-item"
|
||||
:class="
|
||||
item.alarmState == 1
|
||||
? 'changeColor1'
|
||||
: item.alarmState == 2
|
||||
? 'changeColor2'
|
||||
: item.alarmState == 3
|
||||
? 'changeColor3'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
left: item.xMap + 'px',
|
||||
top: item.yMap + 'px'
|
||||
}"
|
||||
@click="openDialog(item)"
|
||||
></div>
|
||||
<div
|
||||
class="item-dialog"
|
||||
:style="{
|
||||
left: item.xMap + 20 + 'px',
|
||||
top: item.yMap - 10 + 'px'
|
||||
}"
|
||||
v-if="item.id === currentIndex && showDialog"
|
||||
>
|
||||
<div class="triangle"></div>
|
||||
<div class="dialog-title">{{ item.pointName }}</div>
|
||||
<div class="dialog-text" style="color: #ec6266; display: flex">
|
||||
<div class="text-icon">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</div>
|
||||
<div class="text-detail">发廊: 环表温差 小于10</div>
|
||||
</div>
|
||||
<div class="dialog-text">表层温度：18.88°C</div>
|
||||
<div class="dialog-text">中上层温度：43°C</div>
|
||||
<div class="dialog-text">中层温度：12.88°C</div>
|
||||
<div class="dialog-text">中下层温度：20°C</div>
|
||||
<div class="dialog-text">底层温度：20°C</div>
|
||||
<div class="close-icon" @click="closeDialog">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
<div class="open-history" @click="openHistoryDialog">
|
||||
<div class="history-text">历史数据</div>
|
||||
<div class="history-icon">
|
||||
<el-icon><CaretRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-style">
|
||||
<point-history-dialog ref="historyRef"></point-history-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import pointHistoryDialog from "@/views/sevenLargeScreen/qualityControl/concreteMonitor/point-history-dialog.vue";
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
// 打开点位详情弹窗
|
||||
const historyRef = ref();
|
||||
const openHistoryDialog = () => {
|
||||
closeDialog();
|
||||
historyRef.value.openDialog();
|
||||
// console.log(historyRef.value);
|
||||
};
|
||||
|
||||
// 当前对应的种类
|
||||
let selectDay = ref(1);
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "桩基-灌注桩1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "桩基-灌注桩2"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "桩基-灌注桩3"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "桩基-灌注桩4"
|
||||
}
|
||||
]);
|
||||
|
||||
let currentIndex = ref(1 as any);
|
||||
let showDialog = ref(false as any);
|
||||
function openDialog(item: any) {
|
||||
currentIndex.value = item.id;
|
||||
showDialog.value = true;
|
||||
}
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
// console.log("点击");
|
||||
}
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
alarmState: 1,
|
||||
xMap: 150,
|
||||
yMap: 70,
|
||||
pointName: "测温-大波浪1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
alarmState: 2,
|
||||
xMap: 120,
|
||||
yMap: 70,
|
||||
pointName: "测温-大波浪2"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
alarmState: 1,
|
||||
xMap: 180,
|
||||
yMap: 90,
|
||||
pointName: "测温-大波浪3"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
alarmState: 3,
|
||||
xMap: 80,
|
||||
yMap: 100,
|
||||
pointName: "测温-大波浪4"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
.item-dialog {
|
||||
width: 25%;
|
||||
padding: 3% 1% 0 1%;
|
||||
left: 100%;
|
||||
top: -40%;
|
||||
z-index: 10;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
.dialog-title {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 2%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dialog-time {
|
||||
margin-top: 4%;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.dialog-text {
|
||||
margin-top: 5%;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 14px;
|
||||
.text-icon {
|
||||
margin-right: 3%;
|
||||
}
|
||||
.text-detail {
|
||||
}
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -4%;
|
||||
top: 5%;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 12px solid #000000;
|
||||
}
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.open-history {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 13%;
|
||||
cursor: pointer;
|
||||
color: #65d7f9;
|
||||
font-size: 14px;
|
||||
.history-icon {
|
||||
margin-top: 3%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.changeColor1 {
|
||||
background: #48da39;
|
||||
}
|
||||
.changeColor2 {
|
||||
background: #eea959;
|
||||
}
|
||||
.changeColor3 {
|
||||
background: #ec6266;
|
||||
}
|
||||
.pit-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 11%;
|
||||
top: -11%;
|
||||
z-index: 9;
|
||||
}
|
||||
.point-map {
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.point-list {
|
||||
.point-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.point-state-top {
|
||||
width: 6%;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
top: 5%;
|
||||
.common {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 20%;
|
||||
background: #48da39;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.warn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30%;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 20%;
|
||||
background: #eea959;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30%;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 20%;
|
||||
background: #ec6266;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-time {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 3%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<div class="list-detail" v-if="showDialog" @click="handleClick">
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-title">
|
||||
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
||||
<div class="title-text">
|
||||
<i>{{ dialogTitle }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edge-bottom-right">
|
||||
<div class="time-range">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
style="width: 55%"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>测温孔</div>
|
||||
<div>表层温度(°C)</div>
|
||||
<div>中上层温度(°C)</div>
|
||||
<div>中层温度(°C)</div>
|
||||
<div>中下层温度(°C)</div>
|
||||
<div>底层温度(°C)</div>
|
||||
<div>状态</div>
|
||||
<div>时间</div>
|
||||
</div>
|
||||
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.thermometerHole }}</div>
|
||||
<div>{{ item.surfaceTp }}</div>
|
||||
<div>{{ item.upMiddleTp }}</div>
|
||||
<div>{{ item.middleTp }}</div>
|
||||
<div>{{ item.middleDownTp }}</div>
|
||||
<div>{{ item.bottomTp }}</div>
|
||||
<div :style="{ color: item.state == 1 ? '#EC6266' : '#FFFFFF' }">
|
||||
{{ item.state == 0 ? "正常" : "告警" }}
|
||||
</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-icon" @click="showDialog = false">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
let showDialog = ref(false as any);
|
||||
|
||||
function handleClick(event: any) {
|
||||
console.log("点击", event.target.className);
|
||||
if (event.target.className == "list-detail") {
|
||||
showDialog.value = false;
|
||||
}
|
||||
}
|
||||
// let dialogIndex = ref(null as any);
|
||||
let dialogTitle = ref("" as any);
|
||||
function openDialog() {
|
||||
// console.log(type);
|
||||
// dialogIndex.value = type;
|
||||
showDialog.value = true;
|
||||
dialogTitle.value = "历史测温记录";
|
||||
}
|
||||
|
||||
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "17.75",
|
||||
upMiddleTp: "17.75",
|
||||
middleTp: "17.75",
|
||||
middleDownTp: "17.75",
|
||||
bottomTp: "17.75",
|
||||
state: 1,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "12.43",
|
||||
upMiddleTp: "12.43",
|
||||
middleTp: "12.43",
|
||||
middleDownTp: "12.43",
|
||||
bottomTp: "12.43",
|
||||
state: 1,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
thermometerHole: "测温-001",
|
||||
surfaceTp: "19.75",
|
||||
upMiddleTp: "19.75",
|
||||
middleTp: "19.75",
|
||||
middleDownTp: "19.75",
|
||||
bottomTp: "19.75",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
thermometerHole: "测温-大波浪",
|
||||
surfaceTp: "18.88",
|
||||
upMiddleTp: "18.88",
|
||||
middleTp: "18.88",
|
||||
middleDownTp: "18.88",
|
||||
bottomTp: "18.88",
|
||||
state: 0,
|
||||
time: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
height: 1%;
|
||||
padding-left: 5%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.list-detail {
|
||||
position: absolute;
|
||||
width: 150%;
|
||||
height: 260%;
|
||||
top: -60%;
|
||||
left: 0%;
|
||||
background: rgba(7, 28, 49, 0.5);
|
||||
z-index: 20;
|
||||
.dialog-content {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 1%;
|
||||
left: 17%;
|
||||
top: 21%;
|
||||
width: 70%;
|
||||
height: 50%;
|
||||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 21;
|
||||
.political-outlook {
|
||||
height: 95%;
|
||||
}
|
||||
.dialog-article {
|
||||
height: 95%;
|
||||
}
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dialog-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-family: "OPPOSans-Bold";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-img {
|
||||
width: 3%;
|
||||
height: 3%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title-text {
|
||||
margin-left: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
.edge-bottom-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 2%;
|
||||
position: relative;
|
||||
.time-range {
|
||||
position: absolute;
|
||||
left: 3%;
|
||||
top: 3%;
|
||||
}
|
||||
.list-content {
|
||||
height: 89%;
|
||||
width: 100%;
|
||||
margin-top: 3%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 87%;
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 8%;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 14%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<Card title="实时告警">
|
||||
<div class="concrete-right-bottom">
|
||||
<div class="top-data">
|
||||
<div class="data-left">告警: <span class="num">12</span>次</div>
|
||||
<div class="data-right">预警: <span class="num">3</span>次</div>
|
||||
</div>
|
||||
<div class="monitor-list">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div class="monitor-item" v-for="item in list" :key="item.id">
|
||||
<div class="item-top">
|
||||
<div class="top-title">混凝土监测</div>
|
||||
<div class="top-state" :style="{ background: formworkOption[item.monitorType].color }">
|
||||
<div>
|
||||
{{ formworkOption[item.monitorType].label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-bottom">
|
||||
<div class="bottom-text">浇筑体升温: 大于5</div>
|
||||
<div class="bottom-text">实时值: 7.12</div>
|
||||
<div class="bottom-text">2023.06.08 12:00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
|
||||
let formworkOption = ref([
|
||||
{
|
||||
value: 0,
|
||||
label: "告警",
|
||||
color: "#EC6266"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "预警",
|
||||
color: "#EEA959"
|
||||
}
|
||||
]);
|
||||
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 1,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 1,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
monitorTitle: "混凝土监测",
|
||||
monitorType: 0,
|
||||
temperate: "大于5",
|
||||
realtimeValue: "7.12",
|
||||
monitorTime: "2023.06.08 12:00:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.concrete-right-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top-data {
|
||||
width: 100%;
|
||||
height: 11%;
|
||||
padding-top: 6%;
|
||||
display: flex;
|
||||
.num {
|
||||
font-size: 20px;
|
||||
font-family: OPPOSans-Bold, OPPOSans;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
padding: 0% 5%;
|
||||
}
|
||||
.data-left {
|
||||
box-sizing: border-box;
|
||||
width: 45%;
|
||||
margin-left: 3%;
|
||||
font-size: 16px;
|
||||
padding-top: 1%;
|
||||
padding-left: 15%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/concreteMonitor/warnBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.data-right {
|
||||
box-sizing: border-box;
|
||||
width: 45%;
|
||||
margin-left: 3%;
|
||||
font-size: 16px;
|
||||
padding-top: 1%;
|
||||
padding-left: 15%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/concreteMonitor/earlyBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.monitor-list {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
margin-top: 5%;
|
||||
.monitor-item {
|
||||
width: 94%;
|
||||
margin: auto;
|
||||
padding-bottom: 2%;
|
||||
margin-bottom: 3%;
|
||||
background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 3%;
|
||||
padding-left: 3%;
|
||||
.top-title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.top-state {
|
||||
padding: 0% 1%;
|
||||
font-size: 12px;
|
||||
margin-left: 2%;
|
||||
color: #fff;
|
||||
background: #ec6266;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
}
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 3%;
|
||||
margin-top: 2%;
|
||||
margin-right: 6%;
|
||||
.bottom-text {
|
||||
font-size: 12px;
|
||||
color: #a1accb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<Card title="混凝土统计">
|
||||
<div class="concrete-left-bottom">
|
||||
<div class="concrete-total">
|
||||
<div class="text">混凝土总数</div>
|
||||
<div class="num">365</div>
|
||||
</div>
|
||||
<div class="concrete-alarm">
|
||||
<div class="text">正在告警</div>
|
||||
<div class="num">136</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.concrete-left-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.concrete-total {
|
||||
left: 20%;
|
||||
top: 20%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 60%;
|
||||
background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-top: 15%;
|
||||
font-size: calc(100vw * 16 / 1920);
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #65d7f9;
|
||||
}
|
||||
.num {
|
||||
margin-top: 10%;
|
||||
font-weight: bold;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.concrete-alarm {
|
||||
right: 20%;
|
||||
bottom: 20%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 60%;
|
||||
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
margin-top: 10%;
|
||||
font-size: calc(100vw * 16 / 1920);
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.num {
|
||||
margin-top: 10%;
|
||||
font-family: sadigitalNumber;
|
||||
font-weight: bold;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
background-image: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user