危废品大屏update
This commit is contained in:
hzz
parent
23a70cbc79
commit
4317202548
6
src/http/guojian/index.ts
Normal file
6
src/http/guojian/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import {get,post} from "@/utils/http"
|
||||
|
||||
//国检24小时趋势
|
||||
export function getGuoJian24Trend(){
|
||||
return get('/guoJian/getGuoJian24Trend')
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="top">
|
||||
{{ prop.title }}
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="border-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,6 +25,10 @@ const prop = defineProps({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.border-w {
|
||||
@ -46,13 +50,11 @@ const prop = defineProps({
|
||||
|
||||
|
||||
.top {
|
||||
width: 55%;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 22.5%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -62,9 +64,9 @@ const prop = defineProps({
|
||||
content: '';
|
||||
border-width: 0px;
|
||||
position: absolute;
|
||||
left: 22.5%;
|
||||
left: 37.5%;
|
||||
bottom: -3px;
|
||||
width: 55%;
|
||||
width: 25%;
|
||||
height: 6px;
|
||||
background: -webkit-linear-gradient(0deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
|
||||
background: -moz-linear-gradient(90deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
|
||||
@ -75,4 +77,11 @@ const prop = defineProps({
|
||||
-webkit-box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
|
||||
box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
|
||||
}
|
||||
|
||||
.border-content {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<img :src="prop.config.image">
|
||||
</div>
|
||||
<div class="text">
|
||||
20%RH
|
||||
{{ prop.config.value }}{{ prop.config.unit }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="prop.config.type == 2" class="type2">
|
||||
@ -17,13 +17,14 @@
|
||||
<img :src="prop.config.image">
|
||||
</div>
|
||||
<div class="text2">
|
||||
<div class="text2-l"></div>
|
||||
<div class="text2-r">开启</div>
|
||||
<div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
|
||||
<div class="text2-r">{{ prop.config.value == 0?'关闭':'开启' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="prop.config.type == 3" class="type3">
|
||||
<div class="img3">
|
||||
<img :src="prop.config.image">
|
||||
<img :src="prop.config.image" v-if="prop.config.value<1">
|
||||
<img :src="prop.config.image1" v-else>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,6 +143,13 @@ const porptitle = computed(() => {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text2-l.grey {
|
||||
background-color: #A7A6BD;
|
||||
}
|
||||
|
||||
.text2-l.green {
|
||||
background-color: #53FFC3;
|
||||
}
|
||||
.text2-r {
|
||||
|
||||
133
src/views/Hazardous/components/LineChart.vue
Normal file
133
src/views/Hazardous/components/LineChart.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="line-chart-container">
|
||||
<div class="chart" ref="chart"></div>
|
||||
<div class="math-box">
|
||||
<div class="math-content">
|
||||
<div style="height: 25%;"> </div>
|
||||
<div class="key">最大值</div>
|
||||
<div class="key">最小值</div>
|
||||
<div class="key">平均值</div>
|
||||
</div>
|
||||
<div class="math-content" v-for="(item, index) in calc.math">
|
||||
<div :style="{ color: color[index] }">{{ item.key }}</div>
|
||||
<div>{{ item.value.max }}</div>
|
||||
<div>{{ item.value.min }}</div>
|
||||
<div>{{ item.value.avg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
|
||||
const prop = defineProps<{
|
||||
calc: {
|
||||
name: string,
|
||||
math: {
|
||||
key: string,
|
||||
value: {
|
||||
max: number,
|
||||
min: number,
|
||||
avg: number,
|
||||
data: any[]
|
||||
}
|
||||
}[],
|
||||
data: any,
|
||||
xAxis: string[],
|
||||
}
|
||||
}>()
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
const chart = ref()
|
||||
let myChart = null
|
||||
let data = prop.calc.data
|
||||
let color = ['#4281E5', '#78F7AE', '#FF6E40']
|
||||
function init() {
|
||||
myChart = proxy.$echarts.init(chart.value, 'dark');
|
||||
const option = {
|
||||
title: {
|
||||
text: prop.calc.name,
|
||||
top: "5%",
|
||||
left: "5%"
|
||||
},
|
||||
color: color,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: prop.calc.xAxis
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: data
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
watch(() => prop.calc.data, (newVal) => {
|
||||
data = newVal
|
||||
myChart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: prop.calc.xAxis
|
||||
},
|
||||
series: data
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
/* box-shadow: rgb(2, 106, 181) 0px 8px 8px; */
|
||||
}
|
||||
|
||||
/* .line-chart-container:hover {
|
||||
box-shadow: rgb(2, 106, 181) 0px 8px 16px;
|
||||
} */
|
||||
|
||||
.chart {
|
||||
height: calc(100% - 90px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.math-box {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.math-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
color: #ff6e40;
|
||||
}</style>
|
||||
118
src/views/Hazardous/components/scrollBoard.vue
Normal file
118
src/views/Hazardous/components/scrollBoard.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-13 08:33:37
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="box-body">
|
||||
<ZdScrollBoard ref="devList" :config="prop.config" @mouseover="dvMouseover"
|
||||
@mouseend="dvmouseleave" :style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}" />
|
||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
|
||||
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
import { useRouter } from "vue-router"
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const prop = defineProps({
|
||||
config: Object,
|
||||
})
|
||||
const router = useRouter()
|
||||
//弹窗文本
|
||||
let tipcontent = ref(null)
|
||||
//弹窗显示与隐藏
|
||||
let visible = ref(false)
|
||||
//存储弹窗dom
|
||||
let triggerRef = ref(null)
|
||||
/**
|
||||
* @函数功能: 鼠标移入组件方法
|
||||
* @param {*} value
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvMouseover = (value) => {
|
||||
if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
|
||||
triggerRef.value = value.toElement
|
||||
tipcontent.value = value.toElement.innerText
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* 点击表格事件
|
||||
*/
|
||||
const dvClick = (value) => {
|
||||
if (value.row) {
|
||||
let id = {
|
||||
'精加车间': 1,
|
||||
'机加车间': 2,
|
||||
'大件车间': 3,
|
||||
'精饰车间': 4,
|
||||
'焊接车间': 5,
|
||||
}
|
||||
|
||||
prop.config.rawData.forEach((res, index) => {
|
||||
|
||||
if (index == value.row[0] - 1) {
|
||||
router.push({
|
||||
name: "Mechanicsson",
|
||||
params: {
|
||||
id: id[value.row[2]],
|
||||
dev: res.id
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* @函数功能: 鼠标移出组件方法
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvmouseleave = () => {
|
||||
triggerRef.value = null
|
||||
tipcontent.value = null
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .ceil) {
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
text-overflow: none
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .row-item) {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-popper.tooltip-class {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
1
src/views/Hazardous/image/kongtiao1.svg
Normal file
1
src/views/Hazardous/image/kongtiao1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128"><path d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z" fill="#E43961" p-id="6588"></path><path d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z" fill="#E43961" p-id="6589"></path><path d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z" fill="#E43961" p-id="6590"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
1
src/views/Hazardous/image/paifeng1.svg
Normal file
1
src/views/Hazardous/image/paifeng1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625025523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16590" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M515.2768 53.7088a457.8816 457.8816 0 1 0 0 915.7632 457.8816 457.8816 0 0 0 0-915.7632z m0 877.4144c-231.2192 0-419.4304-188.3136-419.4304-419.4816 0-231.2704 188.2112-419.4816 419.4304-419.4816s419.4304 188.2112 419.4304 419.4816c0 231.168-188.2112 419.4816-419.4304 419.4816z" fill="#E43961" p-id="16591"></path><path d="M511.3856 563.968a13.4144 13.4144 0 0 1 0.8704-1.6896 193.3824 193.3824 0 0 1-54.1696-76.4928l-2.048-0.3072 0.256 0.7168c-8.6528 2.3552-17.92 4.6592-27.5968 6.5536-33.0752 6.4-66.048-0.6656-97.792-7.4752-39.3216-8.3968-76.544-16.384-106.3936 4.7104a111.7184 111.7184 0 0 0-29.3888 149.0432c16.1792 26.7776 43.2128 45.2608 76.032 52.0704 9.1648 1.8944 18.3296 2.816 27.7504 2.816 34.304 0 70.4-12.4416 103.936-36.1984 36.1984-25.6 75.2128-61.9008 107.6736-94.3104a5.12 5.12 0 0 0 0.8704 0.5632z" fill="#E43961" p-id="16592"></path><path d="M570.6752 516.5056l-1.6896-0.9216a194.56 194.56 0 0 1-76.544 54.2208l-0.2048 1.9968 0.7168-0.2048c2.3552 8.704 4.7104 17.8688 6.5024 27.5456 6.4 33.0752-0.7168 65.8944-7.424 97.8432-8.5504 39.3216-16.4864 76.4416 4.608 106.3936a111.7184 111.7184 0 0 0 148.992 29.3376c26.7776-16.2816 45.4144-43.3152 52.224-76.1344 1.792-9.0112 2.8672-18.2272 2.8672-27.6992 0-34.3552-12.4928-70.3488-36.4032-103.936-25.5488-36.0448-61.7984-75.2128-94.208-107.6224l0.5632-0.8192z" fill="#E43961" p-id="16593"></path><path d="M519.168 449.6384l-0.8192 1.6896c23.7568 20.48 42.496 46.6432 54.1184 76.4928a14.848 14.848 0 0 1 2.0992 0.3072l-0.2048-0.768c8.704-2.4064 17.92-4.608 27.5456-6.5024 33.0752-6.3488 65.8944 0.6144 97.7408 7.4752 39.424 8.448 76.4928 16.4352 106.4448-4.7616a111.5136 111.5136 0 0 0 29.3376-148.9408c-16.1792-26.8288-43.3152-45.312-76.032-52.1728a135.1168 135.1168 0 0 0-27.648-2.816c-34.4064 0-70.5536 12.4416-104.0896 36.2496-36.1472 25.6-75.1616 61.9008-107.52 94.3104l-0.9728-0.5632z" fill="#E43961" p-id="16594"></path><path d="M475.4944 506.6752c0.512 0.3072 1.1264 0.512 1.6896 0.8192 20.5312-23.7056 46.6432-42.496 76.544-54.1696 0-0.6656 0.1536-1.3312 0.2048-2.048l-0.7168 0.2048a359.6288 359.6288 0 0 1-6.5024-27.5968c-6.4-33.024 0.7168-65.9456 7.424-97.792 8.4992-39.3728 16.4864-76.4928-4.608-106.3936a111.6672 111.6672 0 0 0-148.9408-29.3888c-26.8288 16.2816-45.3632 43.3152-52.1728 76.1856a138.6496 138.6496 0 0 0-2.816 27.7504c0 34.304 12.3904 70.4 36.2496 103.936 25.7024 36.096 61.9008 75.2128 94.3104 107.6224-0.3072 0.256-0.4608 0.5632-0.6656 0.8704z" fill="#E43961" p-id="16595"></path><path d="M449.536 439.7056h122.1632v122.112H449.536z" fill="#E43961" p-id="16596"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
src/views/Hazardous/image/ranqi1.svg
Normal file
1
src/views/Hazardous/image/ranqi1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#E43961" d="M786.304491 191.066121a49.764069 49.764069 0 0 0-83.196103 46.692212 174.430228 174.430228 0 0 1 3.686228 23.704489C620.373065 62.560141 513.216485 13.615234 467.036248 1.634995a49.866464 49.866464 0 0 0-62.461073 45.617063c-10.23952 186.256874-103.009574 318.0395-159.070948 381.319735-2.457485-10.23952-4.607784-21.605388-6.450898-33.892812a49.815266 49.815266 0 0 0-96.097897-9.778742c-30.718561 84.220054-85.858378 227.010165-92.155683 242.932619-0.665569 1.740718-1.228742 3.481437-1.791916 5.426946-63.280235 240.167948 124.154183 346.300576 183.082623 373.076921a49.968859 49.968859 0 0 0 70.089516-53.501493c-11.724251-72.342211 20.479041-145.759571 25.854789-156.920649a796.122702 796.122702 0 0 0 82.684126-173.150288c1.689521 4.505389 3.327844 9.164371 4.812574 13.976946a49.815266 49.815266 0 0 0 93.230833 5.11976c19.915867-46.077841 31.79371-101.780832 38.654189-146.42514 198.595496 164.651486 151.493703 395.09189 131.168254 464.87422a49.815266 49.815266 0 0 0 47.920955 63.689817 50.276045 50.276045 0 0 0 21.656586-5.119761c205.660765-99.016161 234.024236-254.759265 236.584116-272.217646v-0.614371-2.406288c25.905986-299.454771-130.144303-486.172423-198.441903-552.575711z m121.491908 545.254454c-1.740718 10.23952-20.479041 105.518256-140.332626 183.133821 21.400597-124.154183 21.656585-355.106563-213.340405-516.12302a49.968859 49.968859 0 0 0-49.149697-4.095808 49.508081 49.508081 0 0 0-28.721854 40.087722 847.013117 847.013117 0 0 1-17.919161 106.746999 167.262564 167.262564 0 0 0-23.90928-28.670657 49.866464 49.866464 0 0 0-83.144904 26.725148c-5.887724 30.052992-26.366765 110.791609-89.902988 211.804477a53.911074 53.911074 0 0 0-2.662276 4.761377 402.259554 402.259554 0 0 0-36.657482 151.74969c-60.61796-39.626943-134.393704-118.573645-98.248197-257.933516 5.938922-15.35928 34.455986-89.391012 61.437121-160.70927 1.587126 3.532634 3.174251 6.911676 5.11976 10.23952a49.200895 49.200895 0 0 0 35.838321 25.598801 50.122452 50.122452 0 0 0 42.442812-13.106586c44.234728-42.135626 184.311365-192.656574 210.575735-426.783206 47.255386 25.957184 126.970051 97.275443 189.431125 290.699981a49.815266 49.815266 0 0 0 93.077239 4.761377 279.385311 279.385311 0 0 0 21.707783-80.89221c64.048199 82.632929 141.51017 227.419745 124.358974 432.00536z" /></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
src/views/Hazardous/image/shidu1.svg
Normal file
1
src/views/Hazardous/image/shidu1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695623192300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12699" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M619.52 267.52C536.4224 141.7728 454.7584 40.3968 451.2768 36.1472L422.0928 0l-29.2352 36.1472c-3.4304 4.2496-85.1456 105.6256-168.2432 231.3216a1781.76 1781.76 0 0 0-116.6336 200.1408C70.5536 544.9728 52.3264 606.0032 52.3264 654.2336a369.7664 369.7664 0 0 0 631.1936 261.4784 367.3088 367.3088 0 0 0 108.288-261.4784c0-48.2304-18.2272-109.312-55.6544-186.6752a1781.76 1781.76 0 0 0-116.6336-200.0384zM422.0928 948.8896a294.9632 294.9632 0 0 1-294.6048-294.6048c0-66.56 56.6784-189.0304 159.5392-344.832 51.6096-78.2336 103.7824-148.0704 135.0656-188.7744 31.2832 40.704 83.4048 110.4896 135.0656 188.7232 102.912 155.8016 159.5392 278.272 159.5392 344.832a294.9632 294.9632 0 0 1-294.6048 294.656zM915.8656 99.4816c-26.4704-38.4-52.48-69.3248-53.5552-70.656l-14.336-17.0496-14.336 17.0496c-1.0752 1.28-27.136 32.256-53.5552 70.656-37.5296 54.4768-55.808 94.208-55.808 121.4976 0 65.8432 55.5008 119.3984 123.6992 119.3984S971.6736 286.72 971.6736 221.0304c0-27.2896-18.2272-67.072-55.808-121.5488z m-67.9424 203.3664c-47.5136 0-86.1696-36.7104-86.1696-81.92 0-31.3344 48.128-102.4 86.1696-150.3232 38.0416 47.9232 86.1696 119.04 86.1696 150.3232 0 45.312-38.656 81.92-86.1696 81.92z" fill="#E43961" p-id="12700"></path><path d="M422.0928 818.0224a165.4272 165.4272 0 0 1-165.2736-165.2736 37.5808 37.5808 0 0 0-75.1104 0 240.64 240.64 0 0 0 240.64 240.64 37.5808 37.5808 0 1 0 0-75.1104z" fill="#E43961" p-id="12701"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
6
src/views/Hazardous/image/wendu1.svg
Normal file
6
src/views/Hazardous/image/wendu1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="88px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -270 -286 )">
|
||||
<path d="M 47.80912797656249 64.43590847222222 C 47.80912797656249 57.56321585972223 44.561428679687495 51.421889597222226 39 47.28240985416667 L 39 16.03532027777778 C 39.4712582578125 7.755016347222222 32.321369976562494 0.9777777777777779 23.5985062734375 0.9777777777777779 C 14.875642570312507 0.9777777777777779 7.7257542890625 7.755016347222222 8 16.03532027777778 L 8 47.98016559722222 C 3.1044514765625024 52.099479009722224 0.19087202343749965 57.92889903472222 0.19087202343749965 64.43590847222222 C 0.19087202343749965 76.90812472291665 10.851080476562501 87.02222222222223 24 87.02222222222223 C 37.148919523437506 87.02222222222223 47.80912797656249 76.90946908333332 47.80912797656249 64.43590847222222 Z M 42.965078687500004 64.42515308472223 C 42.965078687500004 74.34699805347222 34.459461546875005 82.41488312291668 24 82.41488312291668 C 13.540538453124995 82.41488312291668 5.0349213125 74.34834249791666 5.0349213125 64.42515308472223 C 5.0349213125 59.426586702083334 7.16751296875 54.76815955416666 11.040827468750003 51.326435554166665 L 13 49.971256729166676 L 13 16.024564890277777 C 12.569803578124997 10.252955052083335 17.519726234375 5.56226165763889 23.5985062734375 5.562261741666668 C 29.677286312499994 5.562261825694446 34.62720896875 10.254299580555557 34 16.024564890277777 L 34 49.389121359722225 L 36.3225575 50.76581095972222 C 40.54236658593751 54.195435127777785 42.965078687500004 59.17249073541666 42.965078687500004 64.42515308472223 Z M 38.12102939843749 64.42918633402778 C 38.12102939843749 60.516914088888896 36.311557671875 56.811683095138896 33.164231828125 54.259967452777786 L 29 51.506588252777796 L 29 16.024564890277777 C 29.781784679687505 12.84769232847222 26.9465789375 10.157501009027778 23.594381359375 10.157501009027778 C 20.242183781250006 10.157501009027778 17.4069780390625 12.846347884027777 17.4069780390625 16.024564890277777 L 17.4069780390625 17.813992464583333 L 21.437040046874998 17.813992464583333 L 21.437040046874998 20.619804241666667 L 17.4138528671875 20.619804241666667 L 17.4138528671875 25.151855628472223 L 21.443914960937498 25.151855628472223 L 21.443914960937498 27.95766732152778 L 17.4138528671875 27.95766732152778 L 17.4138528671875 32.48971870833334 L 21.443914960937498 32.48971870833334 L 21.443914960937498 35.29553048541667 L 17.4138528671875 35.29553048541667 L 17.4138528671875 39.831615121527776 L 21.443914960937498 39.831615121527776 L 21.443914960937498 42.637426814583335 L 17.4138528671875 42.637426814583335 L 17.4138528671875 51.95562572291665 L 14.355900648437505 54.67673876041667 C 11.468445765625003 57.24996526180555 9.8789706015625 60.7118555923611 9.8789706015625 64.42918633402778 C 9.8789706015625 71.82351524027779 16.203871773437506 77.82367702083333 24 77.82367702083333 C 31.796128226562494 77.82367702083333 38.12102939843749 71.80872651944443 38.12102939843749 64.42918633402778 Z M 34.88982984375 64.42649752916667 C 34.8939547578125 70.12147521041666 30.005906156250006 74.75973611180555 24 74.75973602777779 C 17.99409384375 74.75973602777779 13.106045242187498 70.1214751263889 13.106045242187498 64.42515308472223 C 13.106045242187498 61.56556445416667 14.333901078124995 58.88747296666667 16.565491187499994 56.90713722222222 L 20.639552507812496 53.27719394097222 L 20.639552507812496 47.67363705347222 L 26.551960124999994 47.67363705347222 L 26.551960124999994 52.91688845972222 L 31.061889656250003 56.580442347916666 C 33.495601671875 58.56077809236111 34.88982984375 61.42036672291667 34.88982984375 64.42649752916667 Z " fill-rule="nonzero" fill="#E43961" stroke="none" transform="matrix(1 0 0 1 270 286 )" />
|
||||
</g>
|
||||
</svg>
|
||||
1
src/views/Hazardous/image/xielou1.svg
Normal file
1
src/views/Hazardous/image/xielou1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625265174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17857" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M831.937316 825.418217H191.059745a40.117532 40.117532 0 0 1-40.117531-40.117531V533.563173a361.057786 361.057786 0 1 1 721.112634 0v251.737513a40.117532 40.117532 0 0 1-40.117532 40.117531z m-600.760039-80.235063h560.642508V533.563173c0-154.452498-125.367287-280.822723-280.822723-280.822722S231.177277 378.107738 231.177277 533.563173zM872.054848 1024H151.945152a94.2762 94.2762 0 0 1 0-188.5524h720.109696a94.2762 94.2762 0 0 1 0 188.5524zM151.945152 915.682664a14.041136 14.041136 0 0 0 0 28.082272h720.109696a14.041136 14.041136 0 0 0 0-28.082272z" fill="#E43961" p-id="17858"></path><path d="M512 158.464251a40.117532 40.117532 0 0 1-40.117532-40.117532V40.117532a40.117532 40.117532 0 0 1 80.235064 0v78.229187a40.117532 40.117532 0 0 1-40.117532 40.117532zM701.555338 195.572968a40.117532 40.117532 0 0 1-35.10284-59.17336l37.108716-69.202742a40.38331 40.38331 0 1 1 71.208619 38.111655l-37.108716 69.202742a40.117532 40.117532 0 0 1-36.105779 21.061705zM841.966699 313.919687a40.117532 40.117532 0 0 1-29.08521-67.196866l53.155729-57.167483a40.117532 40.117532 0 0 1 59.17336 54.158668l-53.15573 57.167483a40.117532 40.117532 0 0 1-30.088149 13.038198zM323.4476 195.572968a40.117532 40.117532 0 0 1-35.10284-21.061705l-37.108717-69.202742a40.38331 40.38331 0 0 1 71.208619-38.111655l37.108717 69.202742a40.117532 40.117532 0 0 1-35.10284 59.17336zM182.033301 313.919687a40.117532 40.117532 0 0 1-29.085211-13.038198l-53.15573-57.167483a40.117532 40.117532 0 0 1 59.17336-54.158668l53.15573 57.167483a40.117532 40.117532 0 0 1-29.085211 67.196866zM438.785504 726.127326a40.117532 40.117532 0 0 1-28.082272-68.199804l134.393732-135.39667H381.618022a40.117532 40.117532 0 0 1-28.082273-68.199804l153.44956-153.449559a40.423428 40.423428 0 0 1 57.167482 57.167483l-85.249755 85.249755h162.476004a40.117532 40.117532 0 0 1 28.082272 68.199804L466.867777 714.092067a40.117532 40.117532 0 0 1-28.082273 12.035259z" fill="#E43961" p-id="17859"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
1
src/views/Hazardous/image/yanwu1.svg
Normal file
1
src/views/Hazardous/image/yanwu1.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#E43961" d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 832C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384zM404.96 770.432a278.208 278.208 0 0 1-90.688-60.672 278.432 278.432 0 0 1-60.704-90.72 32 32 0 0 0-59.136 24.512 341.6 341.6 0 0 0 74.592 111.456 342.176 342.176 0 0 0 111.456 74.56 31.936 31.936 0 0 0 41.792-17.312 31.968 31.968 0 0 0-17.312-41.824zM211.744 422.272a31.872 31.872 0 0 0 41.824-17.28 278.08 278.08 0 0 1 60.704-90.72 278.304 278.304 0 0 1 90.688-60.704 32 32 0 0 0-24.512-59.136 342.016 342.016 0 0 0-111.456 74.56 342.144 342.144 0 0 0-74.56 111.488 32 32 0 0 0 17.312 41.792zM619.04 253.568a278.784 278.784 0 0 1 90.72 60.704 278.56 278.56 0 0 1 60.672 90.688 32 32 0 1 0 59.136-24.512 342.176 342.176 0 0 0-74.56-111.456 342.432 342.432 0 0 0-111.456-74.592 32.032 32.032 0 0 0-24.512 59.168zM812.256 601.728a32.096 32.096 0 0 0-41.824 17.312 278.336 278.336 0 0 1-60.672 90.72 278.336 278.336 0 0 1-90.72 60.672 32 32 0 0 0 24.512 59.136 342.176 342.176 0 0 0 111.456-74.56 342.848 342.848 0 0 0 74.56-111.456 32 32 0 0 0-17.312-41.824zM348.576 348.576a230.208 230.208 0 0 0-50.112 74.944 32 32 0 0 0 59.136 24.544 166.784 166.784 0 0 1 36.256-54.208 166.4 166.4 0 0 1 54.208-36.288 32.032 32.032 0 0 0-24.512-59.136 230.592 230.592 0 0 0-74.976 50.144zM575.968 357.568c20.288 8.416 38.528 20.64 54.176 36.256s27.84 33.888 36.288 54.208a32 32 0 1 0 59.136-24.544 230.816 230.816 0 0 0-50.144-74.944 230.4 230.4 0 0 0-74.944-50.112 32 32 0 1 0-24.512 59.136zM448.032 666.432a166.56 166.56 0 0 1-54.208-36.288 166.912 166.912 0 0 1-36.288-54.176 32 32 0 0 0-59.136 24.512 230.464 230.464 0 0 0 50.144 74.944 229.952 229.952 0 0 0 74.944 50.144 32 32 0 0 0 24.544-59.136zM675.392 675.392a230.144 230.144 0 0 0 50.144-74.944 32 32 0 1 0-59.136-24.512c-8.416 20.288-20.64 38.528-36.288 54.176s-33.92 27.872-54.176 36.288a32 32 0 1 0 24.512 59.136 228.96 228.96 0 0 0 74.944-50.144zM640 512c0-70.592-57.408-128-128-128s-128 57.408-128 128 57.408 128 128 128 128-57.408 128-128z m-128 64c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64z" /></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -2,7 +2,7 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="[]"
|
||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="titleTip"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,62 +33,169 @@
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="box1">
|
||||
<Border>
|
||||
<Border :title="'温湿度趋势'">
|
||||
<LineChart :calc="calc"></LineChart>
|
||||
</Border>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<Border></Border>
|
||||
<Border :title="'报警记录'"></Border>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import Border from './components/Border.vue';
|
||||
import Card from './components/Card.vue';
|
||||
import LineChart from './components/LineChart.vue';
|
||||
|
||||
const config = {
|
||||
import { getGuoJian24Trend } from '@/http/guojian/index'
|
||||
|
||||
let timer = null
|
||||
let titleTip = [
|
||||
{
|
||||
color: "#20AEC5",
|
||||
name: '正常',
|
||||
},
|
||||
{
|
||||
color: "#E43961",
|
||||
name: '异常',
|
||||
},
|
||||
{
|
||||
color: "#A7A6BD",
|
||||
name: '断联',
|
||||
},
|
||||
];
|
||||
const config = reactive({
|
||||
shidu: {
|
||||
image: require('./image/shidu.svg'),
|
||||
image1: require('./image/shidu1.svg'),
|
||||
type: 1,
|
||||
classArr:[]
|
||||
classArr: [],
|
||||
value: 0,
|
||||
unit: '%RH'
|
||||
},
|
||||
wendu: {
|
||||
image: require('./image/u21.svg'),
|
||||
image: require('./image/wendu.svg'),
|
||||
image1: require('./image/wendu1.svg'),
|
||||
type: 1,
|
||||
classArr:[]
|
||||
classArr: [],
|
||||
value: 0,
|
||||
unit: '℃'
|
||||
},
|
||||
kongtiao: {
|
||||
image: require('./image/kongtiao.svg'),
|
||||
image1: require('./image/kongtiao1.svg'),
|
||||
type: 2,
|
||||
classArr:['kongtiao']
|
||||
classArr: ['kongtiao'],
|
||||
value: 0,
|
||||
unit: ''
|
||||
},
|
||||
paifeng: {
|
||||
image: require('./image/paifeng.svg'),
|
||||
image1: require('./image/paifeng1.svg'),
|
||||
type: 2,
|
||||
classArr:['paifeng']
|
||||
classArr: ['paifeng'],
|
||||
value: 0,
|
||||
unit: ''
|
||||
},
|
||||
xielou: {
|
||||
image: require('./image/xielou.svg'),
|
||||
image1: require('./image/xielou1.svg'),
|
||||
type: 3,
|
||||
classArr:[]
|
||||
classArr: [],
|
||||
value: 0,
|
||||
unit: ''
|
||||
},
|
||||
yanwu: {
|
||||
image: require('./image/yanwu.svg'),
|
||||
image1: require('./image/yanwu1.svg'),
|
||||
type: 3,
|
||||
classArr:[]
|
||||
classArr: [],
|
||||
value: 0,
|
||||
unit: ''
|
||||
},
|
||||
ranqi: {
|
||||
image: require('./image/ranqi.svg'),
|
||||
image1: require('./image/ranqi1.svg'),
|
||||
type: 3,
|
||||
classArr:[]
|
||||
classArr: [],
|
||||
value: 0,
|
||||
unit: ''
|
||||
},
|
||||
})
|
||||
const calc = reactive({
|
||||
name: '',
|
||||
math: [],
|
||||
data: [],
|
||||
xAxis: [],
|
||||
})
|
||||
const getGuoJian24TrendData = async () => {
|
||||
const res: any = await getGuoJian24Trend()
|
||||
if (res.code == 200) {
|
||||
const data = res.data
|
||||
config.shidu.value = data.top.shidu
|
||||
config.wendu.value = data.top.wendu
|
||||
config.kongtiao.value = data.top.kongtiao
|
||||
config.kongtiao.classArr = data.top.kongtiao == 0 ? [] : ['kongtiao']
|
||||
config.paifeng.value = data.top.paifeng
|
||||
config.paifeng.classArr = data.top.paifeng == 0 ? [] : ['paifeng']
|
||||
config.xielou.value = data.top.xielou
|
||||
config.yanwu.value = data.top.yanwu
|
||||
config.ranqi.value = data.top.ranqi
|
||||
|
||||
calc.math = [
|
||||
{
|
||||
key: '湿度%RH',
|
||||
value: {
|
||||
max: data.maxHumi,
|
||||
min: data.minHumi,
|
||||
avg: data.avgHumi,
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '温度℃',
|
||||
value: {
|
||||
max: data.maxTemp,
|
||||
min: data.minTemp,
|
||||
avg: data.avgTemp,
|
||||
}
|
||||
}
|
||||
]
|
||||
calc.xAxis = data.time
|
||||
calc.data = [
|
||||
{
|
||||
name: '湿度',
|
||||
type: 'line',
|
||||
data: data.humi
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
data: data.temp
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onMounted((() => {
|
||||
getGuoJian24TrendData()
|
||||
timer = setInterval(() => {
|
||||
getGuoJian24TrendData()
|
||||
}, 1000 * 60)
|
||||
}))
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -124,6 +231,7 @@ const config = {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user