hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏按权限显示 已同步主分支

Browse Source
This commit is contained in:
hzz 2023-10-08 14:34:40 +08:00
commit df6d9e2374
127 changed files with 6732 additions and 641 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -31,6 +31,10 @@ import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
text-rendering: optimizeLegibility;
backface-visibility: hidden;
transform: translate3d(0,0,0)
}
nav {

19
src/assets/img/elli_tray.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="361px" height="56px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="133px" y="340px" width="361px" height="56px" filterUnits="userSpaceOnUse" id="filter115">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
<feColorMatrix type="matrix" values="0 0 0 0 0.03529411764705882 0 0 0 0 0.38823529411764707 0 0 0 0 0.4784313725490196 0 0 0 1 0 " in="shadowComposite" />
</filter>
<g id="widget116">
<image preserveAspectRatio="none" style="overflow:visible" width="351" height="46" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV8AAAAuCAYAAACPvBpRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAtUSURBVHhe7Z1NiBvnGcef550ZSbZVRyUbopItK8gejLupHZzDHgKbUIO3jaGBNNBDb6WnHnrKuZSeego99NT21kOhDqTgtOvQQgw+5GBTu9kmW9iCDAoooICSyrakmXmf/p9XI+96uxvL9srej+dnz75fo4/Vx2//82pmxGQcLuaWKuVapV60yKdRzXFeK5rkc66T5JWiScwyR96HughVWATjEtr3wFQRT3WWvOjYhI4J1SkfXc8kMNMMCVW3va0HgaknxJ2iNREcuTaK/qi1BRftOCbOtXG/744JRzeLqt6Pvhtdb8BL1HVJ3i2aNOj223Tz8va3aRxITL57nZNvVsvJlzNe4qpTIQFPMosidsRVEXla+2CrWcgqFhYIa7QewHocM6GPedwHoCO/SWoQnNzThiQ3O89vEqr26/h2YIx3GAsOLSQ+MXqhR5YvXuK6PAgOj+wOFxF2uL6isZWtYy4qKkD7dbyA8WRuvhHR9vjCIh08Qz1UMrRaoY+pw4I+pgzjoY+ZP8drAetRhnsc+vA0dhxnvUF6vEMf/0nHjD3KxrNvTIelpbjcrcx6QsIkruHNUYehkCCDII9BLTOsEg1JT6qo19BXgzBreHeFRIp6eFcF7Y49qBVcSPtGY1rVEgv+jyUYpBokFhqhz9jjjCUOOQdJgw3p40fRNyq1X5/wkehHBfowBoHrc99F2UUNpXRxnT2sDrlLD326RXALL6MObqCPi7TxCus6yruDWr9Fly+r/I0pUTyLxqQceWF5NmPdVCekUYhUfBUJ5Dm8/EcSJWmMSrQZ40QVfXNwrgIsEuY4WYZS26M6NulDG2l2Q6ShNIyHJAgaC0q8TlGFlEO5IfiNOuKBrq/rRCghZLwU26gVsubmWNqe3GfMvqeJW4Ude9+589HKKKUbE6EPuVGk01yS2bFUHfln8fA0kArqmlJDGTbj0Rs2n4sUOhao9gVfQqKoa9eoD5XQMIx9RiHr8TSMoLwr6lDXdaINYaMPr/RWSNZI0SjbuFRTRe1EOp65HXHaslQ9Qh++A4+m1ZTjBv5SN/CCmMVvPYcs2sALQ9szeOFgKdJpEOeoHC86P3pPn2EY26NSDikbIlYph7aKGn1FPaRqTx28D9t417Wg7SasfRPCbom4ZiJZ8zCk6AMh36Mnv1fPEz4BbapM5/BrNaBLyJUb+AVVtnFIq1hEPzzSTXmVaq5t7UdbE6xhGI8HTdAq6SDjQtChHY0ErYtQU5OzTndoiQD0qYtc0+X52kGQ876Rrwp2GLt5lvwEnpzn8WSgzvNIrPP4Nar6AZNkRTINgi02/3X3pjBvqothGPsGCJgh5jDdMV7QVkGjr4/39DoEvY5UvY73+7+Fo7VS5tdvf/yXu7v07WX2nHxLC+dPUEQnYMwF6PLUVsHqvqKSQ65BqoVotW7zqoZxeBjPRauco1FaZi21zdzDj3VhWcdaNzC4SjmtDVcvrhWX3hM8OfmeOT9TTv1LeKAgWvoWgulpSBZ1SBZCDYk1ywrJmmANw5gQFXOYyhjJmOJ4nKBVymuw3nWs9S8WWRsk7ipdu/hAB+HsFo9HvnqgQOn2oohgoTO40ZfxAM2EqYJxis20LBaTrGEYu02QsgoZSzwSs6ZlIe7AOFcwfI2ZPxxIfJVu/Pnu0YfTYvflu7QUJ91jCyJu0bGcgUkXcTMLusu3aJJNM2IIVlKVLKRrGIbxJNH9mxNIWKWcaEqOEZBpFT+uqpAREa+ktVuru7173K7IVz8MSxNaxpWdg2OXyVGNM/0ADPdVE22YPkBpGIaxHxinYywcJySx62GDfIW8XIKaV3Zjb4uHk284KKH6MnLrOVbZMp0OUwhDTbYpZIsl7GFgGIZxANApiyQZJWOU4nhViC86okuDWu/Kw6TiyeU7t1Qp1b62TCJvEMvruGSVhkizY9lqwjUMwzgMhCkKlTGWUtQjz+9C0O8Mu/9dmfTsdPeVb/Lt1xaY5aeo/ghLVedsaQDZpkP7YMwwDCOk4hJROSRjPZPcH0T4N+k/31sdrbA9O8q3dOr86yL+Z8z8CvuMpA/ZDky4hmEYO6IiLpeIKyWE4egDZvfr4Y2L7xaj9/B/8i2ffu2siLyNoQWdUuB+n0TTrmEYhjExnMQklQpRnFxnR28Nrr/3t2IosCHfU9+vJZT+lol/EOZwb92xPRQMwzAeFd1r4ugRkji+kFLyk/E+xEG+ekivOPmrI2nIrdtEw6F2G4ZhGLtFqQQJH22SuO/qoc482keX/+F8Xpcve6PzJRiGYRi7j54c6PixdpxHL0buG/O/ZJKz8oV+ZZSJ1zAMY2roDguDrCpHS3Hkjn/zd5Rlx8NRaIZhGMaUEfyjWRfmd4dp0WkYhmFMHXjXUSm5gKXoMQzDMKYOvOuS5Oiv6Ei5Hb7WwzAMw5gqQtxW77rwlRs+fpWOV5vhkzjDMAxjKghzk5869qp6N9hW9zkbRuUX+anjF8K+aIZhGMauIknpQvr1mReHq++HrzPa/vDiNH2bbt1ZsCPcDMMwHpE4us6Vo28NPrm0w+HFW9AT69Bw+HPq3zltp4s0DMN4QCBdqhz5xfCT9yc7sc5W4heWF13uf0yD9IeUDqt2VjPDMIwdYOpRqfzHKC7//s7ayodF77bcV753OflmtZLcej0fDN9w6XBZ0rxiIjYMw6A+J/GKL5ffSXn4Ln18Wc/pe18ml+9mIOJS3HtF0uwcpflZztITNj9sGMZhQZxbpyRZ4XJyaSiDDyYV7mYeTr5bKJ861yDvzsow/Q5l2TJlac2+w80wjAMDU0/i0ook8d+jSrQyuHGpWYw8NLsi33sovjre5fkikvEZyv0ihGx7ThiGsX9wbpXi+Con7pp3lSvpM3v0q+Pvy8k3q+XSbch4uCjD7Azn+cuU+Rk7i5phGE8c5g7H0RWJomsclz4clCpXxyc8nyaPR77bceb8TDn1L0mOVJzlpyj1C+RTJGSJ9QA8wzCMXSajOFoljlcpoRscJavJkdLV3rWLnWL8sfLk5LsdxZRFlPuFPEtPEUrOckjZz9pJ3g3DmBRx3GIXrUoC0UbRDeJkdRpTB4/C3pLvTswtVZKnqvPs03nKCUv+vHg/z3l+wsRsGIeTINgoWqPIrZPj/5BL1iWR9fSL4TrdvNwvVtuz7A/5fhWbxZxRQySfUyFzLrOoN1DWbW7ZMPYfevYvjlxLXNSkiJBk+dP9JtivYv/L934sLcXlL8sNGvKsF4KMNSlncyI063zekFw/+CP78M8wHifMHSxtcq5FUdSCiW6Ki1sudk0SaQ2eGTT30hTBNDj48p0EFXS3MssCQad+xhPXneTPksrZS91B0F6kziI2xWEYX8FortV1oBYVa5si1/TsPnMRdxxFbaTW1qDWbx10sU6CyfcBOfLC8mzGUc3l2YzPuU6UVfEgPic+n2FPVSFpuDyvQtEzSNkYJzsM29iv9AXpNMhUz1mAzX+0e9j876hQUfYckquXqBtHvnPno5VWcTljAky+06ZI1T6FsDmvBWFLXsEDP4syQlZoUA5ls06J5DE0rek6ZmJL2cauoGmUhDJIVDfvM5VoGEAqRTDIdXMf/X0XubaK1CV519Lp9DH57mXmlirlWqXuJa5q0tYunbem3JNjQcr2TxP8DHWH1K0JW+XNkDexVNCs67p4kmv4YYd87xeYukIcdvJnCBFFn5gzYsgTjNNnGHf0OYQZzisQ5kuBRwp17HqDbr+93z+UOsiYfA8bhdCLFo0TedGkcTIvmnjPi+49EuqQeYVF9x7ZRuJMFfFUZ9nmMHIdK/4QTAqzfgg6+oPySOgx+TQS1aTcFd52uGjHMXGujft9d0w4ullU9X6EZFm08HdwlDCLJpkoDxtE/wORHFqEAjglbgAAAABJRU5ErkJggg==" x="138px" y="345px" />
<path d="M 313.5 345.5 C 411.5 345.5 488.5 355.4 488.5 368 C 488.5 380.6 411.5 390.5 313.5 390.5 C 215.5 390.5 138.5 380.6 138.5 368 C 138.5 355.4 215.5 345.5 313.5 345.5 Z " stroke-width="1" stroke="#09eed8" fill="none" />
</g>
</defs>
<g transform="matrix(1 0 0 1 -133 -340 )">
<use xlink:href="#widget116" filter="url(#filter115)" />
<use xlink:href="#widget116" />
</g>
</svg>

12
src/assets/img/title_bg.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
<stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
<stop id="Stop49" stop-color="#00ffff" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -910 -863 )">
<path d="M 1 29.80000000000001 L 1 0.19999999999998863 L 60.811428571428486 0.19999999999998863 L 67 7.800000000000012 L 67 29.80000000000001 L 1 29.80000000000001 Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
</g>
</svg>

12
src/assets/img/tray.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="426px" height="95px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="322" y1="348" x2="322" y2="443" id="LinearGradient112">
<stop id="Stop113" stop-color="#198cd1" offset="0" />
<stop id="Stop114" stop-color="#001536" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -109 -348 )">
<path d="M 322 348 C 441.28000000000003 348 535 368.9 535 395.5 C 535 422.1 441.28000000000003 443 322 443 C 202.71999999999997 443 109 422.1 109 395.5 C 109 368.9 202.71999999999997 348 322 348 Z " fill-rule="nonzero" fill="url(#LinearGradient112)" stroke="none" />
</g>
</svg>

BIN
src/assets/indexImg/Hazardous.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

BIN
src/assets/indexImg/MicEnvironment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
src/assets/indexImg/MicroExhibitionTable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/assets/indexImg/microExhibition.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

2
src/components/assembly/indexList.vue
View File

@ -37,7 +37,7 @@ function routerpush(isLink:boolean=false) {
<style scoped>
.item {
width: 20%;
height: 30%;
height: 27%;
margin: 30px;
}

4
src/components/borderBox/border14.vue
View File

@ -31,13 +31,13 @@ let prop = defineProps({
}
.title {
position: absolute;
top: 0;
top: 8px;
left: 0;
width: 100%;
height: 8%;
line-height: 40px;
text-align: center;
font-size: 40px;
font-size: 34px;
color: #fff;
font-weight: bold;
}

1
src/components/data-view/index.vue
View File

@ -466,6 +466,7 @@ export default {
white-space: normal;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.zd-scroll-board .rows .index {

4
src/http/AerialView/index.ts
View File

@ -13,8 +13,8 @@ import {get,post,put} from "@/utils/http"
export function getSensorInfodata(){
return get('/screen/device/getSensorInfo')
}
export function deviceDistributeInMachineryFactorydata(){
return get('/screen/device/deviceDistributeInMachineryFactory')
export function deviceDistributeInMachineryFactorydata(data){
return get('/screen/device/deviceDistributeInMachineryFactory',data)
}
export function getSensorInfoByType(data){

8
src/http/MicrofactoryDev/index.ts
View File

@ -33,3 +33,11 @@ export function getCuttingLineHistogramData(){
export function getActivationData(){
return get('/screen/device/getActivation')
}
/**
* 微工厂环境
*/
export function getSensorByDeptId(data){
return get('/screen/device/getSensorByDeptId',data)
}

22
src/http/cisma/index.ts Normal file
View File

@ -0,0 +1,22 @@
import {get,post} from "@/utils/http"
//获取设备在线状态、设备列表
export function getCismaList(){
return get('/screen/cisma/getCismaList')
}
export function getFiveList(){
return get('/screen/cisma/getFiveList')
}
export function getTopDevice(){
return get('/screen/cisma/getTopDevice')
}
// 任务计划列表
export function getPlanProduction(){
return get('/screen/cisma/getPlanProduction')
}
// 任务计划列表保存
export function insertPlanProduction(data){
return post('/screen/cisma/insertPlanProduction',data)
}

15
src/http/guojian/index.ts Normal file
View File

@ -0,0 +1,15 @@
import {get,post} from "@/utils/http"
//国检24小时趋势
export function getGuoJian24Trend(){
return get('/screen/guoJian/getGuoJian24Trend')
}
export function getAirWind(data:any){
return get('/screen/guoJian/getAirWind',data)
}
export function getGuoJianAlarmRecord(){
return get('/screen/guoJian/getGuoJianAlarmRecord')
}

1
src/locales/lang/en.ts
View File

@ -311,5 +311,6 @@ export default {
'空闲时间':'空闲时间',
'智能货架物联管理系统':'智能货架物联管理系统',
'微工厂':'微工厂',
'微工厂环境实时监测系统':'微工厂环境实时监测系统',
}
}

7
src/locales/lang/zh.ts
View File

@ -104,7 +104,7 @@ export default {
'QiCheLegion':'汽车军团',
'YiFangLegion':'医防军团',
'FuZhuangLegion':'服装军团',
'JiaFangLegion':'家纺军团',
'JiaFangLegion':'家纺军团(一楼)',
'TOTAL':'总数量',
'OnlineNum':'在线数量',
'units':'台',
@ -225,9 +225,9 @@ export default {
'productStudyDevelopment':'盈瑞安办公区',
'machineDesign':'机械设计及行政办公区',
'ExternalWork':'内外贸办公区',
'BigPeiTao':'大配套中心',
'BigPeiTao':'配套中心(一楼)',
'twoLou':'二楼',
'EmployeeApartment':'员工公寓',
'EmployeeApartment':'公寓',
'SecurityRoom':'保安室',
'WaterRoom':'水房',
'SynthesizeRoom':'综合楼',
@ -311,5 +311,6 @@ export default {
'空闲时间':'空闲时间',
'智能货架物联管理系统':'智能货架物联管理系统',
'微工厂':'微工厂',
'微工厂环境实时监测系统':'微工厂环境实时监测系统',
}
}

34
src/router/index.ts
View File

@ -1,5 +1,5 @@
/*
* @FilePath: \wwwd:\code\screenFront\src\router\index.ts
* @FilePath: index.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-01-29 15:16:36
@ -249,6 +249,38 @@ const routes: Array<RouteRecordRaw> = [
name: "intelligentShelves",
component: () => import("../views/intelligentShelves/index.vue"),
},
{
path: "/MicEnvironment",
name: "MicEnvironment",
component: () => import("../views/MicEnvironment/index.vue"),
},
{
path: "/MicroExhibition",
children: [
{
path: "/MicroExhibition",
name: "MicroExhibition",
component: () => import("../views/MicroExhibition/index.vue"),
},
{
path: "/MicroExhibition/:id",
name: "MicroExhibitionChild",
component: () => import("../views/MicroExhibition/child/index.vue"),
},
]
},
{
path: "/MicroExhibitionTable",
name: "MicroExhibitionTable",
component: () => import("../views/MicroExhibition/table.vue"),
},
{
path: "/Hazardous",
name: "Hazardous",
component: () => import("../views/Hazardous/index.vue"),
},

394
src/store/module/Factory.ts
View File

@ -2,214 +2,214 @@ import { ref, computed } from 'vue'
import { Names } from "@/store/storeName";
import { defineStore } from 'pinia'
// import { sensor, shuiyaData } from '@/utils/sensor'
import {newPoint} from '@/mock/newPoint'
import { newPoint } from '@/mock/newPoint'
export const useFactoryStore = defineStore(Names.Factory, () => {
const sensorList =ref<any>([]) //ref<any>(JSON.parse(localStorage.getItem('sensorList') || '[]'))
const objSensor = {}
const devdataList = ref<any>([])
//要更新的传感器数据
const updateSensorData= ref<any>({})
//传感器数量列表
const temp_iconList = [
{
id: 1,
name: "icon-icon-temperature",
i18n:'messages.humitureSensor',
value: "温湿度传感器",
iconType:"温湿度",
counts: 0,
allnum: 0,
},
{
id: 2,
name: "icon-shengyin",
i18n:'messages.noiseSensor',
value: "噪音传感器",
iconType:"噪音",
counts: 0,
allnum: 0,
},
{
id: 3,
name: "icon-dianliu",
i18n:'messages.powerSensor',
value: "电力传感器",
iconType:"电力",
counts: 0,
allnum: 0,
},
{
id: 4,
name: "icon-weibiaoti1",
i18n:'messages.sparkSensor',
value: "火花传感器",
iconType:"火花",
counts: 0,
allnum: 0,
},
{
id: 5,
name: "icon-fenchen",
i18n:'messages.dustSensor',
value: "粉尘传感器",
iconType:"粉尘",
counts: 0,
allnum: 0,
},
{
id: 6,
name: "icon-app_icons--",
i18n:'messages.TVOC_CH2OSensor',
value: "TVOC/甲醛传感器",
iconType:"TVOC/甲醛",
counts: 0,
allnum: 0,
},
{
id: 7,
name: "icon-yanwubaojingqi",
i18n:'messages.smokeSensor',
value: "烟雾传感器",
iconType:"烟雾",
counts: 0,
allnum: 0,
},
{
id: 8,
name: "icon-ranqi",
i18n:'messages.gasSensor',
value: "燃气传感器",
iconType:"燃气",
counts: 0,
allnum: 0,
},
{
id: 9,
name: "icon-shuiya",
i18n:'messages.waterPressureSensor',
value: "水压传感器",
iconType:"水压",
counts: 0,
allnum: 0,
},{
id: 10,
name: "icon-qiya",
i18n:'messages.gasPressureSensor',
value: "气压传感器",
iconType:"气压",
counts: 0,
allnum: 0,
},
{
id: 11,
name: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
i18n:'messages.gateway',
value: "网关",
iconType:"网关",
counts: 0,
allnum: 0,
},
]
const temp_devList = [ {
const sensorList = ref<any>([]) //ref<any>(JSON.parse(localStorage.getItem('sensorList') || '[]'))
const objSensor = {}
const devdataList = ref<any>([])
//要更新的传感器数据
const updateSensorData = ref<any>({})
//传感器数量列表
const temp_iconList = [
{
id: 1,
name: "icon-shebeiditu",
i18n:'messages.Dev',
value: "设备",
name: "icon-icon-temperature",
i18n: 'messages.humitureSensor',
value: "温湿度传感器",
iconType: "温湿度",
counts: 0,
allnum: 0,
},]
const iconList = ref(JSON.parse(JSON.stringify(temp_iconList)))
//设备数量列表
const devList = ref(JSON.parse(JSON.stringify(temp_devList)))
},
{
id: 2,
name: "icon-shengyin",
i18n: 'messages.noiseSensor',
value: "噪音传感器",
iconType: "噪音",
counts: 0,
allnum: 0,
},
{
id: 3,
name: "icon-dianliu",
i18n: 'messages.powerSensor',
value: "电力传感器",
iconType: "电力",
counts: 0,
allnum: 0,
},
{
id: 4,
name: "icon-weibiaoti1",
i18n: 'messages.sparkSensor',
value: "火花传感器",
iconType: "火花",
counts: 0,
allnum: 0,
},
{
id: 5,
name: "icon-fenchen",
i18n: 'messages.dustSensor',
value: "粉尘传感器",
iconType: "粉尘",
counts: 0,
allnum: 0,
},
{
id: 6,
name: "icon-app_icons--",
i18n: 'messages.TVOC_CH2OSensor',
value: "TVOC/甲醛传感器",
iconType: "TVOC/甲醛",
counts: 0,
allnum: 0,
},
{
id: 7,
name: "icon-yanwubaojingqi",
i18n: 'messages.smokeSensor',
value: "烟雾传感器",
iconType: "烟雾",
counts: 0,
allnum: 0,
},
{
id: 8,
name: "icon-ranqi",
i18n: 'messages.gasSensor',
value: "燃气传感器",
iconType: "燃气",
counts: 0,
allnum: 0,
},
{
id: 9,
name: "icon-shuiya",
i18n: 'messages.waterPressureSensor',
value: "水压传感器",
iconType: "水压",
counts: 0,
allnum: 0,
}, {
id: 10,
name: "icon-qiya",
i18n: 'messages.gasPressureSensor',
value: "气压传感器",
iconType: "气压",
counts: 0,
allnum: 0,
},
{
id: 11,
name: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
i18n: 'messages.gateway',
value: "网关",
iconType: "网关",
counts: 0,
allnum: 0,
},
]
const temp_devList = [{
id: 1,
name: "icon-shebeiditu",
i18n: 'messages.Dev',
value: "设备",
counts: 0,
allnum: 0,
},]
const iconList = ref(JSON.parse(JSON.stringify(temp_iconList)))
//设备数量列表
const devList = ref(JSON.parse(JSON.stringify(temp_devList)))
//更新传感器数据方法
const updateSensorList= (data:any) => {
// console.log(objSensor,'updateSensorList');
// objSensor.hasOwnProperty(data.id) && (objSensor[data.id].status = data.status)
data.status = data.status === 'true' ? true : false
if (objSensor.hasOwnProperty(data.id)&&objSensor[data.id].status != data.status) {
objSensor[data.id].status = data.status
updateSensorData.value[data.id] = objSensor[data.id]
//更新传感器数据方法
const updateSensorList = (data: any) => {
// console.log(objSensor,'updateSensorList');
// objSensor.hasOwnProperty(data.id) && (objSensor[data.id].status = data.status)
data.status = data.status === 'true' ? true : false
if (objSensor.hasOwnProperty(data.id) && objSensor[data.id].status != data.status) {
objSensor[data.id].status = data.status
updateSensorData.value[data.id] = objSensor[data.id]
}
// updateSensorData.value[data.id] = data
}
//更新后清除 更新传感器数据
const clearupdateSensorData = () => {
updateSensorData.value = {}
}
const setDataList = (sensor: any) => {
const data: any[] = []
sensorList.value = []
iconList.value = JSON.parse(JSON.stringify(temp_iconList))
for (let i in sensor) {
let iconListKey = iconList.value.findIndex(item => item.iconType == i)
let items = sensor[i].map((item: any) => {
item.icon = i
//传感器数量
iconList.value[iconListKey].allnum++
//在线传感器数量
if (item.status == "true") {
iconList.value[iconListKey].counts++
}
// updateSensorData.value[data.id] = data
return item
})
data.push(...items)
}
//更新后清除 更新传感器数据
const clearupdateSensorData= () => {
updateSensorData.value = {}
}
const setDataList = (sensor:any) => {
const data:any[] = []
sensorList.value = []
iconList.value = JSON.parse(JSON.stringify(temp_iconList))
for(let i in sensor) {
let iconListKey = iconList.value.findIndex(item=>item.iconType == i)
let items = sensor[i].map((item:any)=>{
item.icon = i
//传感器数量
iconList.value[iconListKey].allnum++
//在线传感器数量
if (item.status == "true") {
iconList.value[iconListKey].counts++
}
return item
})
data.push(...items)
let newData: object[] = []
data.forEach(item => {
let { id, x, y, name, status, icon } = item
if (x !== 0 && y !== 0) {
const listItem = {
id,
x,
y,
name,
status: status === 'true' ? true : false,
icon
}
let newData:object[] = []
data.forEach(item => {
let {id, x, y, name, status,icon } = item
if (x !== 0 && y !== 0) {
const listItem = {
id,
x,
y,
name,
status: status === 'true' ? true : false,
icon
}
// if (newPoint.hasOwnProperty(id)) {
// listItem.x = newPoint[id].x
// listItem.y = newPoint[id].y
// }
newData.push(listItem)
objSensor[id] = listItem
}
})
//localStorage.setItem('sensorList', JSON.stringify(newData))
sensorList.value = newData;
}
const setdevList = (data:any) => {
devList.value = JSON.parse(JSON.stringify(temp_devList))
devdataList.value = []
for(let i in data) {
data[i].forEach(element => {
element.icon = '设备'
element.status = element.status === 'true' ? true : false
// if (newPoint.hasOwnProperty(element.id)) {
// element.x = newPoint[element.id].x
// element.y = newPoint[element.id].y
// }
devdataList.value.push(element)
objSensor[element['id']] = element
//设备数量
devList.value[0].allnum++
if (element.status) {
// 在线设备数量
devList.value[0].counts++
}
});
// if (newPoint.hasOwnProperty(id)) {
// listItem.x = newPoint[id].x
// listItem.y = newPoint[id].y
// }
newData.push(listItem)
objSensor[id] = listItem
}
})
//localStorage.setItem('sensorList', JSON.stringify(newData))
sensorList.value = newData;
}
const setdevList = (data: any) => {
devList.value = JSON.parse(JSON.stringify(temp_devList))
devdataList.value = []
for (let i in data) {
data[i].forEach(element => {
element.icon = '设备'
element.status = element.status === 'true' ? true : false
// if (newPoint.hasOwnProperty(element.id)) {
// element.x = newPoint[element.id].x
// element.y = newPoint[element.id].y
// }
devdataList.value.push(element)
objSensor[element['id']] = element
//设备数量
devList.value[0].allnum++
if (element.status) {
// 在线设备数量
devList.value[0].counts++
}
});
}
//保存新点位坐标
function saveNewPoint(id:string,x:number,y:number) {
newPoint.value[id] = {x,y}
}
return { sensorList,devdataList,devList,iconList,updateSensorData,updateSensorList,clearupdateSensorData,setDataList,setdevList,saveNewPoint }
}
//保存新点位坐标
function saveNewPoint(id: string, x: number, y: number) {
newPoint.value[id] = { x, y }
}
return { sensorList, devdataList, devList, iconList, updateSensorData, updateSensorList, clearupdateSensorData, setDataList, setdevList, saveNewPoint }
})

208
src/store/module/MicroExhibition.ts Normal file
View File

@ -0,0 +1,208 @@
/*
* @FilePath: \wwwd:\code\screenFront\src\store\module\MicrofactoryDev.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-06 15:58:13
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/
import { defineStore } from "pinia";
import { Names } from "@/store/storeName";
import { development, production } from "@/utils/devSever";
export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
// 使用方式
// const Index= useIndexStore()
// 1、Index.{数据}++
// 2、Index.$patch({数据:??})
// 3、Index.$patch((state)=>{ state.数据=??})
// 4、通过action修改
state: () => {
return {
devlist: [],
devnum: { all: 17, wait: 7, off: 3, on: 7 },
caijian: {
'value': [],
'chart': {
xData: [],
series: []
}
},
tuoxie: {
'value': [],
'chart': {
xData: [],
series: []
}
},
"zuoyi": {
"value": [],
"chart": {
"series": [],
"xData": []
}
},
"fengzhong": {
"value": [],
"chart": {
"series": [],
"xData": []
}
},
"banfang": {
"value": [],
"chart": {
"series": [],
"xData": []
}
},
};
},
//computed 修改一些值
//需要使用return将数据抛出
//getters内可相互使用计算结果
//使用时可直接放入标签内<div>Index.方法()</div>
getters: {},
actions: {
setDevlist(data) {
this.devlist = data;
},
setDevnum(data) {
this.devnum = data;
},
setcaijian(data) {
data.chart.series = data.chart.series.map((item, index) => {
item.type = 'bar'
item.barMaxWidth = 30
item.label = {
show: true,
position: 'top',
formatter: function (params) {
let unit = '';
if (params.name == '1190269') {
unit = '件'
} else if(params.name == '1050910'){
unit = '米'
}
return params.value + ' ' + unit;
}
}
return item
})
this.caijian = data;
},
settuoxie(data) {
data.chart.series = data.chart.series.map((item) => {
item.type = 'bar'
item.barMaxWidth = 45
item.label = {
show: true,
position: 'top',
formatter: '{c} 只'
}
return item
})
this.tuoxie = data;
},
setfengzhong(data) {
data.value = data.value.map((item, index) => {
item.unshift(index + 1)
return item
})
data.chart.series = data.chart.series.map((item) => {
item.type = 'bar'
item.barMaxWidth = 30
item.label = {
show: true,
position: 'top',
formatter: function (params) {
let unit = '';
let arr = ['RP2011001#', 'RP2011157', '10102109', '10102154']
if (arr.includes(params.name)) {
unit = '片'
} else if(params.name == '1021629'){
unit = '件'
}
return params.value + ' ' + unit;
}
}
return item
})
this.fengzhong = data;
},
setbanfang(data) {
data.value = data.value.map((item, index) => {
item.unshift(index + 1)
return item
})
data.chart.series = data.chart.series.map((item) => {
item.type = 'bar'
item.barMaxWidth = 30
item.label = {
show: true,
position: 'top',
formatter: '{c} 版'
}
return item
})
this.banfang = data;
},
setzuoyi(data) {
data.value = data.value.map((item, index) => {
item.unshift(index + 1)
return item
})
data.chart.series = data.chart.series.map((item) => {
item.type = 'bar'
item.barMaxWidth = 30
item.label = {
show: true,
position: 'top',
formatter: '{c} 件'
}
return item
})
this.zuoyi = data;
},
changestatus(data) {
let map = {
'1170304': 'zuoyi',
'1171902': 'zuoyi',
'10201557': 'zuoyi',
'1171701': 'zuoyi',
'116023#': 'tuoxie',
'104019420': 'banfang',
'104019428': 'banfang',
'1131514': 'banfang',
'10404393': 'banfang',
'10410207': 'banfang',
'10102109': 'fengzhong',
'RP2011001#': 'fengzhong',
'RP2011157': 'fengzhong',
'10102154': 'fengzhong',
'1050910': 'caijian',
'1190269': 'caijian',
'1021629': 'fengzhong',
}
let { RackNumber, WorkingState } = data
let key = map[RackNumber];
if (this[key] && this[key].hasOwnProperty('value')) {
this[key].value.forEach((item) => {
let index = item.findIndex((item2) => {
return item2 == RackNumber
})
if (index != -1) {
item[item.length - 1] = WorkingState
}
})
}
}
},
});

67
src/store/moduleSocketMicEnvironment.ts Normal file
View File

@ -0,0 +1,67 @@
/*
* @FilePath: \wwwd:\code\screenFront\src\store\moduleSocketjixie.ts
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-06 15:58:13
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/
import { defineStore } from "pinia";
import { Names } from '@/store/storeName'
import { gettime, clacendTime } from "@/utils/time"
export const useSocketStore = defineStore(Names.socketMicEnvironment, {
// 使用方式
// const Index= useIndexStore()
// 1、Index.{数据}++
// 2、Index.$patch({数据:??})
// 3、Index.$patch((state)=>{ state.数据=??})
// 4、通过action修改
state: () => {
return {
humiture:
{ "devId": "", "name": "温湿度", "temp": "0", "humidity": "0" },
// humiture:{Humiture:[],bottom:{humidity:null,temp:null,name:null},top:{humidity:null,temp:null,name:null}}, //温湿度
pm: { "devId": "", "name": "粉尘", "pm25": "0", "pm10": "0" },
verticalArr:[]
}
},
//computed 修改一些值
//需要使用return将数据抛出
//getters内可相互使用计算结果
//使用时可直接放入标签内<div>Index.方法()</div>
getters: {
},
actions: {
//初始化
setVerticalArr(val){
this.verticalArr=val
},
sethumiture(val){
this.humiture=val
},
setpm(val){
this.pm=val
},
changehumiture(val){
this.humiture.temp = val.temp
this.humiture.humidity = val.humidity
},
changePm(val){
this.pm.pm25 = val.pm25
this.pm.pm10 = val.pm10
},
changeVerticalArr(val){
this.verticalArr.forEach(res=>{
if(res.id==val.devId&&res.item.type==val.type){
res.item.val=val.val
res.item.status = val.status
}
})
}
}
})

2
src/store/storeName.ts
View File

@ -28,4 +28,6 @@ export const enum Names{
MechanicalViewJingjia="MechanicalViewJingjia",
MechanicalViewJingshi="MechanicalViewJingshi",
socketMechanics='socketMechanics',
socketMicEnvironment='socketMicEnvironment',
MicroExhibition='MicroExhibition',
}

90
src/utils/http.ts
View File

@ -24,7 +24,7 @@ axios.create({
//请求拦截器
axios.interceptors.request.use( (config:AxiosRequestConfig|any) => {
axios.interceptors.request.use((config: AxiosRequestConfig | any) => {
// console.group("本次请求地址为", config) //请求提示
// 在发送请求之前做些什么，例如加入token
// if (config.data) {
@ -39,7 +39,7 @@ axios.interceptors.request.use( (config:AxiosRequestConfig|any) => {
});
//响应拦截器
axios.interceptors.response.use(function (response:AxiosResponse) {
axios.interceptors.response.use(function (response: AxiosResponse) {
// 在接收响应做些什么，例如跳转到登录页
// console.log(response, "我是响应拦截器")
const router = Router; //路由全局对象
@ -92,7 +92,7 @@ export function get(staurl: string, data: any = '') {
// strSign = MD5(strSign);
// let strData = 'code=' + code + '&sign=' + strSign + '&para=' + strPara;
let _url = url+staurl //"?" + strData;
let _url = url + staurl //"?" + strData;
return new Promise((resolve, rejects) => {
let header = { //请求头设置
@ -101,7 +101,7 @@ export function get(staurl: string, data: any = '') {
axios({
url: _url,//在线跨域请求
method: "get",//默认是get请求
headers:header,
headers: header,
params: data
}).then(function (val) {
// console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
@ -125,7 +125,7 @@ export function put(staurl: string, data: any = '') {
// strSign = MD5(strSign);
// let strData = 'code=' + code + '&sign=' + strSign + '&para=' + strPara;
let _url = url+staurl //"?" + strData;
let _url = url + staurl //"?" + strData;
return new Promise((resolve, rejects) => {
let header = { //请求头设置
@ -134,7 +134,7 @@ export function put(staurl: string, data: any = '') {
axios({
url: _url,//在线跨域请求
method: "put",//默认是get请求
headers:header,
headers: header,
params: data
}).then(function (val) {
// console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
@ -148,90 +148,18 @@ export function put(staurl: string, data: any = '') {
}
export function post(code: string, data: any = "", method: string = "POST", isFile: boolean = false, file: File) {
let strTime = (<any>new Date()).Format("yyyyMMddhhmmss")
let flag = sessionStorage.getItem("Order_management_Office") || false
if (!flag) {
open4("禁止非法post跳转")
Router.push('/login') //路由全局对象 如果没有 内存存的sessionStorage那么默认是非法跳转直接弹回登录页
return
}
export function post(staurl: string, data: any = "", method: string = "POST") {
let userId = JSON.parse(sessionStorage.getItem("Order_management_Office")!).UserID
let Token = JSON.parse(sessionStorage.getItem("Order_management_Office")!).Token
let strPara = '';
if (data == '') {
strPara = '{"datetime":"' + strTime + '","userid":"' + userId + '","token":"' + Token + '"}';
} else {
strPara = '{"datetime":"' + strTime + '","userid":"' + userId + '","token":"' + Token + '",' + data + '}';
}
// console.log(strPara);
let password = "RicardPwd";
let strSign = password + strPara + password;
// console.log(strSign);
// strSign = MD5(strSign);
// console.log(strSign);
// let tmpPara = (method == "POST") ? '' : strPara //post url后para为空
let newUrl = url
// strData = 'code=' + code + '&sign=' + strSign + '&para=' + tmpPara;
// console.log(strData);
let _url = newUrl //+ "?" + strData;
let _url = url + staurl //+ "?" + strData;
let METHOD = method || "POST"
return new Promise((resolve, rejects) => {
if (userId == "" || Token == "" || userId == undefined || Token == undefined) {
let tip = "登录失效，请重新登录!"
console.log("*************我进来了2*******************")
rejects(tip)
open4("禁止非法post跳转")
Router.push('/Login') //路由全局对象 如果没有 内存存的cooike那么默认是非法跳转直接弹回登录页
return
}
let header = { //请求头设置
"Content-Type": "application/x-www-form-urlencoded",
"Access-Control-Allow-Origin": "*"
}
let params:any = {}
if (!isFile) {
params = { //此处是传参
code,
sign: strSign,
para: strPara
}
// 对数据进行序列化操作
data = qs.stringify(params)
}
let params: any = {}
// 处理表单结果中文件的操作
if (isFile) { //如果包含文件得传参方式
params = { //此处是传参
code,
sign: strSign,
para: strPara,
file
}
// 设置请求头
header = {
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*"
}
// 对数据进行序列化操作
data = new FormData();
for (let i in params) {
data.append(i, params[i])
}
}
axios({
url: _url,
headers: header,
method: METHOD,
data: data
}).then(function (res) {

2
src/views/AerialView/index.vue
View File

@ -56,7 +56,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
store.setdevList(result.data);

2
src/views/FactoryView/index.vue
View File

@ -48,7 +48,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {

28
src/views/FactoryView/threeMap.vue
View File

@ -285,16 +285,20 @@ const init = () => {
createLableObj(mesh_fzjt, t('messages.FuZhuangLegion'), { x: 0, y: 60, z: 0 })
//微工厂
const mesh_wgc = createFloor(t('messages.微工厂'), 192, 61.5, { x: -133, y: 0, z: -225.5 })
createLableObj(mesh_wgc, t('messages.微工厂'), { x: 0, y: 60, z: 0 })
createLableObj(mesh_wgc, t('messages.微工厂'), { x: 0, y: 30, z: 15 })
//配套车间
const mesh_ptcj = createFloor(t('messages.BigPeiTao'), 110, 236.5, { x: 18.5, y: 0, z: -138 })
createLableObj(mesh_ptcj, t('messages.BigPeiTao'), { x: 0, y: 60, z: 0 })
//家纺军团
const mesh_jfjt = createFloor(t('messages.JiaFangLegion'), 247, 118, { x: 192, y: 0, z: -197 })
createLableObj(mesh_jfjt, t('messages.JiaFangLegion'), { x: 0, y: 60, z: 0 })
createLableObj(mesh_ptcj, t('messages.BigPeiTao'), { x: -20, y: 60, z: 70 })
createLableObj(mesh_ptcj, '中心库房(二楼)', { x: -20, y: 60, z: 0 })
// const mesh_ptcj = createFloor(t('messages.BigPeiTao'), 80, 118, { x: 0, y: 0, z: -79 })
// createLableObj(mesh_ptcj, t('messages.BigPeiTao'), { x: 0, y: 60, z: 0 })
//医防军团
const mesh_yfjt = createFloor(t('messages.YiFangLegion'), 247, 119, { x: 192, y: 0, z: -78 })
createLableObj(mesh_yfjt, `${t('messages.twoLou')}-${t('messages.YiFangLegion')}`, { x: 0, y: 60, z: 0 })
const mesh_jfjt = createFloor(t('messages.YiFangLegion'), 247, 118, { x: 192, y: 0, z: -197 })
createLableObj(mesh_jfjt, `${t('messages.YiFangLegion')}(${t('messages.twoLou')})`, { x: 0, y: 40, z: 10 })
//家纺军团
const mesh_yfjt = createFloor(t('messages.JiaFangLegion'), 247, 119, { x: 192, y: 0, z: -78 })
createLableObj(mesh_yfjt, t('messages.JiaFangLegion'), { x: -10, y: 60, z: 10 })
@ -330,6 +334,10 @@ const init = () => {
createHouse('车间2-3', { baseWidth: 161, baseHeght: 30, baseLength: 263 }, { x: 65.5, y: 0, z: 176 }, false)
createUseWall('车间2-3的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 263 }, { x: 60, y: 0, z: 307 })
//大件车间
const mesh_jijcj = createFloor('机加车间', 20, 100, { x: -46, y: 0, z: 106 })
createLableObj(mesh_jijcj, '库房', { x: 0, y: 60, z: 0 })
//大件车间
const mesh_djcj = createFloor('大件车间', 75, 263, { x: 22, y: 0, z: 176 })
@ -371,11 +379,11 @@ const init = () => {
//创建食堂 baseWidth: 71, baseHeght: 30, baseLength: 124 x: 312.5, y: 0, z: 221.5
createHouse(t('messages.canteen'), { baseWidth: 71, baseHeght: 30, baseLength: 124 }, { x: 359.5, y: 0, z: 221.5 })
//创建宿舍楼3 baseWidth: 56, baseHeght: 30, baseLength: 216 x: 393, y: 0, z: -147
createHouse(`${t('messages.EmployeeApartment')}-9`, { baseWidth: 56, baseHeght: 30, baseLength: 216 }, { x: 440, y: 0, z: -147 })
createHouse(`9#${t('messages.EmployeeApartment')}`, { baseWidth: 56, baseHeght: 30, baseLength: 216 }, { x: 440, y: 0, z: -147 })
//创建宿舍楼1 baseWidth: 56, baseHeght: 30, baseLength: 132 x: 389, y: 0, z: 106.5
createHouse(`${t('messages.EmployeeApartment')}-10`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 106.5 })
createHouse(`10#${t('messages.EmployeeApartment')}`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 106.5 })
//创建宿舍楼2 baseWidth: 56, baseHeght: 30, baseLength: 132 x: 389, y: 0, z: 106.5
createHouse(`${t('messages.EmployeeApartment')}-11`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 243.5 })
createHouse(`11#${t('messages.EmployeeApartment')}`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 243.5 })
//创建围墙 baseWidth: 966, baseHeght: 5, baseLength: 677 x: 24, y: 0, z: 0
createHouse('围墙', { baseWidth: 1013, baseHeght: 15, baseLength: 677 }, { x: 0, y: 0, z: 0 }, false)
//创建东气泵房 baseWidth: 23, baseHeght: 30, baseLength: 16 x: -119.5, y: 0, z: 313.5

2
src/views/FactoryViewTopo/index.vue
View File

@ -48,7 +48,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,8,9,10,11'});
if (result.code == 200) {

51
src/views/Hazardous/components/Air.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div class="img-box">
<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="#20AEC5" 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="#20AEC5" 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="#20AEC5" p-id="6590"></path>
</svg>
</div></template>
<script setup lang='ts'>
</script>
<style scoped>
.img-box {
width: 100%;
height: 100%;
position: relative;
}
.img-box svg {
width: 100%;
height: 100%;
}
.img-box::after {
content: '';
position: absolute;
width: 100%;
height: 40%;
background-color: #100c2a;
box-sizing: border-box;
left: 0;
bottom: 0;
z-index: 1;
animation: myfirst 1.5s linear infinite;
}
@keyframes myfirst
{
0% {height: 40%;}
25% {height: 25%;}
50% {height: 10%;}
100% {height: 0;}
}
</style>

87
src/views/Hazardous/components/Border.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="border-container">
<img src="../image/u91.svg" alt="" class="border-w">
<img src="../image/u93.svg" alt="" class="border-t">
<div class="top">
{{ prop.title }}
</div>
<div class="border-content">
<slot></slot>
</div>
</div>
</template>
<script setup lang='ts'>
const prop = defineProps({
title: {
type: String,
default: '边框'
}
})
</script>
<style scoped>
.border-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.border-w {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.border-t {
width: 55%;
height: 10%;
position: absolute;
top: 0;
left: 22.5%;
}
.top {
width: 100%;
height: 10%;
font-size: 20px;
font-weight: 700;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.top::after {
content: '';
border-width: 0px;
position: absolute;
left: 37.5%;
bottom: -3px;
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%);
background: 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%);
border: none;
border-radius: 25px;
-moz-box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
-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>

229
src/views/Hazardous/components/Card.vue Normal file
View File

@ -0,0 +1,229 @@
<template>
<div class="card-container">
<div class="title" :class="{ 'red-color':prop.config.value>=prop.config.limit }">
{{ porptitle }}
</div>
<div class="card-content" :class="{ noborder,'red-bg':prop.config.value>=prop.config.limit }">
<div v-if="prop.config.type == 1" class="type1">
<div class="img">
<img :src="prop.config.image" v-if="prop.config.value<prop.config.limit">
<img :src="prop.config.image1" v-else>
</div>
<div class="text">
{{ prop.config.value }}{{ prop.config.unit }}
</div>
</div>
<div v-if="prop.config.type == 2" class="type2">
<div class="img2" :class="prop.config.classArr">
<img :src="prop.config.image">
</div>
<div class="text2">
<div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
<div class="text2-r" :class="[prop.config.value == 0?'grey':'green']">{{ prop.config.value == 0?'关闭':'开启' }}</div>
</div>
</div>
<div v-if="prop.config.type == 3" class="type3">
<div class="img3">
<img :src="prop.config.image" v-if="prop.config.value<prop.config.limit">
<img :src="prop.config.image1" v-else>
</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { number } from 'echarts/core';
import { computed } from 'vue'
const prop = defineProps({
title: {
type: String,
default: '卡片'
},
noborder: {
type: Boolean,
default: false
},
config: {
type: Object,
default: () => {
return {
type: 1,
image: '',
classArr:[]
}
}
}
})
const porptitle = computed(() => {
return prop.title.split('').join(' ')
})
</script>
<style scoped>
.card-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.title {
width: 100%;
height: 35%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: 700;
color: #66ffff;
}
.red-color {
color: #E43961;
}
.card-content {
width: 100%;
height: 65%;
border-right: 2px solid #53FFC3;
font-size: 14px;
color: #53FFC3;
padding: 2px;
box-sizing: border-box;
}
.red-bg {
background-color: rgba(228, 57, 97, 0.1411764705882353);
}
.noborder {
border: none;
}
.type1 {
width: 100%;
height: 100%;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.type2 {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.img img {
height: 100%;
}
.img {
width: 100px;
height: 100px;
margin-bottom: 15px;
}
.img2 {
width: 167px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.img2 img {
width: 100%;
}
.text2 {
width: 80px;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.text2-l {
width: 24px;
height: 24px;
border-radius: 50%;
}
.text2-l.grey {
background-color: #A7A6BD;
}
.text2-l.green {
background-color: #53FFC3;
}
.text2-r.grey {
color: #A7A6BD;
/* background-color: #A7A6BD; */
}
.text2-r.green {
color: #53FFC3;
/* background-color: #53FFC3; */
}
.text2-r {
font-size: 14px;
}
.type3 {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img3 {
width: 130px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img3 img {
width: 100%;
}
.kongtiao::after {
content: '';
position: absolute;
width: 100%;
height: 40%;
background-color: #100c2a;
box-sizing: border-box;
left: 0;
bottom: 0;
z-index: 1;
animation: kongtiao 1.5s linear infinite;
}
.paifeng {
animation: paifeng 2s linear infinite;
}
@keyframes kongtiao
{
0% {height: 40%;}
25% {height: 25%;}
50% {height: 10%;}
100% {height: 0;}
}
@keyframes paifeng
{
0% {transform: rotate(0deg);}
25% {transform: rotate(90deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
</style>

215
src/views/Hazardous/components/HDialog.vue Normal file
View File

@ -0,0 +1,215 @@
<!--
* @FilePath: \code\gitscreenFront\src\components\headerBox\dialog\headerDialog.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-06-06 09:23:12
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div>
<el-dialog :title="props.title" v-model="is_Show" ref="" destroy-on-close>
<div style="margin-bottom: 20px">
<el-row :gutter="20">
<el-col :span="15">
<span style="margin-right: 10px; font-size: 18px;">日期：</span>
<el-date-picker v-model="selectTime" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
format="YYYY/MM/DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" size="large"
style="font-size: 18px;" />
</el-col>
<el-col :span="9">
<span style="margin-right: 10px; font-size: 18px;">状态：</span>
<el-select v-model="searchConfig.status" clearable placeholder="请选择状态" style="font-size: 18px;" size="large">
<el-option v-for="item in alarmTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="18"> </el-col>
<el-col :span="6">
<el-button type="primary" plain @click="searchpartData" size="large">搜索</el-button>
<el-button type="primary" plain @click="searchpartReset" size="large">重置</el-button>
</el-col>
</el-row>
</div>
<el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="650px" stripe
style="font-size: 18px;">
<el-table-column type="index" :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1" label="序号"
min-width="10px" header-align="center" width="100" align="center" />
<el-table-column property="name" label="名称" header-align="center" align="center" />
<el-table-column property="time" label="时间" header-align="center" align="center" />
<el-table-column label="状态" header-align="center" align="center" width="120">
<template #default="scope">
<text> {{ scope.row.status == '0'?'关闭':'开启' }}</text>
</template>
</el-table-column>
</el-table>
<div class="pagination-class">
<el-pagination v-model:current-page="searchConfig.pageNum" v-model:page-size="searchConfig.pageSize"
:page-sizes="[5, 10, 50, 100]" :small="small" :disabled="disabled" :background="background"
layout=" prev, pager, next, jumper,sizes" :total="props.total" size="large" style="font-size: 18px;"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { gettime } from "@/utils/time";
const props = defineProps({
title: {
type: String,
default: "",
},
tableData: {
type: Array,
default: () => [],
},
dialogTableVisible: {
type: Boolean,
default: false,
},
type: {
type: String,
default: "",
},
dialogLoading: {
type: Boolean,
default: true,
},
total: {
type: Number,
default: 0,
},
});
//总页数、每页数量、当前页
const searchConfig = reactive({
type: props.type,
status: '',
startTime: "",
endTime: "",
pageSize: 10,
pageNum: 1,
});
const selectTime = ref("");
let small = ref(false);
let disabled = ref(false);
let background = ref(false);
//类型选项
const alarmTypeOptions = [
{
value: '0',
label: '关闭',
},
{
value: '1',
label: '开启',
},
]
const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
const is_Show = computed({
get: () => props.dialogTableVisible,
set: (val) => {
emits("update:dialogTableVisible", val);
},
});
computed({
get: () => props.type,
set: (val) => {
searchConfig.type = val;
},
});
watch(() => props.type,
(newVal, oldVal) => {
searchConfig.type = newVal
}, { immediate: true, deep: true })
watch(
() => selectTime,
(newVal, oldVal) => {
//监听日期数据
if (newVal.value) {
searchConfig.startTime = gettime(newVal.value[0], 2);
searchConfig.endTime = gettime(newVal.value[1], 2);
} else {
searchConfig.startTime = null;
searchConfig.endTime = null;
}
},
{ immediate: true, deep: true }
);
const handleSizeChange = (val: number) => {
searchConfig.pageSize = val;
emits("getDialogdatafun", searchConfig);
};
const handleCurrentChange = (val: number) => {
searchConfig.pageNum = val;
emits("getDialogdatafun", searchConfig);
};
const shortcuts = [
{
text: "最近一周",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: "最近一个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: "最近三个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
//搜索
function searchpartData() {
emits("getDialogdatafun", searchConfig);
}
//重置
function searchpartReset() {
searchConfig.status = ''
selectTime.value = ''
//需要重置startTime、endTime，因监听重置有延迟
searchConfig.startTime = null;
searchConfig.endTime = null;
emits("getDialogdatafun", searchConfig);
}
onMounted(() => { });
</script>
<style scoped>
.pagination-class {
margin-top: 20px;
}
:deep(.el-dialog__title) {
font-size: 25px;
}
.el-row {
margin-bottom: 20px;
}
</style>

133
src/views/Hazardous/components/LineChart.vue Normal file
View 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>

90
src/views/Hazardous/components/scrollBoard.vue Normal file
View File

@ -0,0 +1,90 @@
<!--
* @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 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/kongtiao.svg Normal file
View 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="#20AEC5" 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="#20AEC5" 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="#20AEC5" p-id="6590"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
src/views/Hazardous/image/kongtiao1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
src/views/Hazardous/image/paifeng.svg Normal file
View 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="#20AEC5" 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="#20AEC5" 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="#20AEC5" 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="#20AEC5" 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="#20AEC5" p-id="16595"></path><path d="M449.536 439.7056h122.1632v122.112H449.536z" fill="#20AEC5" p-id="16596"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
src/views/Hazardous/image/paifeng1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
src/views/Hazardous/image/ranqi.svg Normal file
View 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="#20AEC5" 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/views/Hazardous/image/ranqi1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/views/Hazardous/image/shidu.svg Normal file
View 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="#66ffff" 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="#66ffff" p-id="12701"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/views/Hazardous/image/shidu1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

12
src/views/Hazardous/image/u91.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="605px" height="580px" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask fill="white" id="clip34">
<path d="M 0 28.722044728434504 L 13.401898734177166 0.926517571884942 L 590.1621835443038 0.926517571884942 L 605 28.722044728434504 L 605 551.2779552715655 L 590.1621835443038 579.0734824281149 L 13.401898734177166 579.0734824281149 L 11.908908029106671 575.9770209109546 L 0 551.2779552715655 L 0 28.722044728434504 Z " fill-rule="evenodd" />
</mask>
</defs>
<g transform="matrix(1 0 0 1 -1305 -462 )">
<path d="M 0 28.722044728434504 L 13.401898734177166 0.926517571884942 L 590.1621835443038 0.926517571884942 L 605 28.722044728434504 L 605 551.2779552715655 L 590.1621835443038 579.0734824281149 L 13.401898734177166 579.0734824281149 L 11.908908029106671 575.9770209109546 L 0 551.2779552715655 L 0 28.722044728434504 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0" transform="matrix(1 0 0 1 1305 462 )" />
<path d="M 0 28.722044728434504 L 13.401898734177166 0.926517571884942 L 590.1621835443038 0.926517571884942 L 605 28.722044728434504 L 605 551.2779552715655 L 590.1621835443038 579.0734824281149 L 13.401898734177166 579.0734824281149 L 11.908908029106671 575.9770209109546 L 0 551.2779552715655 L 0 28.722044728434504 Z " stroke-width="2" stroke="#27b0db" fill="none" transform="matrix(1 0 0 1 1305 462 )" mask="url(#clip34)" />
</g>
</svg>

6
src/views/Hazardous/image/u93.svg Normal file
View 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="315px" height="51px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1437 -467 )">
<path d="M 1.4870330000751721 0.3787878787878734 C -6.038990043016383 13.958700852129802 64.68593601386186 49.5 64.68593601386186 49.5 L 250.3172215476603 49.5 C 250.3172215476603 49.5 320.68264249168084 13.7307535696334 313.3390964444111 0.3787878787878734 " stroke-width="1" stroke="#27b0db" fill="none" transform="matrix(1 0 0 1 1437 467 )" />
</g>
</svg>

6
src/views/Hazardous/image/wendu.svg Normal file
View 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="#20aec5" stroke="none" transform="matrix(1 0 0 1 270 286 )" />
</g>
</svg>

6
src/views/Hazardous/image/wendu1.svg Normal file
View 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/xielou.svg Normal file
View 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="#20AEC5" 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="#20AEC5" p-id="17859"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/views/Hazardous/image/xielou1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/views/Hazardous/image/yanwu.svg Normal file
View 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="#20AEC5" 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

1
src/views/Hazardous/image/yanwu1.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

359
src/views/Hazardous/index.vue Normal file
View File

@ -0,0 +1,359 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="titleTip"
:typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="top">
<div class="card" style="width: 200px;">
<Card :title="'湿度'" :config="config.shidu">
</Card>
</div>
<div class="card" style="width: 200px;">
<Card :title="'温度'" :config="config.wendu"></Card>
</div>
<div class="card" style="width: 400px;cursor: pointer;">
<Card :title="'空调状态'" :type="2" :config="config.kongtiao" @click="showDialog('kongtiao')"></Card>
</div>
<div class="card" style="width: 400px;cursor: pointer;">
<Card :title="'排风状态'" :type="2" :config="config.paifeng" @click="showDialog('paifeng')"></Card>
</div>
<div class="card" style="width: 240px;">
<Card :title="'泄露监测'" :type="3" :config="config.xielou"></Card>
</div>
<div class="card" style="width: 240px;">
<Card :title="'烟雾监测'" :type="3" :config="config.yanwu"></Card>
</div>
<div class="card" style="width: 240px;">
<Card :title="'可燃气体监测'" :type="3" :noborder="true" :config="config.ranqi"></Card>
</div>
</div>
<div class="bottom">
<div class="box1">
<Border :title="'温湿度趋势'">
<LineChart :calc="calc"></LineChart>
</Border>
</div>
<div class="box2">
<Border :title="'报警记录'">
<ZdScrollBoard ref="devList" :config="board_config" :style="{
width: '100%',
height: '100%',
}" v-show="!isempty" />
<div v-show="isempty"
style="display: flex; align-items: center;width: 100%;height: 100%;justify-content: center;">
<el-empty :image-size="120" />
</div>
</Border>
</div>
</div>
</div>
<HDialog :tableData="dialogdata" :title="DialogTitle" v-model:dialogTableVisible="dialogTableVisible"
:dialogLoading="dialogLoading" @getDialogdatafun="getDialogdatafun" :total="dialogtotal" :type="dialogType">
</HDialog>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, computed } 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';
import ZdScrollBoard from "@/components/data-view/index.vue";
import HDialog from './components/HDialog.vue';
import { getGuoJian24Trend, getAirWind, getGuoJianAlarmRecord } from '@/http/guojian/index'
import { update } from '@tweenjs/tween.js';
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: [],
value: 0,
limit: 80,
unit: '%RH'
},
wendu: {
image: require('./image/wendu.svg'),
image1: require('./image/wendu1.svg'),
type: 1,
classArr: [],
value: 0,
limit: 40,
unit: '℃'
},
kongtiao: {
image: require('./image/kongtiao.svg'),
image1: require('./image/kongtiao1.svg'),
type: 2,
classArr: ['kongtiao'],
value: 0,
limit: 2,
unit: ''
},
paifeng: {
image: require('./image/paifeng.svg'),
image1: require('./image/paifeng1.svg'),
type: 2,
classArr: ['paifeng'],
value: 0,
limit: 2,
unit: ''
},
xielou: {
image: require('./image/xielou.svg'),
image1: require('./image/xielou1.svg'),
type: 3,
classArr: [],
value: 0,
limit: 1,
unit: ''
},
yanwu: {
image: require('./image/yanwu.svg'),
image1: require('./image/yanwu1.svg'),
type: 3,
classArr: [],
value: 0,
limit: 1,
unit: ''
},
ranqi: {
image: require('./image/ranqi.svg'),
image1: require('./image/ranqi1.svg'),
type: 3,
classArr: [],
value: 0,
limit: 1,
unit: ''
},
})
const calc = reactive({
name: '',
math: [],
data: [],
xAxis: [],
})
let devList = ref()
let isempty = ref(false)
let board_config = reactive({
header: ['报警时间', '名称', '状态', '持续时长'],
headerBGC: '#081B56',
oddRowBGC: '#0B1E2A',
evenRowBGC: '#100c2a',
wrap: [true, true, true, true],
align: ['center', 'center', 'center', 'center'],
rowNum: 8,
waitTime: 3000,
})
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
}
]
}
}
//历史报警数据弹窗显示
let Abnormalpopovervisible = ref(false);
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
//dialog
let dialogdata = ref([]);
let dialogTableVisible = ref(false);
let dialogLoading = ref(true);
let dialogtotal = ref(0)
let dialogType = ref("");
let DialogTitle = computed(() => {
if (dialogType.value == "kongtiao") {
return "空调状态历史记录";
} else if (dialogType.value == "paifeng") {
return "排风状态历史记录";
}
});
function showDialog(type) {
if (dialogTableVisible.value == false) {
dialogType.value = type;
getDialogdatafun({
type: type,
pageSize: 10,
pageNum: 1,
});
}
Abnormalpopovervisible.value = false;
dialogTableVisible.value = true;
}
async function getDialogdatafun(config) {
dialogLoading.value = true;
let result: any = await getAirWind(config);
if (result.code == 200) {
dialogtotal.value = result.total
dialogdata.value = result.rows
dialogLoading.value = false;
} else {
setTimeout(() => {
if (dialogLoading.value) {
dialogLoading.value = false;
}
}, 0);
}
}
async function getGuoJianAlarmRecordList() {
let result: any = await getGuoJianAlarmRecord();
if (result.code == 200) {
let updateList = result.data.map((items: any) => {
//['报警时间', '名称', '状态', '持续时长']
return [
items.time,
items.name,
items.status,
items.sum + '分钟',
]
})
if (updateList.length == 0) {
isempty.value = true
} else {
isempty.value = false
}
devList.value.updateRows(updateList, board_config)
}
}
onMounted((() => {
getGuoJian24TrendData()
getGuoJianAlarmRecordList()
timer = setInterval(() => {
getGuoJian24TrendData()
getGuoJianAlarmRecordList()
}, 1000 * 60)
}))
onUnmounted(() => {
clearInterval(timer)
})
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #FFFFFF;
/* background-color: #0E0E0E; */
position: relative;
}
.header {
height: 150px;
width: 1920px;
}
.content {
height: 930px;
width: 1920px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0 5px;
box-sizing: border-box;
}
.top {
width: 100%;
height: 330px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card {
height: 100%;
box-sizing: border-box;
}
.bottom {
width: 100%;
height: 580px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box1 {
width: 1256px;
height: 100%;
}
.box2 {
width: 610px;
height: 100%;
}
</style>

6
src/views/InPlantProducts/content/bottom.vue
View File

@ -18,14 +18,14 @@
<el-col :span="24"
><installtable
ref="install1"
:color="['#ee6666', '#a14646']"
:color="['#91cc75', '#658c52']"
:title="t('messages.QiCheDevSchedule')"
></installtable
></el-col>
<el-col :span="24"
><installtable
ref="install2"
:color="['#5470C6', '#384a81']"
:color="['#91cc75', '#658c52']"
:title="t('messages.FuZhuangDevSchedule')"
></installtable
></el-col>
@ -37,7 +37,7 @@
<el-col :span="5">
<installtable
ref="install3"
:color="['#FAC858', '#ac8b40']"
:color="['#91cc75', '#658c52']"
:title="t('messages.JiaFangDevSchedule')"
></installtable>
<installtable

2
src/views/MechanicalView/index.vue
View File

@ -60,7 +60,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
// setTimeout(() => {

2
src/views/MechanicalViewEdit/index.vue
View File

@ -60,7 +60,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
// setTimeout(() => {

2
src/views/MechanicalView_dajian/index.vue
View File

@ -60,7 +60,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {

2
src/views/MechanicalView_hanjie/index.vue
View File

@ -58,7 +58,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
store.setdevList({"焊接车间":result.data['焊接车间']});

2
src/views/MechanicalView_jijia/index.vue
View File

@ -58,7 +58,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
store.setdevList({"机加车间":result.data['机加车间']});

2
src/views/MechanicalView_jingjia/index.vue
View File

@ -56,7 +56,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
store.setdevList({"精加车间":result.data['精加车间']});

2
src/views/MechanicalView_jingshi/index.vue
View File

@ -59,7 +59,7 @@ async function getSensorInfodatafun() {
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
let result: any = await deviceDistributeInMachineryFactorydata({ids:'6,7,9,10,11'});
if (result.code == 200) {
store.setdevList({"精饰车间":result.data['精饰车间']});

32
src/views/Mechanics/child/son/components/timeguagu.vue
View File

@ -12,7 +12,11 @@
<div>
<border6 ref="refborder6">
<template v-slot>
<div ref="inguagu" class="box"></div>
<div ref="inguagu" class="box" v-show="handle == 't'"></div>
<div ref="inguagud" v-show="handle == 'f'" class="box empty">
<div class="empty-title">{{ props.title }}</div>
<el-empty :image-size="120" />
</div>
</template>
</border6>
</div>
@ -23,11 +27,13 @@ import { EDataPerson, EDataPersonItem } from "@/type/Mechanics";
import border6 from "@/components/borderBox/border6.vue";
const { proxy } = getCurrentInstance() as any;
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let { t } = useI18n();
let props = defineProps<{
title: string;
handle: 't' | 'f'
}>();
let inguagu = ref();
let inguagud = ref();
let refborder6 = ref();
@ -90,6 +96,9 @@ function setchartWH(width: any, height: any) {
inguagu.value.style.height = height + "px";
inguagu.value.style.width = width - 30 + "px";
inguagud.value.style.height = height + "px";
inguagud.value.style.width = width - 30 + "px";
refborder6.value.resetWH();
if (echartsData.inguagu.box) {
echartsData.inguagu.box.resize();
@ -110,5 +119,24 @@ defineExpose({
box-sizing: border-box;
padding: 10px;
}
.empty {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
justify-content: center;
}
.empty-title {
position: absolute;
top:10px;
left: 20px;
font-size: 22px;
font-weight: bolder;
color: white;
}
</style>

452
src/views/Mechanics/child/son/index.vue
View File

@ -8,248 +8,260 @@
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div :class="$style['container']">
<div class="header">
<!-- <div class="title" @click="backrouter"> -->
<div class="title">
<header2 :width="'100%'" :height="'100px'" :title="t('messages.machineryDevStatus')" :titleTip="[]" :typeFun="['comback','time']" :alarmType="['']"></header2>
</div>
</div>
<div class="content" ref="Acontent" >
<div class="left ">
<toptip ref="toptip1ref1" :type="1"> </toptip>
<toptip ref="toptip1ref2" :type="1"> </toptip>
<toptip ref="toptip1ref3" :type="1"> </toptip>
<toptip ref="toptip1ref4" :type="2"> </toptip>
<toptip ref="toptip1ref5" :type="2"> </toptip>
<toptip ref="toptip1ref6" :type="2"> </toptip>
</div>
<div class="center ">
<TopImg ref="imgRef"></TopImg>
<!-- <water1 ref="progressref1" title="MTBF" :data="0"></water1> -->
<!-- <water1 ref="progressref2" title="MTTR" :data="0"></water1> -->
<MTTF ref="MTTFref" title="MTTF"></MTTF>
</div>
<div class="right ">
<timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')"></timeguagu>
<statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
</div>
<div :class="$style['container']">
<div class="header">
<!-- <div class="title" @click="backrouter"> -->
<div class="title">
<header2 :width="'100%'" :height="'100px'" :title="t('messages.machineryDevStatus')" :titleTip="[]"
:typeFun="['comback', 'time']" :alarmType="['']"></header2>
</div>
</div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
import header2 from '@/components/headerBox/header2.vue'
import toptip from './components/toptip1.vue'
import timeguagu from './components/timeguagu.vue'
import progress from './components/progress.vue'
import water1 from './components/water.vue'
import TopImg from './components/imageTop.vue'
import MTTF from './components/MTTF.vue'
import {imgurlAddXhr} from '@/utils/devSever'
import statuscontrast from './components/contrast.vue'
import {calcWH} from '@/components/ts/selfAdaption'
import { gatdeviceStatusInfoMF } from "@/http/Mechanics";
import { useRoute,useRouter } from "vue-router";
import {useMechanicsStore} from "@/store/module/Mechanics"
<div class="content" ref="Acontent">
<div class="left ">
<toptip ref="toptip1ref1" :type="1"> </toptip>
<toptip ref="toptip1ref2" :type="1"> </toptip>
<toptip ref="toptip1ref3" :type="1"> </toptip>
<toptip ref="toptip1ref4" :type="2"> </toptip>
<toptip ref="toptip1ref5" :type="2"> </toptip>
<toptip ref="toptip1ref6" :type="2"> </toptip>
</div>
<div class="center ">
<TopImg ref="imgRef"></TopImg>
<!-- <water1 ref="progressref1" title="MTBF" :data="0"></water1> -->
<!-- <water1 ref="progressref2" title="MTTR" :data="0"></water1> -->
<MTTF ref="MTTFref" title="MTTF"></MTTF>
</div>
<div class="right ">
<timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')" :handle="handle"></timeguagu>
<statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
import header2 from '@/components/headerBox/header2.vue'
import toptip from './components/toptip1.vue'
import timeguagu from './components/timeguagu.vue'
import progress from './components/progress.vue'
import water1 from './components/water.vue'
import TopImg from './components/imageTop.vue'
import MTTF from './components/MTTF.vue'
import { imgurlAddXhr } from '@/utils/devSever'
import statuscontrast from './components/contrast.vue'
import { calcWH } from '@/components/ts/selfAdaption'
import { gatdeviceStatusInfoMF } from "@/http/Mechanics";
import { useRoute, useRouter } from "vue-router";
import { useMechanicsStore } from "@/store/module/Mechanics"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let { t } = useI18n();
const store = useMechanicsStore()
const route=useRoute()
const router=useRouter()
const route = useRoute()
const router = useRouter()
let Acontent=ref()
let time=ref(null)
let toptip1ref1=ref()
let toptip1ref2=ref()
let toptip1ref3=ref()
let toptip1ref4=ref()
let toptip1ref5=ref()
let toptip1ref6=ref()
let imgRef = ref()
let timeguaguref=ref()
// let progressref1=ref()
// let progressref2=ref()
let MTTFref=ref()
let contrastref=ref()
let Acontent = ref()
let time = ref(null)
let toptip1ref1 = ref()
let toptip1ref2 = ref()
let toptip1ref3 = ref()
let toptip1ref4 = ref()
let toptip1ref5 = ref()
let toptip1ref6 = ref()
let imgRef = ref()
let timeguaguref = ref()
// let progressref1=ref()
// let progressref2=ref()
let MTTFref = ref()
let contrastref = ref()
// let {timeHtml}=useNowTime()
// let arr=reactive(null)
let size=reactive({
oWidth:0,
oHeight:0
});
function WH(div:HTMLElement){
let a=calcWH(div.offsetHeight,div.offsetWidth,24,24,0)
size.oWidth=a.oWidth
size.oHeight=a.oHeight
toptip1(a.oWidth*4-50,a.oHeight*8-50)
let size = reactive({
oWidth: 0,
oHeight: 0
});
type handleType = 't' | 'f'
const handle = ref<handleType>('t');
function WH(div: HTMLElement) {
let a = calcWH(div.offsetHeight, div.offsetWidth, 24, 24, 0)
size.oWidth = a.oWidth
size.oHeight = a.oHeight
toptip1(a.oWidth * 4 - 50, a.oHeight * 8 - 50)
// toptip2(a.oWidth*3,a.oHeight*2)
guagebox(a.oWidth*8-50,a.oHeight*12-50)
contrasttbox(a.oWidth*8-50,a.oHeight*12-50)
}
function toptip1(width:any,height:any){
if(!toptip1ref1.value&&!toptip1ref2.value) return
if(!toptip1ref3.value&&!toptip1ref4.value&&!toptip1ref5.value&&!toptip1ref6.value) return
toptip1ref1.value.setchartWH(width,height)
toptip1ref2.value.setchartWH(width,height)
toptip1ref3.value.setchartWH(width,height)
toptip1ref4.value.setchartWH(width,height)
toptip1ref5.value.setchartWH(width,height)
toptip1ref6.value.setchartWH(width,height)
}
function guagebox(width:any,height:any){
if(!MTTFref.value&&!imgRef.value) return
imgRef.value.setchartWH(width,height)
// progressref1.value.setchartWH(width,height)
// progressref2.value.setchartWH(width,height)
MTTFref.value.setchartWH(width,height)
}
function contrasttbox(width:any,height:any){
if(!contrastref.value&&!timeguaguref.value) return
timeguaguref.value.setchartWH(width,height)
contrastref.value.setchartWH(width,height)
}
async function gatdeviceStatusInfoMFfun(){
let result:any = await gatdeviceStatusInfoMF({id:route.params.dev})
if(result.code==200){
setdata(result.data)
}
}
function setdata(val:any){
let data={
name:val.name, //设备名称
status:val.status=='H_E_STOP'?t('messages.STOP'):val.status=='H_OFF'?t('messages.Standby'):val.status=='H_ON'?t('messages.work'):t('messages.halt'), //设备状态
starttime:val.ontime,//启动时长
endtime:val.offtime,//待机时长
stoptime:val.stoptime,//急停时长
data:'2020-05-06',//采购日期
src:imgurlAddXhr(val.data),//设备图片
timeguagu: Math.round(Math.abs((val.ontime)/(val.ontime+val.offtime+val.stoptime)*100)) ||0,//时间稼动率
MTBF:2724,//MTBF
MTTR:169,//MTTR
MTTF:2555,//MTTF
guagebox(a.oWidth * 8 - 50, a.oHeight * 12 - 50)
contrasttbox(a.oWidth * 8 - 50, a.oHeight * 12 - 50)
}
toptip1ref1.value.setData({title:t('messages.DevName'),value:data.name})
toptip1ref2.value.setData({title:t('messages.procureDate'),value:data.data})
toptip1ref3.value.setData({title:t('messages.DevStatus'),value:data.status})
toptip1ref4.value.setData({title:t('messages.workTime'),value:data.starttime})
toptip1ref5.value.setData({title:t('messages.StandbyTime'),value:data.endtime})
toptip1ref6.value.setData({title:t('messages.haltTime'),value:data.stoptime})
timeguaguref.value.setData(data.timeguagu)
imgRef.value.setData(data.src)
// progressref1.value.setData(data.MTBF)
// progressref2.value.setData(data.MTTR)
MTTFref.value.setData({title:data.name,value:{MTTF:data.MTTF,MTBF:data.MTBF,MTTR:data.MTTR}})
contrastref.value.setData({title:[t('messages.firing'),t('messages.Standby'),t('messages.STOP')],value:[data.starttime,data.endtime,data.stoptime]})
function toptip1(width: any, height: any) {
if (!toptip1ref1.value && !toptip1ref2.value) return
if (!toptip1ref3.value && !toptip1ref4.value && !toptip1ref5.value && !toptip1ref6.value) return
toptip1ref1.value.setchartWH(width, height)
toptip1ref2.value.setchartWH(width, height)
toptip1ref3.value.setchartWH(width, height)
toptip1ref4.value.setchartWH(width, height)
toptip1ref5.value.setchartWH(width, height)
toptip1ref6.value.setchartWH(width, height)
}
function guagebox(width: any, height: any) {
if (!MTTFref.value && !imgRef.value) return
imgRef.value.setchartWH(width, height)
// progressref1.value.setchartWH(width,height)
// progressref2.value.setchartWH(width,height)
MTTFref.value.setchartWH(width, height)
}
function contrasttbox(width: any, height: any) {
if (!contrastref.value && !timeguaguref.value) return
timeguaguref.value.setchartWH(width, height)
contrastref.value.setchartWH(width, height)
}
async function gatdeviceStatusInfoMFfun() {
let result: any = await gatdeviceStatusInfoMF({ id: route.params.dev })
handle.value = result.data.handle
if (result.code == 200) {
setdata(result.data)
}
function backrouter(){
router.push({
name:'Mechanicschild',
params:{
id:store.page||route.params.id
}
function setdata(val: any) {
let data = {
name: val.name, //设备名称
status: val.status == 'H_E_STOP' ? t('messages.STOP') : val.status == 'H_OFF' ? t('messages.Standby') : val.status == 'H_ON' ? t('messages.work') : t('messages.halt'), //设备状态
starttime: val.ontime,//启动时长
endtime: val.offtime,//待机时长
stoptime: val.stoptime,//急停时长
data: '2020-05-06',//采购日期
src: imgurlAddXhr(val.data),//设备图片
timeguagu: Math.round(Math.abs((val.ontime) / (val.ontime + val.offtime + val.stoptime) * 100)) || 0,//时间稼动率
MTBF: 2724,//MTBF
MTTR: 169,//MTTR
MTTF: 2555,//MTTF
}
toptip1ref1.value.setData({ title: t('messages.DevName'), value: data.name })
toptip1ref2.value.setData({ title: t('messages.procureDate'), value: data.data })
toptip1ref3.value.setData({ title: t('messages.DevStatus'), value: data.status })
toptip1ref4.value.setData({ title: t('messages.workTime'), value: data.starttime })
toptip1ref5.value.setData({ title: t('messages.StandbyTime'), value: data.endtime })
toptip1ref6.value.setData({ title: t('messages.haltTime'), value: data.stoptime })
timeguaguref.value.setData(data.timeguagu)
imgRef.value.setData(data.src)
// progressref1.value.setData(data.MTBF)
// progressref2.value.setData(data.MTTR)
MTTFref.value.setData({ title: data.name, value: { MTTF: data.MTTF, MTBF: data.MTBF, MTTR: data.MTTR } })
contrastref.value.setData({ title: [t('messages.firing'), t('messages.Standby'), t('messages.STOP')], value: [data.starttime, data.endtime, data.stoptime] })
}
function backrouter() {
router.push({
name: 'Mechanicschild',
params: {
id: store.page || route.params.id
}
})
}
//
onMounted(() => {
let contentBox=Acontent.value
// let Timedombox=Timedom.value
window.document.title=t('messages.machineryDevStatus')
WH(contentBox)
}
//
onMounted(() => {
let contentBox = Acontent.value
// let Timedombox=Timedom.value
window.document.title = t('messages.machineryDevStatus')
WH(contentBox)
window.addEventListener('resize',()=>{
if(time.value){
clearTimeout(time.value)
time.value=null
}
time.value = setTimeout(() => {WH(contentBox)
}, 1000);
})
gatdeviceStatusInfoMFfun()
window.addEventListener('resize', () => {
if (time.value) {
clearTimeout(time.value)
time.value = null
}
time.value = setTimeout(() => {
WH(contentBox)
}, 1000);
})
gatdeviceStatusInfoMFfun()
})
onUnmounted(() => {
clearTimeout(time)
})
onUnmounted(() => {
clearTimeout(time)
})
</script>
</script>
<style module>
.container {
height: 1080px;
<style module>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
</style>
color: #20aec5;
background-color: #100c2a;
}
</style>
<style scoped>
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.title > h1 {
font-size: 30px;
position: absolute;
top: 10px;
}
.header{
position: relative;
}
.header p{
position: absolute;
right: 50px;
bottom: 20px;
font-size:20px;
}
.content{
width:100%;
--header:100px;
height:calc(1080px - var(--header));
display:flex;
}
.center{
margin: 0 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.left{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
}
<style scoped>
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.right{
margin-right: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
</style>
.title>h1 {
font-size: 30px;
position: absolute;
top: 10px;
}
.header {
position: relative;
}
.header p {
position: absolute;
right: 50px;
bottom: 20px;
font-size: 20px;
}
.content {
width: 100%;
--header: 100px;
height: calc(1080px - var(--header));
display: flex;
}
.center {
margin: 0 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.left {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
}
.right {
margin-right: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
</style>
<style>
body {
<style>
body {
/* --content:calc(100vh - var(--header)) */
overflow: hidden !important;
-ms-overflow-style: none; /* IE + Edge */
scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
display: none;
}
</style>
/* --content:calc(100vh - var(--header)) */
overflow: hidden !important;
-ms-overflow-style: none;
/* IE + Edge */
scrollbar-width: none;
/* Firefox */
}
::-webkit-scrollbar {
display: none;
}</style>

1
src/views/Mechanics/components/ringChart.vue
View File

@ -45,6 +45,7 @@ const init = () => {
fontSize: 16,
},
},
color:['#7CFFB2','#4D9BFF'],
series: [
{
name: "",

14
src/views/Mechanics/components/scrollBoard.vue
View File

@ -27,7 +27,7 @@
</template>
<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { devListType } from "@/type/InPlantProducts";
import { useRouter } from "vue-router"
import { useI18n } from 'vue-i18n'
@ -35,6 +35,7 @@ import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
let { t } = useI18n();
const prop = defineProps({
config: Object,
data: <any>Array
})
const router = useRouter()
//弹窗文本
@ -43,6 +44,7 @@ let tipcontent = ref(null)
let visible = ref(false)
//存储弹窗dom
let triggerRef = ref(null)
let devList = ref(null)
/**
* @函数功能: 鼠标移入组件方法
* @param {*} value
@ -57,6 +59,15 @@ const dvMouseover = (value) => {
}
};
watch(
() => prop.data,
(val) => {
devList.value.updateRows(prop.data)
},
{ deep: true,immediate:false }
);
/**
* 点击表格事件
*/
@ -95,7 +106,6 @@ const dvmouseleave = () => {
tipcontent.value = null
visible.value = false
};
</script>
<style scoped>

35
src/views/Mechanics/indexNew.vue
View File

@ -16,7 +16,7 @@
<div style="width: 100%;height: 100%;">
<h2 class="module-header">
<DecorationFadeOut>
&nbsp;设备总览&nbsp;
&nbsp;设备总览&nbsp;
</DecorationFadeOut>
</h2>
<div class="module-content">
@ -42,7 +42,7 @@
</div>
<div style="width: 100%; height: 78%;">
<border13>
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
<scrollBoard ref="DvScrollBoard" :data="scrollBoardConfig_data" :config="scrollBoardConfig"></scrollBoard>
</border13>
</div>
</el-col>
@ -86,13 +86,14 @@ const store = useMechanicsStore();
let Acontent = ref();
let headerref = ref();
let DvScrollBoard = ref()
let DevOverviewData = ref([])
let devFaultTipData = ref([])
let devStatusTipData = ref([])
let ringData = ref([])
let scrollBoardConfig = reactive({
header: ['序号', '设备名称', '所属车间', '设备状态', '稼动率', '故障率'],
header: ['序号', '设备名称', '所属车间', '设备状态', '稼动率'],//, '故障率'
headerBGC: 'rgb(52, 105, 243)',
oddRowBGC: '#100c2a',
evenRowBGC: '#100c2a',
@ -102,6 +103,7 @@ let scrollBoardConfig = reactive({
data: [],
rawData: []
})
let scrollBoardConfig_data = ref([])
let gatewayData = ref([])
let devNumTimer: any = null
//车间列表
@ -128,6 +130,26 @@ function getWebsocket(val) {
store.changegatewaynum(data.msg);
// store.changePM(data.msg)
}
if (data.type == "DeviceStatusInMF") {
let compare = {
H_OFF: '待机',
H_ON: '工作',
H_IDLE: '停机',
H_STOP: '急停',
H_E_STOP: '急停',
}
let id = data.msg.id
let status = data.msg.status
let dataIndex = scrollBoardConfig.rawData.findIndex((item, index) => {
return item.id == id
})
if (scrollBoardConfig_data.value[dataIndex][3] != compare[status]) {
scrollBoardConfig_data.value[dataIndex][3] = compare[status] ? compare[status] : '停机'
}
}
} catch (err) {
console.log(err);
}
@ -165,16 +187,17 @@ async function reqDeviceTotelListMFfun() {
H_IDLE: '停机',
H_STOP: '急停',
}
scrollBoardConfig.data = result.data.map((item, index) => {
scrollBoardConfig_data.value = result.data.map((item, index) => {
return [
index + 1,
item.name,
item.dept,
compare[item.status] ? compare[item.status] : '停机',
item.activation + '%',
item.failure + '%'
item.activation,
// item.failure + '%'
]
})
scrollBoardConfig.data = JSON.parse(JSON.stringify(scrollBoardConfig_data.value))
scrollBoardConfig.rawData = result.data;
}
}

232
src/views/MicEnvironment/components/humidity.vue Normal file
View File

@ -0,0 +1,232 @@
<template>
<border13>
<div class="container">
<div class="echartbox" ref="humiture"></div>
</div>
</border13>
</template>
<script setup lang='ts'>
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
import border13 from '@/components/border/Border13.vue'
const { proxy } = getCurrentInstance() as any;
const store = useSocketStore();
let index = 0;
let humiture = ref();
let chart = null
// const props = defineProps<{
// top: any;
// bottom: any;
// }>();
const borderColor = ["#E43961","#E43961"]
function init() {
if (!chart) {
chart = proxy.$echarts.init(humiture.value, 'dark');
}
let option = {
title: {
text: store.humiture.name,
show: true,
textStyle: {
color: "#fff",
fontSize: 18,
},
top: '2%'
},
grid: {
// 让图表占满容器
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
},
series: [
{
type: "gauge",
center: ["50%", "90%"],
startAngle: 190,
endAngle: -10,
radius: "50%",
min: -30,
max: 50,
splitNumber: 10,
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[0.575, '#1089E7'],
[0.725, '#7CFFB2'],
[1, '#FF6E76']
]
}
},
//刻度线
axisTick: {
show:false,
distance: -5,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 0,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
//表刻度值
axisLabel: {
distance: 10,
color: '#999',
fontSize: 10
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
// width: '10%',
// lineHeight: 5,
// borderRadius: 8,
offsetCenter: [0, '25%'],
fontSize: 15,
// fontWeight: 'bolder',
formatter: '{value} °C',
color: 'inherit'
},
data: [
{
value: store.humiture.temp
}
]
},
{
type: "gauge",
center: ["50%", "55%"],
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
progress: {
show: false,
width: 5
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
//刻度轴宽
axisLine: {
lineStyle: {
width: 10,
color: [
[0.4, '#FF6E76'],
[0.7, '#7CFFB2'],
[1, '#1089E7']
]
}
},
//刻度线
axisTick: {
distance: 0,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999'
}
},
//刻度线
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: 15,
color: '#999',
fontSize: 12
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, '15%'],
fontSize: 20,
formatter: '{value} %RH',
color: 'inherit'
},
data: [
{
value: store.humiture.humidity
}
]
},
],
};
chart.setOption(option);
}
watch(
() => store.humiture,
(newData) => {
init()
},
{ deep: true }
);
onMounted(() => {
init();
});
onUnmounted(() => {
});
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
}
.errList {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.echartbox {
width: 100%;
height: 100%;
}
</style>

125
src/views/MicEnvironment/components/lineChart.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="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
}
}>()
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: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
},
series: data
};
myChart.setOption(option);
}
watch(() => prop.calc.data, (newVal) => {
data = newVal
myChart.setOption({
series: data
})
})
onMounted(() => {
init()
})
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
box-sizing: border-box;
font-size: 16px;
color: #fff;
box-shadow: rgb(2, 106, 181) 0px 8px 8px;
}
.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>

225
src/views/MicEnvironment/components/pm.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<border13>
<div class="container">
<div class="echartbox" ref="dust">
</div>
</div>
</border13>
</template>
<script setup lang='ts'>
import { getCurrentInstance, markRaw, onMounted, onUnmounted, reactive, ref, watch,computed } from "vue";
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
import border13 from '@/components/border/Border13.vue'
import { number } from "echarts/core";
const { proxy } = getCurrentInstance() as any;
const store = useSocketStore();
let index = 0;
let dust = ref();
let chart = ref(null)
const props = defineProps({
pm10limit:{
type:Number,
default:150
},
pm25limit:{
type:Number,
default:75
}
})
const borderColor = ["#E43961","#E43961"]
function init() {
if (!chart.value) {
chart.value = proxy.$echarts.init(dust.value, 'dark');
}
let option = {
title: {
text: store.pm.name,
show: true,
textStyle: {
color: "#fff",
fontSize: 18,
},
top: '2%'
},
grid: {
// 让图表占满容器
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
},
series: [
{
type: "gauge",
center: ["50%", "90%"],
startAngle: 190,
endAngle: -10,
radius: "50%",
min: 0,
max: 100,
splitNumber: 10,
pointer: {
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
length: "12%",
width: 10,
offsetCenter: [0, "-40%"],
itemStyle: {
color: "inherit",
},
},
axisLine: {
lineStyle: {
width: 8,
color: [
[0.35, "#7CFFB2"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
axisTick: {
distance: 0,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#999",
},
},
splitLine: {
distance: 5,
length: 8,
lineStyle: {
width: 3,
color: "#999",
},
},
axisLabel: {
distance: 12,
color: "#999",
fontSize: 10,
},
anchor: {
show: false,
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 20,
borderRadius: 8,
offsetCenter: [0, "20%"],
fontSize: 15,
fontWeight: "bolder",
formatter: "{value} μg/m3",
color: "inherit",
},
title: {
// show: false,
offsetCenter: [0, "-20%"],
},
data: [
{
value: store.pm.pm25,
name: "PM2.5",
},
],
},
{
type: "gauge",
center: ["50%", "55%"],
startAngle: 200,
endAngle: -20,
min: 0,
max: 200,
axisLine: {
lineStyle: {
width: 10,
color: [
[0.35, "#7CFFB2"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
itemStyle: {
color: "inherit",
},
},
axisTick: {
distance: -10,
length: 6,
lineStyle: {
color: "#fff",
width: 2,
},
},
splitLine: {
distance: -10,
length: 10,
lineStyle: {
color: "#fff",
width: 4,
},
},
axisLabel: {
color: "inherit",
distance: 20,
fontSize: 10,
},
detail: {
valueAnimation: true,
offsetCenter: [0, "20%"],
fontSize: 20,
formatter: "{value} μg/m3",
color: "inherit",
},
title: {
offsetCenter: [0, "-50%"],
},
data: [
{
value: store.pm.pm10,
name: "PM10",
},
],
},
],
};
chart.value.setOption(option);
}
watch(
() => store.pm,
(newData) => {
init()
},
{ deep: true }
);
onMounted(() => {
init();
});
onUnmounted(() => {
})
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
}
.echartbox {
width: 100%;
height: 100%;
}
.icon-red {
color: #e43961;
animation: redstart 2s infinite;
font-size: 14px;
/* position: relative; */
/* top: -15px; */
}
</style>

199
src/views/MicEnvironment/components/verticalNum.vue Normal file
View File

@ -0,0 +1,199 @@
<!--
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-13 08:22:35
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div ref="numBox1" :style="{ height: '100%', width: '100%' }">
<border6 ref="refborder3">
<template v-slot>
<div class="box" ref="classBox1">
<h2>{{ props.title }}</h2>
<h5 v-if="props.unit">{{ `${t('messages.NormalValue')}0-${props.quota}${props.unit}` }}</h5>
<h5 v-else>&nbsp; </h5>
<i :class="['iconfont', 'iconbig-size', icon, iconcolor]"></i>
<p class="unit" v-if="props.unit && item.status">
<p class="num">{{ item.val }}&nbsp;</p>
<span>{{ props.unit }}</span>
</p>
<p class="unit" v-else>
<p class="num">&nbsp;</p>
<span>&nbsp;</span>
</p>
</div>
</template>
</border6>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
import border6 from "@/components/borderBox/border6.vue";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
type itemType = {
'id': string;
"name": string;
"val": string;
"type": string;
"status": boolean };
let props = defineProps<{
title: string;
item:itemType;
unit:string;
quota:number | null;
iconname:string;
}>();
let i = ref(0)
let icon = computed(() => {
return props.iconname
});
let iconcolor = computed(() => {
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
if (props.item) {
return props.item.status ? +props.item.val > +props.quota ? "icon-red" : "icon-blue" : "icon-grey";
} else {
return "icon-grey"
}
});
let refborder3 = ref();
let numBox1 = ref();
const classBox1 = ref()
onMounted(() => {
});
onUnmounted(() => {
})
</script>
<style scoped>
@import "@/assets/css/iconfont.css";
.box {
height: 50%;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.box>h5 {
font-size: 15px;
/* margin-bottom: 20px; */
margin-top: 20px;
}
/* .contentbox{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
} */
h2 {
color: #fff;
}
p {
color: #fff;
}
.icon-red {
font-size: 100px;
color: #E43961;
animation: redstart 2s infinite;
/* position: relative; */
/* top: -15px; */
}
.icon-blue {
font-size: 100px;
color: #20AEC5;
/* position: relative; */
/* top: -15px; */
}
.icon-grey {
color: rgb(167, 166, 189);
font-size: 100px;
/* position: relative; */
/* top: -15px; */
}
.iconsmall-size {
font-size: 20px;
}
.num {
font-size: 16px;
}
.unit {
display: flex;
justify-content: center;
align-items: center;
vertical-align: top;
font-size: 16px;
height: 5;
width: 100px;
}
.box>h2 {
font-size: 20px;
position: absolute;
top: 20px;
left: 20px;
}
.icontip {
display: flex;
margin-top: -60px;
width: 100px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 60px;
}
.icontipBox li {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 5px;
}
.icontipBox li p:nth-child(1) {
width: 40%;
text-align: left;
}
.icontipBox li p:nth-child(2) {
flex: 1;
}
@keyframes redstart {
0% {}
50% {
text-shadow: #fff 1px 0 10px;
}
100% {}
}
</style>

334
src/views/MicEnvironment/index.vue Normal file
View File

@ -0,0 +1,334 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
:titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content" ref="Acontent">
<div class="top">
<div v-for="items in store.verticalArr" class="top-box-item">
<verticalNum :title="items.name" :iconname="items.iconname" :item="items.item" :unit="items.unit"
:quota="items.quota"></verticalNum>
</div>
<div class="top-box-item">
<pm :pm10limit="150" :pm25limit="75"></pm>
</div>
<div class="top-box-item">
<humidity></humidity>
</div>
</div>
<div class="bottom">
<lineChart v-for="(calc, index) in calcArr"
:style="{ width: width + 'px', height: height + 'px', 'min-width': 'calc(25% - 20px)' }" :calc="calc">
</lineChart>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import header2 from '@/components/headerBox/header2.vue'
import verticalNum from './components/verticalNum.vue'
import pm from './components/pm.vue';
import humidity from './components/humidity.vue';
import lineChart from './components/lineChart.vue';
import { getSensorByDeptId } from '@/http/MicrofactoryDev'
import { getCurrent24Trend } from '@/http/Trend/index'
import { onMounted, onUnmounted, reactive, ref } from "vue"
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useSocketStore();
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
},
{
color: "#A7A6BD",
name: t('messages.disconnection'),
},
];
const sensor_config: any = {
'Noise_Reg': { 'icon': 'icon-shengyin', 'unit': 'dB', 'quota': 80, 'name': '噪声监测传感器', 'type': 'noise' },
'Smoke_Reg': { 'icon': 'icon-yanwubaojingqi', 'unit': 'ppm', 'quota': 100, 'name': '烟雾监测传感器', 'type': 'smoke' },
'CH2O': { 'icon': 'icon-app_icons--', 'unit': 'mg/m³', 'quota': 0.08, 'name': '甲醛监测传感器', 'type': 'CH2O' },
'TVOC': { 'icon': 'icon-TVOC-Outlined', 'unit': 'mg/m³', 'quota': 0.5, 'name': 'TVOC监测传感器', 'type': 'TVOC' },
'Methane_Reg': { 'icon': 'icon-ranqi', 'unit': '', 'quota': 0, 'name': '燃气监测传感器', 'type': 'Gas' },
}
let width = ref(1500)
let height = ref(580)
let trendObj = {}
let sensor_arr = [];
const sensor_keys = Object.keys(sensor_config)
let noise_id = ''
let timer = null;
//趋势图
type calcType = {
name: string,
math: {
key: string,
value: {
max: number,
min: number,
avg: number,
data: any[]
}
}[],
data: any[]
}
let calcArr = ref<calcType[]>()
async function getSensorData() {
let res: any = await getSensorByDeptId({ ids: '20' })
if (res.code === 200) {
let data = res.data
let temp_vertical = []
let humiture = { "devId": "", "name": "温湿度", "temp": "", "humidity": "" }
let pm = { "devId": "", "name": "粉尘", "pm25": "", "pm10": "" }
data.forEach(element => {
if (sensor_keys.includes(element.type)) {
sensor_arr.push(element.id)
temp_vertical.push({
id: element.id,
name: sensor_config[element.type].name,
iconname: sensor_config[element.type].icon,
item: { "name": element.name, "val": element.data, "type": sensor_config[element.type].type, "status": JSON.parse(element.status) },
unit: sensor_config[element.type].unit,
quota: sensor_config[element.type].quota,
})
if (sensor_config[element.type].type == 'noise') {
noise_id = element.id
trendObj[element.id] = sensor_config[element.type].unit
}
if (sensor_config[element.type].type == 'CH2O') {
trendObj[element.id] = sensor_config[element.type].unit
}
} else {
if (element.type == 'HIGH_PM10_Reg') {
pm.devId = element.id
pm.pm10 = element.data
trendObj[element.id] = 'μg/m3'
}
if (element.type == 'HIGH_PM25_Reg') {
pm.devId = element.id
pm.pm25 = element.data
}
if (element.type == 'AirHumi_Reg') {
humiture.devId = element.id
humiture.humidity = element.data
trendObj[element.id] = '℃/%RH'
}
if (element.type == 'AirTemp_Reg') {
humiture.devId = element.id
humiture.temp = element.data
}
}
});
store.setVerticalArr(temp_vertical)
store.sethumiture(humiture)
store.setpm(pm)
get24Trend()
}
}
async function get24Trend() {
let trendIds = Object.keys(trendObj).toString()
let trend: any = await getCurrent24Trend(trendIds)
if (trend.code === 200) {
let tempData = {}
trend.data.forEach((item: any) => {
if (trendObj[item.id]) {
item.name = item.name + '(' + trendObj[item.id] + ')'
}
if (tempData.hasOwnProperty(item.id)) {
let seriesData: any = {
name: item.type,
type: 'line',
showSymbol: false,
data: item.date.map((key, value) => [key, item.value[value]]),
smooth: true,
}
tempData[item.id].data.push(seriesData)
tempData[item.id].math.push({
key: item.type,
value: {
max: item.max,
min: item.min,
avg: item.avg
}
})
} else {
tempData[item.id] = {
name: item.name,
data: [{
name: item.type,
type: 'line',
showSymbol: false,
data: item.date.map((key, value) => [key, item.value[value]]),
smooth: true,
}],
math: [{
key: item.type,
value: {
max: item.max,
min: item.min,
avg: item.avg
}
}]
}
}
})
let data: any = Object.values(tempData)
calcArr.value = data
width.value = 1900 / data.length - (data.length - 1) * 20;
}
}
function getWebsocket(val) {
try {
let data = JSON.parse(val);
//燃气监测
if (data.type == "Gas") {
if (sensor_arr.includes(data.msg.devId)) {
store.changeVerticalArr({ devId: data.msg.devId, val: data.msg.methane.value, type: "Gas", status: true })
}
}
//甲醛TVOC
if (data.type == "TVOC_CH2O") {
if (sensor_arr.includes(data.msg.CH2O.devId)) {
store.changeVerticalArr({ devId: data.msg.CH2O.devId, val: data.msg.CH2O.value, type: "CH2O", status: true })
store.changeVerticalArr({ devId: data.msg.TVOC.devId, val: data.msg.TVOC.value, type: "TVOC", status: true })
}
}
//声音
if (data.type == "noise") {
data.msg.listData.forEach(item => {
if (item.devId == noise_id) {
store.changeVerticalArr({ devId: item.devId, val: item.value, type: "noise", status: item.status })
}
})
}
//烟雾传感器
if (data.type == "smoke") {
if (sensor_arr.includes(data.msg.devId)) {
store.changeVerticalArr({ devId: data.msg.devId, val: data.msg.smoke.value, type: "smoke", status: true })
}
}
//温湿度
if (data.type == "humiture") {
data.msg.Humiture.forEach(item => {
if (item.devId == store.humiture.devId) {
store.changehumiture(item)
}
})
}
//粉尘
if (data.type == "dust") {
if (data.msg.devId == store.pm.devId) {
store.changePm(data.msg)
}
}
} catch (err) {
console.log(err, "报错了大哥", console.log(val) );
}
}
function errWebsocket(val) {
// console.log(val);
}
onMounted(() => {
getSensorData()
connectWebsocket(null, null, getWebsocket, errWebsocket);
timer = setInterval(() => {
get24Trend()
}, 1000 * 60 * 10)
})
onUnmounted(() => {
clearInterval(timer)
closeWebsocket()
})
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.title>h1 {
font-size: 30px;
position: absolute;
top: 10px;
}
.header {
position: relative;
}
.header p {
position: absolute;
right: 50px;
bottom: 20px;
font-size: 20px;
}
.content {
width: 100%;
--header: 150px;
height: calc(1080px - var(--header))
}
.top {
display: flex;
width: 100%;
height: 330px;
}
.top-box-item {
width: 14%;
height: 100%;
margin: 0 5px 10px 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.bottom {
width: 100%;
height: 600px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
padding: 5px;
}
</style>

86
src/views/MicroExhibition/child/Left1.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="left1">
<Pan class="pan1"></Pan>
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{title}}</div>
<div class="val">{{ val }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
type: String,
default: '机架号'
},
val: {
type: String,
default: 'RP2011001#'
}
})
</script>
<style scoped>
.left1 {
width: 247px;
height: 100%;
position: relative;
}
.pan1 {
position: absolute;
width: 247px;
height: 248px;
left: 0px;
top: 170px;
}
.s1 {
position: absolute;
width: 320px;
height: 6px;
background-image: url('./img/u308p000.svg');
left: -31px;
top: 544px;
transform: rotate(90deg);
}
.h1 {
position: absolute;
width: 140px;
height: 6px;
background-image: url('./img/u308p001.svg');
left: 125px;
top: 701px;
}
.s2 {
position: absolute;
width: 158px;
height: 10px;
background-image: url('./img/u308p002.svg');
left: 183px;
top: 773px;
transform: rotate(90deg);
}
.title {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #B2EDED;
top: 410px;
left: 56px;
}
.val {
width: 100%;
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 28px;
color: #B2EDED;
top: 229px;
left: 0;
}
</style>

86
src/views/MicroExhibition/child/Left2.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="left1">
<Pan class="pan1"></Pan>
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
type: String,
default: '设备状态'
},
val: {
type: String,
default: '工作中'
}
})
</script>
<style scoped>
.left1 {
width: 247px;
height: 100%;
position: relative;
}
.pan1 {
position: absolute;
width: 247px;
height: 248px;
left: 0px;
top: 0px;
}
.s1 {
position: absolute;
width: 258px;
height: 6px;
background-image: url('./img/u306p000.svg');
left: 6px;
top: 343px;
transform: rotate(90deg);
}
.h1 {
position: absolute;
width: 100px;
height: 6px;
background-image: url('./img/u306p001.svg');
left: 132px;
top: 470px;
}
.s2 {
position: absolute;
width: 124px;
height: 6px;
background-image: url('./img/u306p002.svg');
left: 169px;
top: 528px;
transform: rotate(90deg);
}
.title {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #B2EDED;
top: 240px;
left: 44px;
}
.val {
width: 100%;
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 28px;
color: #B2EDED;
top: 55px;
left: 0;
}
</style>

93
src/views/MicroExhibition/child/LineChart.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div ref="LChartRef"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
const prop = defineProps({
config: {
type: Object,
default: {
title:''
}
}
})
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = ()=>{
charts = proxy.$echarts.init(LChartRef.value, 'dark')
let option = {
title: {
text: prop.config.title,
textStyle:{
fontSize: 30,
color: '#20aec5'
},
left: '20px'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
charts.setOption(option);
}
onMounted(() => {
setCharts()
})
</script>
<style scoped>
.cc {
width: 400px;
height: 400px;
}
</style>

27
src/views/MicroExhibition/child/Pan.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="pan">
<div class="light"></div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
.pan {
position: relative;
width: 247px;
height: 248px;
background-image: url('./img/u356.png');
background-size: 100% 100%;
}
.light {
position: absolute;
width: 109px;
height: 52px;
left: 69px;
top: 98px;
background-image: url('./img/u25.png');
background-size: 100% 100%;
}
</style>

86
src/views/MicroExhibition/child/Right1.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="left1">
<Pan class="pan1"></Pan>
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
type: String,
default: '压脚次数'
},
val: {
type: String,
default: '10次'
}
})
</script>
<style scoped>
.left1 {
width: 247px;
height: 100%;
position: relative;
}
.pan1 {
position: absolute;
width: 247px;
height: 248px;
left: 0px;
top: 0px;
}
.s1 {
position: absolute;
width: 258px;
height: 6px;
background-image: url('./img/u307p000.svg');
left: 6px;
top: 343px;
transform: rotate(90deg);
}
.h1 {
position: absolute;
width: 100px;
height: 6px;
background-image: url('./img/u307p001.svg');
left: 35px;
top: 467px;
}
.s2 {
position: absolute;
width: 124px;
height: 6px;
background-image: url('./img/u307p002.svg');
left: -25px;
top: 528px;
transform: rotate(90deg);
}
.title {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #B2EDED;
top: 240px;
left: 42px;
}
.val {
width: 100%;
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 28px;
color: #B2EDED;
top: 55px;
left: 0;
}
</style>

86
src/views/MicroExhibition/child/Right2.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="left1">
<Pan class="pan1"></Pan>
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
type: String,
default: '剪线次数'
},
val: {
type: String,
default: '20次'
}
})
</script>
<style scoped>
.left1 {
width: 247px;
height: 100%;
position: relative;
}
.pan1 {
position: absolute;
width: 247px;
height: 248px;
left: 0px;
top: 170px;
}
.s1 {
position: absolute;
width: 316px;
height: 4px;
background-image: url('./img/u309p000.svg');
left: -31px;
top: 544px;
transform: rotate(90deg);
}
.h1 {
position: absolute;
width: 146px;
height: 4px;
background-image: url('./img/u309p001.svg');
left: -16px;
top: 701px;
}
.s2 {
position: absolute;
width: 150px;
height: 6px;
background-image: url('./img/u309p002.svg');
left: -90px;
top: 773px;
transform: rotate(90deg);
}
.title {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #B2EDED;
top: 410px;
left: 34px;
}
.val {
width: 100%;
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 28px;
color: #B2EDED;
top: 229px;
left: 0;
}
</style>

BIN
src/views/MicroExhibition/child/img/u25.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

7
src/views/MicroExhibition/child/img/u306p000.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="258px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="934 421 258 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 640 1486 )">
<path d="M 0 5.999996809013437 L 0 250.05821917789754 L 94.24603174603175 246.9246575342465 L 95 364.7465753424657 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1063 298 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670017935441078 -3.5 3.4999984179518853 C -3.5 5.4329950423596625 -1.9329966244077774 6.999998417951885 0 6.999998417951885 C 1.9329966244077774 6.999998417951885 3.5 5.4329950423596625 3.5 3.4999984179518853 C 3.5 1.5670017935441078 1.9329966244077774 0 0 0 Z M 0 1.9999984179518853 C 0.8284271247461901 1.9999984179518853 1.5 2.6715712932056954 1.5 3.4999984179518853 C 1.5 4.328425542698075 0.8284271247461901 4.999998417951885 0 4.999998417951885 C -0.8284271247461901 4.999998417951885 -1.5 4.328425542698075 -1.5 3.4999984179518853 C -1.5 2.6715712932056954 -0.8284271247461901 1.9999984179518853 0 1.9999984179518853 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1063 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u306p001.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1060 545 100 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0.9993908270190971 0.0348994967025011 -0.03489949670248897 0.999390827019098 19.766206705063723 -38.40522371922282 )">
<path d="M 0 5.999996809013437 L 0 250.05821917789754 L 94.24603174603175 246.9246575342465 L 95 364.7465753424657 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1063 298 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670017935441078 -3.5 3.4999984179518853 C -3.5 5.4329950423596625 -1.9329966244077774 6.999998417951885 0 6.999998417951885 C 1.9329966244077774 6.999998417951885 3.5 5.4329950423596625 3.5 3.4999984179518853 C 3.5 1.5670017935441078 1.9329966244077774 0 0 0 Z M 0 1.9999984179518853 C 0.8284271247461901 1.9999984179518853 1.5 2.6715712932056954 1.5 3.4999984179518853 C 1.5 4.328425542698075 0.8284271247461901 4.999998417951885 0 4.999998417951885 C -0.8284271247461901 4.999998417951885 -1.5 4.328425542698075 -1.5 3.4999984179518853 C -1.5 2.6715712932056954 -0.8284271247461901 1.9999984179518853 0 1.9999984179518853 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1063 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u306p002.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="124px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1096 601 124 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 555 1761 )">
<path d="M 0 5.999996809013437 L 0 250.05821917789754 L 94.24603174603175 246.9246575342465 L 95 364.7465753424657 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1063 298 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670017935441078 -3.5 3.4999984179518853 C -3.5 5.4329950423596625 -1.9329966244077774 6.999998417951885 0 6.999998417951885 C 1.9329966244077774 6.999998417951885 3.5 5.4329950423596625 3.5 3.4999984179518853 C 3.5 1.5670017935441078 1.9329966244077774 0 0 0 Z M 0 1.9999984179518853 C 0.8284271247461901 1.9999984179518853 1.5 2.6715712932056954 1.5 3.4999984179518853 C 1.5 4.328425542698075 0.8284271247461901 4.999998417951885 0 4.999998417951885 C -0.8284271247461901 4.999998417951885 -1.5 4.328425542698075 -1.5 3.4999984179518853 C -1.5 2.6715712932056954 -0.8284271247461901 1.9999984179518853 0 1.9999984179518853 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1063 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u307p000.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1372 421 256 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 1077 1923 )">
<path d="M 124 5.999997171648102 L 124 249 L 1 249 L 1 366 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1376 298 )" />
<path d="M 124 0 C 122.06700337559222 0 120.5 1.5670020639011504 120.5 3.499998688308928 C 120.5 5.432995312716705 122.06700337559222 6.999998688308928 124 6.999998688308928 C 125.93299662440778 6.999998688308928 127.5 5.432995312716705 127.5 3.499998688308928 C 127.5 1.5670020639011504 125.93299662440778 0 124 0 Z M 124 1.9999986883089278 C 124.82842712474618 1.9999986883089278 125.5 2.671571563562738 125.5 3.499998688308928 C 125.5 4.328425813055118 124.82842712474618 4.999998688308928 124 4.999998688308928 C 123.17157287525382 4.999998688308928 122.5 4.328425813055118 122.5 3.499998688308928 C 122.5 2.671571563562738 123.17157287525382 1.9999986883089278 124 1.9999986883089278 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1376 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u307p001.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1374 545 128 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(-1 -0 -0 -1 2876 1094 )">
<path d="M 124 5.999997171648102 L 124 249 L 1 249 L 1 366 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1376 298 )" />
<path d="M 124 0 C 122.06700337559222 0 120.5 1.5670020639011504 120.5 3.499998688308928 C 120.5 5.432995312716705 122.06700337559222 6.999998688308928 124 6.999998688308928 C 125.93299662440778 6.999998688308928 127.5 5.432995312716705 127.5 3.499998688308928 C 127.5 1.5670020639011504 125.93299662440778 0 124 0 Z M 124 1.9999986883089278 C 124.82842712474618 1.9999986883089278 125.5 2.671571563562738 125.5 3.499998688308928 C 125.5 4.328425813055118 124.82842712474618 4.999998688308928 124 4.999998688308928 C 123.17157287525382 4.999998688308928 122.5 4.328425813055118 122.5 3.499998688308928 C 122.5 2.671571563562738 123.17157287525382 1.9999986883089278 124 1.9999986883089278 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1376 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u307p002.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="122px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1316 603 122 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 772 1982 )">
<path d="M 124 5.999997171648102 L 124 249 L 1 249 L 1 366 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1376 298 )" />
<path d="M 124 0 C 122.06700337559222 0 120.5 1.5670020639011504 120.5 3.499998688308928 C 120.5 5.432995312716705 122.06700337559222 6.999998688308928 124 6.999998688308928 C 125.93299662440778 6.999998688308928 127.5 5.432995312716705 127.5 3.499998688308928 C 127.5 1.5670020639011504 125.93299662440778 0 124 0 Z M 124 1.9999986883089278 C 124.82842712474618 1.9999986883089278 125.5 2.671571563562738 125.5 3.499998688308928 C 125.5 4.328425813055118 124.82842712474618 4.999998688308928 124 4.999998688308928 C 123.17157287525382 4.999998688308928 122.5 4.328425813055118 122.5 3.499998688308928 C 122.5 2.671571563562738 123.17157287525382 1.9999986883089278 124 1.9999986883089278 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1376 298 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u308p000.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="320px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="646 661 320 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 143 1469 )">
<path d="M 0 5.999999106772314 L 0 312.91438356141276 L 132.93650793650795 308.99315068493144 L 134 456.431506849315 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 806 507 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670032167371757 -3.5 3.499999841144953 C -3.5 5.43299646555273 -1.9329966244077774 6.9999998411449535 0 6.9999998411449535 C 1.9329966244077774 6.9999998411449535 3.5 5.43299646555273 3.5 3.499999841144953 C 3.5 1.5670032167371757 1.9329966244077774 0 0 0 Z M 0 1.999999841144953 C 0.8284271247461901 1.999999841144953 1.5 2.671572716398763 1.5 3.499999841144953 C 1.5 4.3284269658911425 0.82842712474619 4.9999998411449535 0 4.9999998411449535 C -0.8284271247461906 4.9999998411449535 -1.5 4.328426965891143 -1.5 3.499999841144953 C -1.5 2.671572716398763 -0.8284271247461901 1.999999841144953 0 1.999999841144953 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 806 507 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u308p001.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="140px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="802 815 140 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0.9993908270190954 0.03489949670250055 -0.03489949670250786 0.9993908270190973 29.044087645297736 -29.934666799183105 )">
<path d="M 0 5.999999106772314 L 0 312.91438356141276 L 132.93650793650795 308.99315068493144 L 134 456.431506849315 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 806 507 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670032167371757 -3.5 3.499999841144953 C -3.5 5.43299646555273 -1.9329966244077774 6.9999998411449535 0 6.9999998411449535 C 1.9329966244077774 6.9999998411449535 3.5 5.43299646555273 3.5 3.499999841144953 C 3.5 1.5670032167371757 1.9329966244077774 0 0 0 Z M 0 1.999999841144953 C 0.8284271247461901 1.999999841144953 1.5 2.671572716398763 1.5 3.499999841144953 C 1.5 4.3284269658911425 0.82842712474619 4.9999998411449535 0 4.9999998411449535 C -0.8284271247461906 4.9999998411449535 -1.5 4.328426965891143 -1.5 3.499999841144953 C -1.5 2.671572716398763 -0.8284271247461901 1.999999841144953 0 1.999999841144953 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 806 507 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u308p002.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="158px" height="10px" preserveAspectRatio="xMinYMid meet" viewBox="860 885 158 8" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 50 1828 )">
<path d="M 0 5.999999106772314 L 0 312.91438356141276 L 132.93650793650795 308.99315068493144 L 134 456.431506849315 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 806 507 )" />
<path d="M 0 0 C -1.9329966244077774 0 -3.5 1.5670032167371757 -3.5 3.499999841144953 C -3.5 5.43299646555273 -1.9329966244077774 6.9999998411449535 0 6.9999998411449535 C 1.9329966244077774 6.9999998411449535 3.5 5.43299646555273 3.5 3.499999841144953 C 3.5 1.5670032167371757 1.9329966244077774 0 0 0 Z M 0 1.999999841144953 C 0.8284271247461901 1.999999841144953 1.5 2.671572716398763 1.5 3.499999841144953 C 1.5 4.3284269658911425 0.82842712474619 4.9999998411449535 0 4.9999998411449535 C -0.8284271247461906 4.9999998411449535 -1.5 4.328426965891143 -1.5 3.499999841144953 C -1.5 2.671572716398763 -0.8284271247461901 1.999999841144953 0 1.999999841144953 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 806 507 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u309p000.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="316px" height="4px" preserveAspectRatio="xMinYMid meet" viewBox="1618 647 316 2" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 1128 2424 )">
<path d="M 142 5.999998987625388 L 142 312 L 1 312 L 1 458 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1634 492 )" />
<path d="M 142 0 C 140.06700337559224 0 138.5 1.5670032217768675 138.5 3.499999846184645 C 138.5 5.432996470592422 140.06700337559224 6.999999846184645 142 6.999999846184645 C 143.93299662440776 6.999999846184645 145.5 5.432996470592422 145.5 3.499999846184645 C 145.5 1.5670032217768675 143.93299662440776 0 142 0 Z M 142 1.9999998461846449 C 142.82842712474618 1.9999998461846449 143.5 2.671572721438455 143.5 3.499999846184645 C 143.5 4.328426970930835 142.82842712474618 4.999999846184645 142 4.999999846184645 C 141.17157287525382 4.999999846184645 140.5 4.328426970930835 140.5 3.499999846184645 C 140.5 2.671572721438455 141.17157287525382 1.9999998461846449 142 1.9999998461846449 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1634 492 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u309p001.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="146px" height="4px" preserveAspectRatio="xMinYMid meet" viewBox="1632 803 146 2" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(-1 -0 -0 -1 3410 1608 )">
<path d="M 142 5.999998987625388 L 142 312 L 1 312 L 1 458 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1634 492 )" />
<path d="M 142 0 C 140.06700337559224 0 138.5 1.5670032217768675 138.5 3.499999846184645 C 138.5 5.432996470592422 140.06700337559224 6.999999846184645 142 6.999999846184645 C 143.93299662440776 6.999999846184645 145.5 5.432996470592422 145.5 3.499999846184645 C 145.5 1.5670032217768675 143.93299662440776 0 142 0 Z M 142 1.9999998461846449 C 142.82842712474618 1.9999998461846449 143.5 2.671572721438455 143.5 3.499999846184645 C 143.5 4.328426970930835 142.82842712474618 4.999999846184645 142 4.999999846184645 C 141.17157287525382 4.999999846184645 140.5 4.328426970930835 140.5 3.499999846184645 C 140.5 2.671572721438455 141.17157287525382 1.9999998461846449 142 1.9999998461846449 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1634 492 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u309p002.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1560 875 150 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 758 2512 )">
<path d="M 142 5.999998987625388 L 142 312 L 1 312 L 1 458 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1634 492 )" />
<path d="M 142 0 C 140.06700337559224 0 138.5 1.5670032217768675 138.5 3.499999846184645 C 138.5 5.432996470592422 140.06700337559224 6.999999846184645 142 6.999999846184645 C 143.93299662440776 6.999999846184645 145.5 5.432996470592422 145.5 3.499999846184645 C 145.5 1.5670032217768675 143.93299662440776 0 142 0 Z M 142 1.9999998461846449 C 142.82842712474618 1.9999998461846449 143.5 2.671572721438455 143.5 3.499999846184645 C 143.5 4.328426970930835 142.82842712474618 4.999999846184645 142 4.999999846184645 C 141.17157287525382 4.999999846184645 140.5 4.328426970930835 140.5 3.499999846184645 C 140.5 2.671572721438455 141.17157287525382 1.9999998461846449 142 1.9999998461846449 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1634 492 )" />
</g>
</svg>

BIN
src/views/MicroExhibition/child/img/u356.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

209
src/views/MicroExhibition/child/index.vue Normal file
View File

@ -0,0 +1,209 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="''"
:typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="left">
<div class="lt">
<div class="lt-title">工作效率</div>
<div class="lt-value">95</div>
<div class="elli_tray">
<img src="../../../assets/img/elli_tray.svg" alt="">
</div>
<div class="tray">
<img src="../../../assets/img/tray.svg" alt="">
</div>
<ul class="scale">
<li style="top:44%;left:26%;">10</li>
<li style="top: 47%;left: 30%;">20</li>
<li style="top: 49%;left: 34%;">30</li>
<li style="top: 52%;left: 39%;">40</li>
<li style="top: 53.5%;left: 45%;">50</li>
<li style="top: 55%;left: 51%;">60</li>
<li style="top: 56%;left: 56%;">70</li>
<li style="top: 56%;left: 62%;">80</li>
<li style="top: 55.5%;left: 67%;">90</li>
<li style="top: 54%;left: 71%;">100</li>
</ul>
</div>
<div class="lb">
<LineChart class="line" :config="lineConfig"></LineChart>
</div>
</div>
<div class="right">
<Left1 class="left1"></Left1>
<Left2 class="left2"></Left2>
<Right1 class="left3"></Right1>
<Right2 class="left4"></Right2>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
import header2 from '@/components/headerBox/header2.vue'
import LineChart from './LineChart.vue'
import Left1 from './Left1.vue'
import Left2 from './Left2.vue'
import Right1 from './Right1.vue'
import Right2 from './Right2.vue'
let lineConfig = {
title: '工作时间'
}
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
.header {
height: 100px;
width: 1920px;
}
.content {
width: 1920px;
height: 980px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.left {
width: 780px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.right {
position: relative;
width: 1130px;
height: 100%;
}
.lt,
.lb {
width: 100%;
height: 48%;
}
.lt {
position: relative;
}
.elli_tray {
border-width: 0px;
position: absolute;
top: 51%;
left: 50%;
width: 351px;
height: 46px;
transform: rotate(6deg) translate(-50%, -50%);
z-index: 2;
}
img {
width: 100%;
height: 100%;
}
.tray {
border-width: 0px;
position: absolute;
top: 60%;
left: 50%;
width: 426px;
height: 95px;
transform: rotate(8deg) translate(-50%, -50%);
}
.lt-title {
position: absolute;
top: 10px;
left: 20px;
font-size: 30px;
font-weight: bold;
color: #20aec5;
z-index: 3;
}
.lt-value {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 110px;
font-weight: bold;
color: #20aec5;
z-index: 3;
}
.scale {
width: 100%;
height: 100%;
position: absolute;
display: flex;
font-size: 18px;
color: #3366ff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.scale li {
text-align: center;
line-height: 30px;
position: absolute;
z-index: 3;
}
.line {
width: 100%;
height: 100%;
}
.left1 {
position: absolute;
width: 247px;
height: 100%;
left: 0px;
top: 0px;
}
.left2 {
position: absolute;
width: 247px;
height: 100%;
left: 247px;
top: 0px;
}
.left3 {
position: absolute;
width: 247px;
height: 100%;
left: 636px;
top: 0px;
}
.left4 {
position: absolute;
width: 247px;
height: 100%;
left: 883px;
top: 0px;
}
</style>

98
src/views/MicroExhibition/components/BarChart.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div ref="LChartRef" class="cc"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
const prop = defineProps({
xData: {
type: Array,
default: ['1050910', '1050269']
},
seriesData: {
type: Array,
default: []
}
})
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = () => {
charts = proxy.$echarts.init(LChartRef.value, 'dark')
let option = {
// title: {
// text: '工作时间'
// },
backgroundColor: '#0E0E0E',
legend: {
data: ['计划完成', '实际完成'],
textStyle: {
fontSize: 14
},
},
textStyle: {
fontSize:14
},
grid:{
left:'80',
right:'0',
bottom:'40',
},
color:['#2FC5D4','#FEDA81'],
xAxis: {
type: 'category',
data: prop.xData,
// axisLabel: {
// interval: 0, //控制X轴刻度全部显示
// rotate: 45, //倾斜角度
// },
},
yAxis: [
{
type: 'value',
name: '日产量',
axisLabel:{
fontSize:14
}
}
],
series: prop.seriesData
};
charts.setOption(option);
}
watch(() => prop.seriesData, (newVal, oldVal) => {
charts.setOption({
series: newVal
});
}, { deep: true })
watch(() => prop.xData, (newVal, oldVal) => {
charts.setOption({
xAxis: {
type: 'category',
data: prop.xData,
// axisLabel: {
// interval: 0, //控制X轴刻度全部显示
// rotate: 45, //倾斜角度
// },
},
});
}, { deep: true })
onMounted(() => {
setCharts()
})
</script>
<style scoped>
.cc {
width: 100%;
height: 100%;
}
</style>

139
src/views/MicroExhibition/components/BoardBar.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="board-bar">
<div class="bb-top">
<div class="dev-title">
<div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
<text>{{ item }}</text></div>
</div>
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
</div>
<div class="bb-bottom">
<BarChart style="width: 100%;height: 100%;" :xData="prop.xData"
:seriesData="prop.seriesData"></BarChart>
</div>
</div>
</template>
<script setup lang='ts'>
import ZdScrollBoard from "@/components/data-view/index.vue";
import BarChart from './BarChart.vue'
import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "vue";
const devList = ref(null);
const prop = defineProps({
data: {
type: Array,
default: []
},
xData: {
type: Array,
default: ['1050910', '1050269']
},
seriesData: {
type: Array,
default: [ ]
}
})
let header = ['序号', '设备名称', '设备编码','完成率', '稼动率', '状态']
let columnWidth = [90, 295, 145, 110, 110,85];
let sum = 850;
let computedWidth = (width: number) => {
return width / sum * 100 + '%'
}
let config = reactive({
// header: ['序号', '设备名称', '设备编码', '稼动率', '状态'],//, '故障率'
headerBGC: '#0E0E0E',
oddRowBGC: '#000F1D',
evenRowBGC: '#000F1D',
wrap: [false, false, false, false, false],
columnWidth: [80, 295, 145, 110, 110,85],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: 2,
waitTime: 3000,
})
const handleData = () => {
let updateList = prop.data.map((items: any) => {
return items.map((item: any, index: number) => {
if (index == (items.length - 1)) {
return statusHtml(status_color[item])
}
return item
})
})
devList.value.updateRows(updateList,config)
}
watch(()=>prop.data, (newVal, oldVal) => {
handleData()
},{deep:true}
)
const status_color = {
'0': '#FF6E76',
'1': '#FDDD60',
'2': '#7CFFB2',
'3': '#FDDD60',
}
let statusHtml = (color) => {
return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
// return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
}
onMounted(() => {
handleData()
})
</script>
<style scoped>
.board-bar {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.dev-title {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.title-item {
height: 100%;
box-sizing: border-box;
}
.title-item text {
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
padding: 5px 10px;
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
}
.bb-top {
width: 100%;
height: 35%;
}
.dev-list {
width: 100%;
height: calc(100% - 50px);
}
.bb-bottom {
width: 100%;
height: 65%;
}</style>

46
src/views/MicroExhibition/components/Card.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<Border13>
<div class="card-container">
<h2 class="title">
<DecorationFadeOut>
&nbsp;{{ title }}&nbsp;
</DecorationFadeOut>
</h2>
<div class="card-content">
<slot ></slot>
</div>
</div>
</Border13>
</template>
<script setup lang='ts'>
import Border13 from '@/components/border/Border13.vue'
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
const prop = defineProps({
title: {
type: String,
default: ''
},
})
</script>
<style scoped>
.card-container {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.title {
height: 30px;
color: #fff;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.card-content {
width: 100%;
height: calc(100% - 40px);
}
</style>

114
src/views/MicroExhibition/components/DevCard.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="dev-card">
<div class="dev-left">
<slot></slot>
</div>
<div class="dev-right">
<div class="dev-box">
<div class="dev-content dev-title">
<div class="key" v-for="item in dev_title">{{ item }}</div>
</div>
<div class="dev-content" v-for="(items, index) in (dev_value as any)">
<div v-for="(item, index) in items" class="dev_value">
<div :class="{ status: index == (items.length - 1) }"
:style="{ background: index == (items.length - 1) ? status_color[item] : '' }">{{ index ==
(items.length - 1) ? '' : item }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { defineProps, ref } from 'vue'
const prop = defineProps({
dev_title: {
type: Array,
default: ['机架号', '状态', '布料层数', '裁片数量']
},
dev_value: {
type: Array,
default: [
[102014422, '待机', '40层', '0']
]
},
})
const status_color = {
'0': '#FF6E76',
'1': '#FDDD60',
'2': '#7CFFB2',
'3': '#FDDD60',
}
</script>
<style scoped>
.dev-card {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
.dev-left {
width: 45%;
height: 100%;
box-sizing: border-box;
}
.dev-right {
width: 55%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.dev-title {
color: #FFF;
}
.dev-box {
height: 100%;
width: 100%;
font-size: 16px;
display: flex;
justify-content: end;
align-items: center;
}
.dev-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-weight: bold;
}
.dev_value {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.key {
width: 75px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #02C1D7;
/* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
}
.status {
width: 24px;
height: 24px;
border-radius: 50%;
}
</style>

94
src/views/MicroExhibition/components/LineChart.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<div ref="LChartRef"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
const prop = defineProps({
config: {
type: Object,
default: {
title:''
}
}
})
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = ()=>{
charts = proxy.$echarts.init(LChartRef.value, 'dark')
let option = {
title: {
text: prop.config.title
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['步进抬压脚电脑花样平缝机', '富怡全自动皮革缝纫机(任意转)整机', '富怡电脑绣花机(精密绣花机)', '超高速全自动电脑包缝机(五线)', '富怡全自动缝纫机(服装机)'],
left:'100px'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '步进抬压脚电脑花样平缝机',
type: 'line',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '富怡全自动皮革缝纫机(任意转)整机',
type: 'line',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '富怡电脑绣花机(精密绣花机)',
type: 'line',
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '超高速全自动电脑包缝机(五线)',
type: 'line',
smooth: true,
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '富怡全自动缝纫机(服装机)',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
charts.setOption(option);
}
onMounted(() => {
setCharts()
})
</script>
<style scoped>
.cc {
width: 400px;
height: 400px;
}
</style>

75
src/views/MicroExhibition/components/NewBoder.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="newboder">
<img class="u305" src="./../images/u305.svg" alt="">
<img class="u290" src="./../images/u290.svg" alt="">
<div class="title">
<text class="title-text">{{ newTitle }}</text>
</div>
<div class="newboder-content">
<slot></slot>
</div>
</div>
</template>
<script setup lang='ts'>
import { computed} from 'vue'
let prop = defineProps({
title: {
type: String,
default: '裁剪设备'
}
})
let newTitle = computed(() => {
return prop.title.split('').join(' ')
})
</script>
<style scoped>
.newboder {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.u305 {
width: 73px;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
.u290 {
width: 61px;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(180deg);
opacity: 0.5;
z-index: 2;
}
.title {
width: 100%;
height: 50px;
text-align: left;
font-size: 20px;
color: #02C1D7;
display: flex;
align-items: center;
}
.title-text {
margin-left: 30px;
padding-left: 20px;
border-left: #02C1D7 solid 5px;
font-weight: bold;
}
.newboder-content {
flex: 1;
}
</style>

57
src/views/MicroExhibition/components/PbjCard.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="pbj-card">
<div>机架号：{{ data.label }}</div>
<div>工作时间</div>
<div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="percent" />{{percent}}%
</div>
<div>状态：{{ data.status }}</div>
<div>铺布层数：{{data.layer}}层</div>
</div>
</template>
<script setup lang='ts'>
import {computed} from 'vue'
let minute = 480;
const prop = defineProps({
data: {
type: Object,
default: {
label: '12024467',
time: 75,
status: '工作',
layer: 50
}
}
})
let percent = computed(() => {
return prop.data.time//Math.floor((prop.data.time / 480) * 100);
})
function format(percentage) {
return prop.data.time;
}
</script>
<style scoped>
.pbj-card {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 18px;
font-weight: 700;
}
.demo-progress {
display: flex;
align-items: center;
color: #fff;
}
.demo-progress .el-progress--line {
width: 350px;
margin-right: 5px;
}</style>

554
src/views/MicroExhibition/components/header2.vue Normal file
View File

@ -0,0 +1,554 @@
<!--
* @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-02-16 11:04:06
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div class="header2" :style="{ width: props.width, height: props.height }">
<h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
{{ props.title }}
</h1>
<div class="slot">
<div class="tip" style="display: flex">
<span class="tipspan" v-for="item in props.titleTip">
<div class="colortip" :style="{ backgroundColor: item.color }"></div>
<span class="tipstring">{{ item.name }}</span></span
>
<slot></slot>
</div>
<div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
<i class="iconfont icon-back"></i>
</div>
<div
v-show="typeObj.AbnormalData"
ref="AbnormalDataRef"
class="AbnormalData"
@click="AbnormalDataFun"
>
<dv-scroll-board
class="dv-scroll-boardclass"
ref="tipList"
:config="listdata"
style="width: 30rem; height: 50px"
/>
<el-badge
:value="AbnormalNum"
class="i-badge"
:hidden="AbnormalNum == 0"
>
<i
:class="
AbnormalNum > 0
? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
: 'iconfont icon-baojingxinxi'
"
></i>
</el-badge>
</div>
<div v-show="typeObj.time" class="time">
<p ref="Timedom">{{ timeHtml }}</p>
</div>
</div>
<el-popover
ref="popoverRef"
:virtual-ref="AbnormalDataRef"
:visible="Abnormalpopovervisible"
trigger="click"
width="600px"
placement="bottom-start"
virtual-triggering
>
<ul
class="popoverBOX"
ref="popoverliDom"
v-click-outside="noClickAbnormalDataFun"
>
<li class="popoverHeader">
<!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
</li>
<li v-for="item in powerlist" :key="item.deviceId">
{{ item.context }}
</li>
<li class="lookdown" v-show="onloadlist">
<span @click="clickNextPageAlarmList">{{
t("messages.加载更多")
}}</span>
</li>
</ul>
</el-popover>
</div>
</template>
<script setup lang="ts">
import useNowTime from "@/hook/nowTime";
import { ClickOutside as vClickOutside } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { devListType } from "@/type/InPlantProducts";
import { getAlarmListData,getAlarmListHistoryData } from "@/http/index";
import {
onMounted,
onUnmounted,
reactive,
ref,
unref,
watch,
computed,
} from "vue";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useHeaderStore } from "@/store/components/header";
import { getStoredLanguage } from "@/utils/languageStorage";
import { useI18n } from "vue-i18n";
import { Clock } from "@element-plus/icons-vue";
let { t } = useI18n();
const storeheader = useHeaderStore();
let { timeHtml } = useNowTime();
const router = useRouter();
//刷新数据
let numkey = ref(0);
let popoverkey = ref(0);
//历史数据dom
let AbnormalDataRef = ref();
let popoverRef = ref();
let tipList = ref();
let popoverliDom = ref();
//历史报警数据弹窗显示
let Abnormalpopovervisible = ref(false);
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
//dialog
let dialogdata = ref([]);
let onloadlist = computed(() => {
return storeheader.num > powerlist.length;
});
const listdata = reactive<devListType>({
data: [],
rowNum: 2,
oddRowBGC: "#100C2A",
evenRowBGC: "#100C2A",
hoverPause: true,
carousel: "page",
waitTime: 3000,
align: ["left"],
});
let AbnormalNum = ref(0);
//弹窗历史数据
let powerlist = reactive([]);
let props = defineProps<{
width: string;
height: string;
title: string;
titleTip: any;
typeFun: any[];
alarmType: any[];
}>();
const typeObj = reactive({
comback: false,
AbnormalData: false,
time: false,
});
const AbnormalType = reactive({
pageSize: 5,
pageNum: 1,
type: "",
});
let comeBackFun = () => {
router.go(-1);
};
const changeAbnormalData = (val: any) => {
tipList.value.updateRows(val.data, { ...val });
};
let AbnormalDataFun = () => {
//该函数执行优先级低于noClickAbnormalDataFun
//Abnormalpopovervisibled代表弹窗是否已经显示
// 判断弹窗是否打开如果打开就关闭 关闭就打开
if (Abnormalpopovervisible.value) {
Abnormalpopovervisible.value = false;
} else {
//关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
if (AbnormalpopovervisibleCtrl.value) {
Abnormalpopovervisible.value = false;
} else {
Abnormalpopovervisible.value = true;
}
}
};
let noClickAbnormalDataFun = () => {
//该函数执行优先级高于AbnormalDataFun
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
if (Abnormalpopovervisible.value) {
AbnormalpopovervisibleCtrl.value = true;
} else {
AbnormalpopovervisibleCtrl.value = false;
}
Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
};
function typeStatus() {
if (props.typeFun.length == 0) {
return;
}
props.typeFun.forEach((res) => {
for (let key in typeObj) {
if (res == key) {
typeObj[key] = true;
}
}
});
}
function langJudge() {
let lang = getStoredLanguage();
if (lang) {
return lang;
} else {
return "简体中文";
}
}
//判断是否显示对应组件后所做操作
watch(
() => typeObj,
(newVal, oldVal) => {
if (newVal.AbnormalData) {
AbnormalType.type = props.alarmType.join(",");
getAlarmListDatafun();
// connectWebsocket(null, null, getWebsocket, errWebsocket);
setAlarmscrollBoardList();
}
},
{ deep: true, flush: "post" }
);
//获取异常信息接口数据
async function getAlarmListDatafun() {
let result: any = await getAlarmListData(AbnormalType);
if (result.code == 200) {
storeheader.setDataList(result);
}
}
//单机显示更多历史报警数据
function clickNextPageAlarmList() {
// if(storeheader.num<=powerlist.length){
// onloadlist.value=false
// return
// }
AbnormalType.pageNum++;
getAlarmListDatafun();
}
//接受历史报警数据
watch(
() => storeheader.AlarmpopoverList,
(newVal, oldVal) => {
newVal.forEach((res) => {
powerlist.push(res);
});
},
{ deep: true, flush: "post" }
);
//接受历史报警数据滚动效果栏
watch(
() => storeheader.AlarmscrollBoardList,
(newVal, oldVal) => {
// newVal.forEach(res=>{
// let e=res.context.split('，')
// listdata.data.push([e[0]])
// listdata.data.push([e[1]])
// })
// changeAbnormalData(listdata)
// numkey.value++
},
{ deep: true, flush: "post" }
);
let AlarmscrollTime = null;
//每隔15秒钟替换一次组件数据进行轮播
function setAlarmscrollBoardList() {
let start = 0;
let end = 4;
let i = 0;
setTimeout(() => {
storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
let e = element.context.split("，");
listdata.data.push(...[[e[0]], [e[1]]]);
i++;
});
end = end + 5;
start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
start <= 0 ? (start = 0) : "";
}, 1000);
AlarmscrollTime = setInterval(() => {
if (i == 0) {
listdata.data = [];
}
i = 0;
if (storeheader.AlarmscrollBoardList.length == 0) {
return;
}
if (storeheader.AlarmscrollBoardList.length - 1 < end) {
end = storeheader.AlarmscrollBoardList.length - 1;
}
for (start; start <= end; start++) {
// console.log(storeheader.AlarmscrollBoardList[start],start,end);
// console.log(storeheader.AlarmscrollBoardList.length-1);
let listcontent =
storeheader.AlarmscrollBoardList[start]?.context.split("，");
listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
}
changeAbnormalData(listdata);
numkey.value++;
end = end + 5;
//如果下次数据剩一个则只拿一条数据
if (start == storeheader.AlarmscrollBoardList.length - 1) {
// console.log('进入了2');
start = storeheader.AlarmscrollBoardList.length - 1;
end = storeheader.AlarmscrollBoardList.length - 1;
}
//如果剩余数据不足5个则拿出剩余数据
if (
end > storeheader.AlarmscrollBoardList.length - 1 &&
start <= storeheader.AlarmscrollBoardList.length - 1
) {
// console.log('进入了3');
end = storeheader.AlarmscrollBoardList.length - 1;
}
// 如果全部超出则从头拿
if (
start > storeheader.AlarmscrollBoardList.length - 1 &&
end > storeheader.AlarmscrollBoardList.length - 1
) {
// console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
start = 0;
end = 4;
}
}, 15000);
}
//接受历史报警数据量
watch(
() => storeheader.num,
(newVal, oldVal) => {
AbnormalNum.value = newVal;
numkey.value++;
},
{ deep: true, flush: "post" }
);
function HeadergetWebsocket(val) {
let data = null;
try {
data = JSON.parse(val);
} catch (e) {
console.log(e);
return;
}
if (
props.alarmType.some((e) => {
return e == data.type;
})
) {
// console.log(props.alarmType);
// console.log(props.alarmType.some(e=>{return e==data.type}));
storeheader.changeDataList(data);
}
}
function HeadererrWebsocket(val) {
// console.log(val);
}
onMounted(() => {
//判断需要显示出来的数据
typeStatus();
});
onUnmounted(() => {
// closeWebsocket();
storeheader.resetData();
AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
});
defineExpose({
changeAbnormalData,
HeadergetWebsocket,
HeadererrWebsocket,
});
</script>
<style scoped>
@import "@/assets/css/iconfont.css";
.header2 {
width: 100%;
background-image: url(@/assets/header/header1.png);
background-size: 100% 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header2-title {
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* height: 100%; */
width: 100%;
}
h1 {
position: absolute;
top: 10px;
z-index: 2;
}
.zh-title {
margin-top: 6px;
font-size: 3rem;
}
.en-title {
font-size: 2rem;
max-width: 600px;
height: 80px;
display: flex;
align-items: center;
overflow: hidden;
/* line-height: 80px; */
}
/* .header2 p {
position: absolute;
right: 50px;
bottom: 20px;
font-size: 20px;
} */
.slot {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 10px 10px 10px;
}
/* .red {
background-color: rgb(228, 57, 97);
}
.blue {
background-color: rgb(32, 174, 197);
} */
.colortip {
width: 16px;
height: 16px;
border-radius: 8px;
}
.tipstring {
font-size: 20px;
color: #fff;
}
.tip {
margin-top: 15px;
}
.tipspan {
display: flex;
margin-left: 10px;
align-items: center;
}
.comeBack {
position: absolute;
/* width: 2rem;
height: 2rem; */
bottom: 10%;
left: 1.5rem;
font-size: 3rem;
color: #fff;
cursor: pointer;
}
.comeBack > i {
font-size: 3rem;
}
.AbnormalData {
position: absolute;
display: flex;
align-items: center;
/* width: 2rem;
height: 2rem; */
bottom: 20%;
right: 1%;
font-size: 3rem;
color: #fff;
}
.AbnormalData:hover {
cursor: pointer;
}
.AbnormalData > span {
font-size: 1rem;
}
.popoverBOX {
max-height: 15rem;
font-size: 18px;
overflow-y: auto;
}
.popoverBOX li {
padding: 10px 0 10px 0;
}
.lookdown {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #1c78c2;
}
.lookdown:hover {
cursor: pointer;
}
.time {
position: absolute;
width: 20rem;
height: 2rem;
bottom: 30%;
left: 4.2rem;
font-size: 25px;
}
.i-badge {
width: 3rem;
height: 3rem;
}
.i-badge > i {
font-size: 3rem;
position: relative;
top: -5px;
}
/* .dv-scroll-board /deep/ .ceil {
font-size: 1.2rem;
} */
.dv-scroll-boardclass :deep(.ceil) {
font-size: 20px;
}
.el-popper.is-dark:deep() {
background: #14274b !important;
}
.el-popover.el-popper:deep() {
background: #14274b !important;
}
.Abnormal-icon-yellow {
color: #ddb14f;
}
.lishijilu {
font-size: 2rem;
color: #fff;
}
.popoverHeader {
padding: 0 !important;
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 1.5rem;
}
.popoverHeader span {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
/* border-radius: 50px;
background: linear-gradient(315deg, #404040, #4c4c4c); */
/* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
}
</style>

89
src/views/MicroExhibition/components/ringChart.vue Normal file
View File

@ -0,0 +1,89 @@
<!--
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\ringChart.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-04-28 08:01:55
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div ref="ringRef" class="ring" ></div>
</template>
<script setup lang='ts'>
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
const { proxy } = getCurrentInstance() as any;
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let ringRef = ref();
let ringChart = null;
const prop = defineProps({
data: {
type: Array,
default: []
}
})
const init = () => {
ringChart = proxy.$echarts.init(ringRef.value, 'dark')
let option = {
tooltip: {
trigger: "item",
},
color:['#7CFFB2','#FF6E76','#FDDD60'],
backgroundColor: '#0E0E0E',
legend: {
type: "scroll",
bottom: "0",
left: "center",
textStyle: {
color: "#fff",
fontSize: 16,
},
},
series: [
{
name: "",
type: "pie",
radius: ["40%", "70%"],
center: ["50%", "45%"],
label: {
show: true,
formatter(params) {
return `${params.name}:${params.value}台`
},
fontSize: 18,
fontWeight: 500,
},
labelLine: {
show: true,
},
top: '5%',
data: prop.data,
},
],
}
ringChart.setOption(option)
}
onUpdated(() => {
ringChart.setOption({
series: [
{
data: prop.data
}
]
})
})
onMounted(() => {
init()
})
</script>
<style scoped>
.ring {
width: 100%;
height: 100%;
}
</style>

118
src/views/MicroExhibition/components/scrollBoard.vue Normal file
View 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" @click="dvClick" :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>

12
src/views/MicroExhibition/images/title_bg.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
<stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
<stop id="Stop49" stop-color="#00ffff" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -910 -863 )">
<path d="M 1 29.80000000000001 L 1 0.19999999999998863 L 60.811428571428486 0.19999999999998863 L 67 7.800000000000012 L 67 29.80000000000001 L 1 29.80000000000001 Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
</g>
</svg>

Some files were not shown because too many files have changed in this diff Show More