update
This commit is contained in:
hzz
parent
df8c76b306
commit
d8a29c1fc2
1
src/assets/icons/svg/fenchen.svg
Normal file
1
src/assets/icons/svg/fenchen.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1730769272802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1039" width="256" height="256"><path d="M378.105721 356.776833a62.282417 62.282417 0 0 0-0.01338-63.076668 62.287282 62.287282 0 0 0-55.100101-30.706985c-33.842635 0.76506-60.877578 28.426402-60.867847 62.273902 0.00973 33.852366 27.053187 61.499113 60.895823 62.245928a62.275119 62.275119 0 0 0 55.085505-30.736177zM751.756435 356.776833a62.27147 62.27147 0 0 0-55.114696-93.783653c-33.842635 0.76506-60.877578 28.426402-60.867848 62.273902 0.00973 33.852366 27.058053 61.499113 60.900688 62.245928a62.275119 62.275119 0 0 0 55.081856-30.736177zM540.953941 325.271948c0-17.199853-13.940139-31.139992-31.138776-31.139993-17.194987 0-31.135127 13.940139-31.135127 31.139993 0 17.193771 13.940139 31.133911 31.135127 31.13391 17.198636 0 31.138776-13.940139 31.138776-31.13391zM323.020216 761.162508a62.279984 62.279984 0 0 0 55.085505-30.731312 62.282417 62.282417 0 0 0-0.01338-63.076667 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867847 62.273903 0.00973 33.848717 27.053187 61.495464 60.895823 62.241062zM696.675795 761.162508a62.27147 62.27147 0 0 0 55.066045-93.807979 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867848 62.273903 0.00973 33.848717 27.058053 61.495464 60.901904 62.241062zM478.680038 698.922662c0 17.194987 13.940139 31.135127 31.135127 31.135127 17.198636 0 31.138776-13.940139 31.138776-31.135127 0-17.201069-13.940139-31.141208-31.138776-31.141208-17.194987 0-31.135127 13.940139-31.135127 31.141208zM665.502963 512.093656c0 17.199853 13.945005 31.139992 31.139992 31.139992 17.199853 0 31.139992-13.940139 31.139992-31.139992 0-17.193771-13.940139-31.133911-31.139992-31.133911-17.196204 0-31.139992 13.940139-31.139992 31.133911zM291.852248 512.093656c0 17.199853 13.940139 31.139992 31.139992 31.139992 17.194987 0 31.135127-13.940139 31.135127-31.139992 0-17.193771-13.940139-31.133911-31.135127-31.133911-17.199853 0-31.139992 13.940139-31.139992 31.133911zM448.952183 512.093656c0.003649 33.852366 27.053187 61.495464 60.895822 62.245928a62.27147 62.27147 0 0 0 55.08064-30.736177 62.273903 62.273903 0 0 0-55.11348-93.78487c-33.838986 0.766276-60.872713 28.422754-60.862982 62.275119z" p-id="1040"></path><path d="M970.857819 318.763468c-25.181285-59.281778-61.204765-112.580522-107.052389-158.434228-45.863436-45.863436-99.171911-81.883267-158.441526-107.059687a491.752072 491.752072 0 0 0-193.366677-39.291708c-83.403656 0-171.837974 23.574538-249.031147 66.383817-12.851541 7.89629-13.060747 22.976113-9.240314 33.865745 4.075858 5.958707 9.962803 9.099222 17.056328 9.099222 4.884705 0 9.996859-1.525254 14.800071-4.404261l0.437872-0.261507 0.451252-0.246911c72.839996-38.846538 148.71712-58.544693 225.534452-58.544694 249.379012 0 452.256024 202.881878 452.256024 452.253591 0 249.377795-202.877012 452.259673-452.256024 452.259673-249.376579 0-452.253591-202.881878-452.253591-452.259673 0-76.807602 19.694506-152.694457 58.534963-225.516207l0.246911-0.460982 0.266372-0.441521c7.265025-12.110808 1.772165-26.726-7.739387-33.862096-2.365725-1.7673-5.702066-2.038537-7.47423-2.038537-8.798793 0-18.591312 5.578002-23.351953 13.289413-42.808063 77.198038-66.383817 165.632356-66.383818 249.02993a491.870054 491.870054 0 0 0 39.292924 193.370327c25.18615 59.280562 61.195035 112.575657 107.058471 158.437876 45.858571 45.859787 99.163397 81.873537 158.434228 107.056039a491.843295 491.843295 0 0 0 193.36911 39.292924 491.928437 491.928437 0 0 0 193.359379-39.283194c59.273264-25.18615 112.57809-61.196251 158.441526-107.059687 45.858571-45.858571 81.871104-99.16218 107.052389-158.435444 26.07649-61.365319 39.292924-126.433087 39.292925-193.367894s-13.216434-131.995277-39.294141-193.370326z" p-id="1041" class="border"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/box-title.png
Normal file
BIN
src/assets/images/box-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
35
src/main.js
35
src/main.js
@ -12,6 +12,38 @@ import store from './store'
|
||||
import router from './router'
|
||||
import directive from './directive' // directive
|
||||
|
||||
|
||||
import VECharts from 'vue-echarts'
|
||||
import * as echarts from 'echarts/core'
|
||||
// 手动引入 ECharts 各模块来减小打包体积
|
||||
import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
PieChart,LineChart,BarChart,CustomChart,GaugeChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
ToolboxComponent
|
||||
} from 'echarts/components'
|
||||
echarts.use([
|
||||
CanvasRenderer,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent,
|
||||
ToolboxComponent,
|
||||
PieChart,
|
||||
LineChart,
|
||||
BarChart,
|
||||
CustomChart,
|
||||
GaugeChart
|
||||
]);
|
||||
|
||||
|
||||
// 注册指令
|
||||
import plugins from './plugins' // plugins
|
||||
import { download } from '@/utils/request'
|
||||
@ -48,6 +80,7 @@ import BaseDialog from '@/components/BaseDialog'
|
||||
const app = createApp(App)
|
||||
|
||||
// 全局方法挂载
|
||||
app.config.globalProperties.$echarts = echarts
|
||||
app.config.globalProperties.useDict = useDict
|
||||
app.config.globalProperties.download = download
|
||||
app.config.globalProperties.parseTime = parseTime
|
||||
@ -67,6 +100,8 @@ app.component('ImagePreview', ImagePreview)
|
||||
app.component('RightToolbar', RightToolbar)
|
||||
app.component('Editor', Editor)
|
||||
app.component('BaseDialog', BaseDialog)
|
||||
// 全局注册组件（也可以使用局部注册）
|
||||
app.component('v-chart', VECharts)
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
|
||||
@ -18,12 +18,12 @@ const init = () => {
|
||||
// scene.background = new THREE.Color(null);//0x100c2a
|
||||
// scene.background.setAlpha(0);
|
||||
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000);
|
||||
camera.position.set(0, 300, 200);
|
||||
camera.position.set(40, 300, 200);
|
||||
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
renderer.setSize(width, height);
|
||||
threeContainer.value.appendChild(renderer.domElement);
|
||||
|
||||
@ -33,13 +33,13 @@ const init = () => {
|
||||
materials.preload();
|
||||
objLoader.setMaterials(materials);
|
||||
objLoader.load('/src/assets/obj/goats_R&D.obj', function (obj) {
|
||||
var scale = 0.06 / obj.scale.x;
|
||||
var scale = 0.07 / obj.scale.x;
|
||||
obj.scale.set(scale, scale, scale);
|
||||
model = obj;
|
||||
const box = new THREE.Box3().setFromObject(model);
|
||||
const size = box.getSize(new THREE.Vector3())
|
||||
// console.log(size,'-----');
|
||||
obj.position.set(-size.x * 0.5, -size.y * 0.5, -size.z * 0.5);
|
||||
obj.position.set(-size.x * 0.5, -size.y * 0.1, -size.z * 0.5);
|
||||
obj.children.forEach((child) => {
|
||||
const c = child;
|
||||
const cm = c.material;
|
||||
|
||||
64
src/views/screen/R_D_Environment/component/humiture_line.vue
Normal file
64
src/views/screen/R_D_Environment/component/humiture_line.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
|
||||
series: [{
|
||||
type: '温度',
|
||||
value: [20, 22, 23, 24, 25, 26, 27]
|
||||
}, {
|
||||
type: '湿度',
|
||||
value: [30, 32, 33, 34, 35, 36, 37]
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
let seriesData = [];
|
||||
prop.data.series.forEach(res => {
|
||||
seriesData.push({
|
||||
name: res.type,
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: prop.data.date.map((key, value) => [key, res.value[value]]),
|
||||
smooth: true,
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: seriesData
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
201
src/views/screen/R_D_Environment/component/humiture_real.vue
Normal file
201
src/views/screen/R_D_Environment/component/humiture_real.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<v-chart :option="options" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const prop = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
Humiture: [{
|
||||
"devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "服装军团",
|
||||
"temp": "18.2",
|
||||
"humidity": "32.2",
|
||||
"status": true
|
||||
}],
|
||||
top: { temp: 0, humidity: 0 },
|
||||
bottom: { temp: 0, humidity: 0 }
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
|
||||
//x轴数据
|
||||
let x = [];
|
||||
//y轴数据
|
||||
let y = { temp: [], humidity: [] };
|
||||
|
||||
prop.value.Humiture.forEach((res) => {
|
||||
x.push(res.name);
|
||||
y.temp.push(res.temp);
|
||||
y.humidity.push(res.humidity);
|
||||
});
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
|
||||
},
|
||||
legend: {
|
||||
// bottom: "3%",
|
||||
top: '6%'
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4992FF", "#7CFFB2", "#FF6E76"],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x,
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: "温度(°C)/湿度(%RH)",
|
||||
type: "value",
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
//name: `${'温度'}(°C)(${t('messages.fanwei')}：${value.bottom.temp}°C - ${value.top.temp}°C)`,
|
||||
type: "bar",
|
||||
data: y.temp,
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
if (
|
||||
index_color <= prop.value.bottom.temp ||
|
||||
index_color >= prop.value.top.temp
|
||||
) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#4992FF";
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: "{c} °C",
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
// 设置最大值和最小值
|
||||
silent: true, //基线显示 隐藏
|
||||
symbol: "none", // 不显示箭头和圆点
|
||||
data: [
|
||||
{
|
||||
name: '温度',
|
||||
yAxis: prop.value.bottom.temp,
|
||||
label: {
|
||||
formatter: `温度下限值： ${prop.value.bottom.temp} °C`,
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "yellow", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
yAxis: prop.value.top.temp,
|
||||
label: {
|
||||
formatter: `温度上限值：${prop.value.top.temp} °C`,
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "yellow", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
//name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${value.bottom.humidity}%RH - ${value.top.humidity}%RH)`,
|
||||
name: `湿度(%RH)(范围：${prop.value.bottom.humidity}%RH - ${prop.value.top.humidity}%RH)`,
|
||||
type: "bar",
|
||||
data: y.humidity,
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
|
||||
if (
|
||||
index_color <= prop.value.bottom.humidity ||
|
||||
index_color >= prop.value.top.humidity
|
||||
) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#7CFFB2";
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: "{c} %RH",
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
// 设置最大值和最小值
|
||||
silent: true, //基线显示 隐藏
|
||||
symbol: "none", // 不显示箭头和圆点
|
||||
data: [
|
||||
{
|
||||
name: "湿度",
|
||||
yAxis: prop.value.bottom.humidity,
|
||||
label: {
|
||||
// formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + value.bottom.humidity + "%RH",
|
||||
formatter: `湿度下限值：` + prop.value.bottom.humidity + "%RH",
|
||||
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "red", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "湿度",
|
||||
yAxis: prop.value.top.humidity,
|
||||
label: {
|
||||
// formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + value.top.humidity + "%RH",
|
||||
formatter: `湿度上限值：` + prop.value.top.humidity + "%RH",
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "red", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '超标(温湿度未达正常值均为超标)',
|
||||
type: "bar",
|
||||
color: '#FF6E76'
|
||||
}
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
39
src/views/screen/R_D_Environment/component/item.vue
Normal file
39
src/views/screen/R_D_Environment/component/item.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="item-container">
|
||||
<div class="box-title">{{ prop.title }}</div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.box-title {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 25px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
background: url('/src/assets/images/box-title.png') no-repeat center center / 100% 100%;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 41px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/views/screen/R_D_Environment/component/lineChart.vue
Normal file
61
src/views/screen/R_D_Environment/component/lineChart.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function (params) {
|
||||
let tooltipText = '';
|
||||
let xAxisValue = params[0].name; // 获取 x 轴的值
|
||||
params.forEach((item) => {
|
||||
tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
|
||||
});
|
||||
return `${xAxisValue}<br>${tooltipText}`;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "耗电量",
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
|
||||
{ offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
175
src/views/screen/R_D_Environment/component/pm.vue
Normal file
175
src/views/screen/R_D_Environment/component/pm.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
|
||||
series: [{
|
||||
type: '温度',
|
||||
value: [20, 22, 23, 24, 25, 26, 27]
|
||||
}, {
|
||||
type: '湿度',
|
||||
value: [30, 32, 33, 34, 35, 36, 37]
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
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: 80,
|
||||
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: 60,
|
||||
name: "PM10",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
103
src/views/screen/R_D_Environment/component/proge.vue
Normal file
103
src/views/screen/R_D_Environment/component/proge.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class=""></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const bodyMax = 150;
|
||||
const labelSetting = {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, -20],
|
||||
formatter: function (param) {
|
||||
return ((param.value / bodyMax) * 100).toFixed(0) + '%';
|
||||
},
|
||||
fontSize: 18,
|
||||
fontFamily: 'Arial'
|
||||
};
|
||||
const markLineSetting = {
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
opacity: 0.3
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: 'max',
|
||||
label: {
|
||||
formatter: 'max: {c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'min',
|
||||
label: {
|
||||
formatter: 'min: {c}'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
option = {
|
||||
tooltip: {
|
||||
},
|
||||
xAxis: {
|
||||
data: ['a', 'b'],
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
max: bodyMax,
|
||||
offset: 20,
|
||||
splitLine: { show: false },
|
||||
},
|
||||
grid: {
|
||||
top: 'center',
|
||||
height: 230
|
||||
},
|
||||
markLine: {
|
||||
z: -100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'typeA',
|
||||
type: 'pictorialBar',
|
||||
symbolClip: true,
|
||||
symbolBoundingData: bodyMax,
|
||||
symbolRepeat: true, //图形是否重复
|
||||
symbolSize: [25, 6], //图形元素的尺寸
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
}
|
||||
],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
name: 'full',
|
||||
type: 'pictorialBar',
|
||||
symbolBoundingData: bodyMax,
|
||||
label: labelSetting,
|
||||
animationDuration: 0,
|
||||
symbolRepeat: true, //图形是否重复
|
||||
symbolSize: [25, 6], //图形元素的尺寸
|
||||
itemStyle: {
|
||||
color: '#ccc'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},{
|
||||
value: 100,
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
37
src/views/screen/R_D_Environment/component/svgFenchen.vue
Normal file
37
src/views/screen/R_D_Environment/component/svgFenchen.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<svg t="1730769272802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1039" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M378.105721 356.776833a62.282417 62.282417 0 0 0-0.01338-63.076668 62.287282 62.287282 0 0 0-55.100101-30.706985c-33.842635 0.76506-60.877578 28.426402-60.867847 62.273902 0.00973 33.852366 27.053187 61.499113 60.895823 62.245928a62.275119 62.275119 0 0 0 55.085505-30.736177zM751.756435 356.776833a62.27147 62.27147 0 0 0-55.114696-93.783653c-33.842635 0.76506-60.877578 28.426402-60.867848 62.273902 0.00973 33.852366 27.058053 61.499113 60.900688 62.245928a62.275119 62.275119 0 0 0 55.081856-30.736177zM540.953941 325.271948c0-17.199853-13.940139-31.139992-31.138776-31.139993-17.194987 0-31.135127 13.940139-31.135127 31.139993 0 17.193771 13.940139 31.133911 31.135127 31.13391 17.198636 0 31.138776-13.940139 31.138776-31.13391zM323.020216 761.162508a62.279984 62.279984 0 0 0 55.085505-30.731312 62.282417 62.282417 0 0 0-0.01338-63.076667 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867847 62.273903 0.00973 33.848717 27.053187 61.495464 60.895823 62.241062zM696.675795 761.162508a62.27147 62.27147 0 0 0 55.066045-93.807979 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867848 62.273903 0.00973 33.848717 27.058053 61.495464 60.901904 62.241062zM478.680038 698.922662c0 17.194987 13.940139 31.135127 31.135127 31.135127 17.198636 0 31.138776-13.940139 31.138776-31.135127 0-17.201069-13.940139-31.141208-31.138776-31.141208-17.194987 0-31.135127 13.940139-31.135127 31.141208zM665.502963 512.093656c0 17.199853 13.945005 31.139992 31.139992 31.139992 17.199853 0 31.139992-13.940139 31.139992-31.139992 0-17.193771-13.940139-31.133911-31.139992-31.133911-17.196204 0-31.139992 13.940139-31.139992 31.133911zM291.852248 512.093656c0 17.199853 13.940139 31.139992 31.139992 31.139992 17.194987 0 31.135127-13.940139 31.135127-31.139992 0-17.193771-13.940139-31.133911-31.135127-31.133911-17.199853 0-31.139992 13.940139-31.139992 31.133911zM448.952183 512.093656c0.003649 33.852366 27.053187 61.495464 60.895822 62.245928a62.27147 62.27147 0 0 0 55.08064-30.736177 62.273903 62.273903 0 0 0-55.11348-93.78487c-33.838986 0.766276-60.872713 28.422754-60.862982 62.275119z"
|
||||
p-id="1040"></path>
|
||||
<path
|
||||
d="M970.857819 318.763468c-25.181285-59.281778-61.204765-112.580522-107.052389-158.434228-45.863436-45.863436-99.171911-81.883267-158.441526-107.059687a491.752072 491.752072 0 0 0-193.366677-39.291708c-83.403656 0-171.837974 23.574538-249.031147 66.383817-12.851541 7.89629-13.060747 22.976113-9.240314 33.865745 4.075858 5.958707 9.962803 9.099222 17.056328 9.099222 4.884705 0 9.996859-1.525254 14.800071-4.404261l0.437872-0.261507 0.451252-0.246911c72.839996-38.846538 148.71712-58.544693 225.534452-58.544694 249.379012 0 452.256024 202.881878 452.256024 452.253591 0 249.377795-202.877012 452.259673-452.256024 452.259673-249.376579 0-452.253591-202.881878-452.253591-452.259673 0-76.807602 19.694506-152.694457 58.534963-225.516207l0.246911-0.460982 0.266372-0.441521c7.265025-12.110808 1.772165-26.726-7.739387-33.862096-2.365725-1.7673-5.702066-2.038537-7.47423-2.038537-8.798793 0-18.591312 5.578002-23.351953 13.289413-42.808063 77.198038-66.383817 165.632356-66.383818 249.02993a491.870054 491.870054 0 0 0 39.292924 193.370327c25.18615 59.280562 61.195035 112.575657 107.058471 158.437876 45.858571 45.859787 99.163397 81.873537 158.434228 107.056039a491.843295 491.843295 0 0 0 193.36911 39.292924 491.928437 491.928437 0 0 0 193.359379-39.283194c59.273264-25.18615 112.57809-61.196251 158.441526-107.059687 45.858571-45.858571 81.871104-99.16218 107.052389-158.435444 26.07649-61.365319 39.292924-126.433087 39.292925-193.367894s-13.216434-131.995277-39.294141-193.370326z"
|
||||
p-id="1041" class="border"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg) ;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
36
src/views/screen/R_D_Environment/component/svgJiaquan.vue
Normal file
36
src/views/screen/R_D_Environment/component/svgJiaquan.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<svg t="1730777236728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1648" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M512 22.26087A488.136348 488.136348 0 0 0 165.709913 165.709913 488.136348 488.136348 0 0 0 22.26087 512a488.136348 488.136348 0 0 0 143.449043 346.290087A488.136348 488.136348 0 0 0 512 1001.73913a488.136348 488.136348 0 0 0 346.290087-143.449043A488.136348 488.136348 0 0 0 1001.73913 512a488.136348 488.136348 0 0 0-143.449043-346.290087A488.136348 488.136348 0 0 0 512 22.26087m0-22.26087c282.779826 0 512 229.220174 512 512S794.779826 1024 512 1024 0 794.779826 0 512 229.220174 0 512 0z"
|
||||
p-id="1649"></path>
|
||||
<path
|
||||
d="M748.477217 625.775304a57.677913 57.677913 0 0 0-35.328 12.198957l-73.928347-42.674087a130.715826 130.715826 0 0 0-80.339479-165.954783v-69.565217a84.057043 84.057043 0 1 0-87.485217-5.075478v74.551652a130.715826 130.715826 0 0 0-80.339478 165.954782l-73.928348 42.674087a57.566609 57.566609 0 1 0 18.18713 23.04l68.140522-39.379478a131.027478 131.027478 0 0 0 223.187478 0l68.140522 39.379478a57.655652 57.655652 0 0 0-4.786087 23.04 58.301217 58.301217 0 1 0 58.434783-58.212174z m-247.874782-258.226087a80.740174 80.740174 0 0 0 29.184 1.424696v53.648696a124.14887 124.14887 0 0 0-29.117218 0v-55.073392z m14.558608 287.47687a102.066087 102.066087 0 1 1 102.110609-102.021565 102.066087 102.066087 0 0 1-102.110609 101.954782z"
|
||||
p-id="1650" class="border"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
37
src/views/screen/R_D_Environment/component/svgShidu.vue
Normal file
37
src/views/screen/R_D_Environment/component/svgShidu.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<svg t="1730777853051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2254" id="mx_n_1730777853052" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M511.952979 1023.896979a505.462446 505.462446 0 0 1-198.72418-40.381232c-60.914463-25.881164-115.693372-62.891387-162.824501-110.022515-47.131128-47.131128-84.141351-101.902162-110.022514-162.8245a505.462446 505.462446 0 0 1-40.381233-198.72418c0-85.708713 24.227164-176.592083 68.223569-255.928957 4.891115-7.923448 14.956887-13.657316 23.998754-13.657316 1.8194 0 5.245543 0.275667 7.679287 2.095067 9.774353 7.332734 15.421582 22.352631 7.954953 34.797013l-0.275667 0.456819-0.252038 0.472571C67.412872 355.019318 47.17106 433.009363 47.17106 511.944552c0 256.283385 208.498533 464.781919 464.781919 464.781918s464.781919-208.498533 464.781919-464.781918-208.498533-464.781919-464.781919-464.781919c-78.943064 0-156.925233 20.241811-231.780554 60.166224l-0.464696 0.252039-0.448943 0.26779c-4.938372 2.961448-10.191791 4.52881-15.208925 4.52881-7.293353 0-13.342268-3.229238-17.532401-9.349039-3.922343-11.192068-3.709686-26.692412 9.498686-34.804889 79.328998-43.996404 170.212368-68.223568 255.928957-68.223568a505.430941 505.430941 0 0 1 198.72418 40.381232c60.906587 25.873288 115.693372 62.891387 162.824501 110.022515 47.123252 47.123252 84.141351 101.902162 110.022515 162.824501 26.794802 63.072539 40.381232 129.933526 40.381232 198.72418s-13.58643 135.659517-40.381232 198.72418c-25.881164 60.914463-62.891387 115.693372-110.022515 162.824501-47.131128 47.131128-101.910038 84.141351-162.824501 110.022514a505.525456 505.525456 0 0 1-198.716304 40.373356z"
|
||||
p-id="2255" class="border"></path>
|
||||
<path
|
||||
d="M716.088103 531.012811c-23.57344-52.345167-57.480443-102.288095-93.364371-155.160967-25.014783-36.852699-50.872319-74.949835-73.587254-114.74823l-0.181153-0.322923-38.506698-78.344474a1190.187004 1190.187004 0 0 0-16.587259 32.930355c-7.758048 15.783887-15.783887 32.111232-24.227164 46.855462-23.124497 40.538756-47.942376 79.116341-71.949007 116.425858-30.945555 48.076271-62.930768 97.79079-91.820637 152.514566-28.094374 69.444378-21.454745 144.449347 18.257012 205.867886 41.641423 64.411492 113.488039 104.438295 187.508483 104.438295 1.252314 0 2.496753-0.015752 3.756944-0.039381 75.761083-1.236562 145.024309-41.239737 185.255893-107.005934 38.490946-62.930768 44.256318-138.975394 15.445211-203.410513z m-41.594166 166.19551c-30.709269 58.323196-95.538199 103.595543-157.933386 106.060791h-0.716733c-65.269996-1.559486-126.877564-41.869832-160.90271-100.137895-34.607984-59.284091-34.214175-131.359117-6.395468-188.296103 25.314079-49.493985 83.897189-140.542756 130.122555-203.953971a37.293765 37.293765 0 0 1 61.158625 0.669476c21.375983 30.638384 49.470357 71.61033 66.994882 99.94099 19.462068 31.47326 37.845099 61.198006 50.9117 81.16415l0.3308 0.535581c40.341851 69.365616 49.186814 141.818699 16.429735 204.016981zM501.745435 594.298007c-63.994053 35.198698-126.475878 15.07503-159.390481-1.016029-1.590991 36.56128 7.529639 74.524521 27.133479 108.1086 31.796184 54.463862 85.015608 86.535713 146.032461 88.000685l0.669476-0.007876c50.4155-1.992676 99.232133-29.716869 130.098926-72.413702a416.099181 416.099181 0 0 0 20.604116-37.333147c14.051125-34.584356 16.603011-71.964759 7.742296-109.778353-36.33287-8.616553-101.847028-14.633963-172.890273 24.439822z"
|
||||
p-id="2256"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fill } from 'three/src/extras/TextureUtils.js';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
37
src/views/screen/R_D_Environment/component/svgTVOC.vue
Normal file
37
src/views/screen/R_D_Environment/component/svgTVOC.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<svg t="1730777586016" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1965" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M160 512c0-32-19.2-61.44-48.64-74.24l-10.24-3.84 1.28-11.52c17.92-96 64-183.04 133.12-252.16 90.88-90.88 211.2-140.8 340.48-140.8 176.64 0 337.92 96 422.4 250.88 3.84 6.4 12.8 8.96 19.2 5.12 6.4-3.84 8.96-12.8 5.12-19.2C934.4 102.4 762.88 0 576 0c-69.12 0-135.68 14.08-198.4 39.68-61.44 25.6-115.2 62.72-162.56 110.08-47.36 47.36-83.2 102.4-108.8 162.56-15.36 35.84-25.6 72.96-32 110.08l-1.28 8.96-8.96 2.56c-38.4 7.68-64 40.96-64 78.08 0 43.52 35.84 79.36 79.36 79.36 44.8 0 80.64-35.84 80.64-79.36z m912.64-79.36c-43.52 0-79.36 35.84-79.36 79.36 0 32 19.2 61.44 48.64 74.24l10.24 3.84-2.56 11.52c-17.92 96-64 183.04-133.12 252.16-90.88 90.88-211.2 140.8-340.48 140.8-176.64 0-337.92-96-422.4-250.88-2.56-5.12-7.68-7.68-12.8-7.68-2.56 0-5.12 0-6.4 1.28-3.84 1.28-6.4 5.12-6.4 8.96-1.28 3.84-1.28 7.68 1.28 11.52C217.6 921.6 389.12 1024 576 1024c69.12 0 135.68-14.08 198.4-39.68 61.44-25.6 115.2-62.72 162.56-110.08 47.36-47.36 83.2-102.4 108.8-162.56 15.36-35.84 25.6-72.96 32-110.08l1.28-8.96 8.96-2.56c38.4-7.68 64-40.96 64-78.08 0-43.52-35.84-79.36-79.36-79.36z"
|
||||
p-id="1966" class="border"></path>
|
||||
<path
|
||||
d="M266.24 423.68h-69.12v-21.76h162.56v21.76h-69.12V627.2h-25.6V423.68zM382.72 401.92H409.6l38.4 124.16c7.68 26.88 12.8 47.36 21.76 74.24h1.28c8.96-26.88 14.08-47.36 23.04-74.24l37.12-124.16h25.6L483.84 627.2h-29.44l-71.68-225.28zM569.6 514.56c0-71.68 39.68-115.2 94.72-115.2 56.32 0 94.72 43.52 94.72 115.2s-39.68 117.76-94.72 117.76c-55.04-1.28-94.72-46.08-94.72-117.76z m163.84 0c0-57.6-26.88-93.44-69.12-93.44-40.96 0-69.12 35.84-69.12 93.44s26.88 94.72 69.12 94.72c42.24 0 69.12-37.12 69.12-94.72zM794.88 514.56c0-71.68 42.24-116.48 98.56-116.48 26.88 0 48.64 12.8 61.44 26.88l-14.08 16.64c-11.52-12.8-26.88-21.76-46.08-21.76-43.52 0-72.96 35.84-72.96 93.44s28.16 94.72 71.68 94.72c21.76 0 38.4-8.96 53.76-25.6l14.08 15.36c-17.92 20.48-39.68 32-69.12 32-56.32 1.28-97.28-42.24-97.28-115.2z"
|
||||
p-id="1967"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fill } from 'three/src/extras/TextureUtils.js';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
37
src/views/screen/R_D_Environment/component/svgWendu.vue
Normal file
37
src/views/screen/R_D_Environment/component/svgWendu.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<svg t="1730777903037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2469" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M511.2 959.1c-59.7 0.1-118.7-11.9-173.6-35.3-53.2-22.6-101.1-54.9-142.3-96.1-41.2-41.2-73.5-89-96.1-142.3a441 441 0 0 1-35.3-173.6c0-74.9 21.2-154.3 59.6-223.6 4.3-6.9 13.1-11.9 21-11.9 1.6 0 4.6 0.2 6.7 1.8 8.5 6.4 13.5 19.5 6.9 30.4l-0.2 0.4-0.2 0.4c-34.9 65.4-52.6 133.5-52.6 202.5 0 223.9 182.2 406.1 406.1 406.1 223.9 0 406.1-182.2 406.1-406.1 0-223.9-182.2-406.1-406.1-406.1-69 0-137.1 17.7-202.5 52.6l-0.4 0.2-0.4 0.2c-4.3 2.6-8.9 4-13.3 4-6.4 0-11.7-2.8-15.3-8.2-3.4-9.8-3.2-23.3 8.3-30.4 69.3-38.4 148.7-59.6 223.6-59.6 59.7-0.1 118.7 11.9 173.6 35.3 53.2 22.6 101.1 54.9 142.3 96.1 41.2 41.2 73.5 89 96.1 142.3 23.4 55.1 35.3 113.5 35.3 173.6s-11.9 118.5-35.3 173.6c-22.6 53.2-54.9 101.1-96.1 142.3-41.2 41.2-89 73.5-142.3 96.1a441 441 0 0 1-173.6 35.3z m0 0"
|
||||
p-id="2470" class="border"></path>
|
||||
<path
|
||||
d="M531.5 583.1l-6-2.7V352.8c0-9.5-12-17.6-26.2-17.6s-26.2 8-26.2 17.6v227.7l-6.1 2.7c-28.8 12.9-47.5 41.9-47.5 73.8 0 44.5 35.8 80.7 79.7 80.7 43.9 0 79.7-36.2 79.7-80.7 0.1-31.9-18.5-61-47.4-73.9z m81.7-48.4l-3.2-3.1V286.8c0-24-12.3-47.2-33.8-63.6-20.7-15.9-48-24.6-76.9-24.6-28.9 0-56.2 8.7-76.9 24.6-21.5 16.5-33.8 39.7-33.8 63.6v244.9l-3.2 3.1c-33.1 31.6-52.1 76.2-52.1 122.3 0 44.9 17.3 87.1 48.6 118.9 31.4 31.8 73 49.2 117.4 49.2 44.3 0 86-17.5 117.4-49.2 31.4-31.8 48.6-74 48.6-118.9 0-46.2-19-90.8-52.1-122.4z m-113.9 263c-76.6 0-138.9-63.1-138.9-140.7 0-42.1 18.3-81.6 50.4-108.4l4.9-4.1V286.8c0-16.5 9.6-32.6 26.3-44.1 15.7-10.8 36.1-16.8 57.4-16.8 21.3 0 41.7 5.9 57.4 16.8 16.7 11.5 26.3 27.5 26.3 44.1v257.7l4.9 4.1c32 26.9 50.4 66.4 50.4 108.4-0.2 77.5-62.5 140.7-139.1 140.7zM642 304.5h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.8-8.7-10.6-8.7H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7z m36.4 20.6H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 38H642c-5.9 0-10.6 3.9-10.6 8.7s4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 0"
|
||||
p-id="2471"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fill } from 'three/src/extras/TextureUtils.js';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
src/views/screen/R_D_Environment/component/svgYanwu.vue
Normal file
34
src/views/screen/R_D_Environment/component/svgYanwu.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<svg t="1730776964174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="7087" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M631.466667 230.4l-17.066667-8.533333 17.066667-38.4 17.066666 8.533333c76.8 38.4 140.8 98.133333 179.2 174.933333l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-34.133333-68.266667-89.6-123.733333-157.866666-157.866667z m17.066666 601.6l-17.066666 8.533333-17.066667-38.4 17.066667-8.533333c68.266667-34.133333 123.733333-89.6 162.133333-157.866667l8.533333-17.066666 38.4 21.333333-8.533333 17.066667c-42.666667 76.8-106.666667 136.533333-183.466667 174.933333zM674.133333 170.666667l-17.066666-8.533334 17.066666-38.4 17.066667 8.533334c85.333333 42.666667 157.866667 110.933333 200.533333 196.266666l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-38.4-81.066667-102.4-140.8-179.2-179.2z m192 490.666666l38.4 21.333334-8.533333 17.066666c-42.666667 85.333333-115.2 153.6-200.533333 196.266667l-17.066667 8.533333-17.066667-38.4 17.066667-8.533333c76.8-38.4 140.8-98.133333 183.466667-174.933333l4.266666-21.333334zM392.533333 793.6l17.066667 8.533333-17.066667 38.4-17.066666-8.533333c-76.8-38.4-140.8-98.133333-179.2-174.933333l-12.8-17.066667 38.4-21.333333 8.533333 17.066666c38.4 68.266667 93.866667 123.733333 162.133333 157.866667z m0-610.133333l17.066667 38.4-17.066667 8.533333c-68.266667 34.133333-123.733333 89.6-162.133333 157.866667l-8.533333 17.066666-38.4-17.066666 8.533333-17.066667c42.666667-81.066667 106.666667-140.8 183.466667-179.2l17.066666-8.533333zM157.866667 366.933333l-38.4-21.333333 8.533333-17.066667c42.666667-85.333333 115.2-153.6 200.533333-196.266666l17.066667-8.533334 17.066667 38.4-12.8 8.533334c-76.8 38.4-145.066667 98.133333-183.466667 174.933333l-8.533333 21.333333z m192 490.666667l17.066666 8.533333-17.066666 38.4-17.066667-8.533333c-85.333333-42.666667-157.866667-110.933333-200.533333-196.266667l-8.533334-17.066666 38.4-21.333334 8.533334 17.066667c38.4 76.8 102.4 140.8 179.2 179.2zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 213.333333 469.333333 469.333333-213.333333 469.333333-469.333333 469.333333z m0-981.333333C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m426.666667 512c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667 17.066667-42.666667 42.666667-42.666667 42.666667 21.333333 42.666667 42.666667z m-426.666667 85.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333z m0-213.333333c-72.533333 0-128 59.733333-128 128s59.733333 128 128 128 128-59.733333 128-128-59.733333-128-128-128z m0 298.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z m0-384c-119.466667 0-213.333333 93.866667-213.333333 213.333333s93.866667 213.333333 213.333333 213.333333 213.333333-93.866667 213.333333-213.333333-98.133333-213.333333-213.333333-213.333333z"
|
||||
p-id="7088" class="border"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg) ;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
40
src/views/screen/R_D_Environment/component/svgZaosheng.vue
Normal file
40
src/views/screen/R_D_Environment/component/svgZaosheng.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<svg t="1730777460223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1806" width="256" height="256" :fill="prop.color">
|
||||
<path
|
||||
d="M204.8 869.171l29.491-29.491a431.923 431.923 0 0 1-33.382-31.54l-29.082 29.492q15.975 16.589 32.973 31.54z"
|
||||
p-id="1807"></path>
|
||||
<path
|
||||
d="M512 40.96a471.04 471.04 0 0 0-367.206 765.952l29.286-28.672a430.08 430.08 0 1 1 92.16 87.04l-28.672 29.491A471.04 471.04 0 1 0 512 40.96z"
|
||||
p-id="1808" class="border"></path>
|
||||
<path
|
||||
d="M522.24 634.88v-40.96a81.92 81.92 0 0 0 0-163.84v-40.96a122.88 122.88 0 0 1 0 245.76z m-40.96-350.003a20.48 20.48 0 0 0-4.096 0 86.835 86.835 0 0 0-67.584 24.78l-63.488 63.489H276.48a40.96 40.96 0 0 0-40.96 40.96v204.8a40.96 40.96 0 0 0 40.96 40.96h77.005l55.296 55.296a81.92 81.92 0 0 0 67.379 22.118 20.48 20.48 0 0 0 5.12 0 20.48 20.48 0 0 0 20.48-20.48V305.357a20.48 20.48 0 0 0-20.48-20.48zM460.8 697.549a40.96 40.96 0 0 1-23.142-11.264l-66.15-66.15H358.4v-1.23h-81.92v-204.8h27.648l-1.229 1.23h57.959l76.595-76.596A40.96 40.96 0 0 1 460.8 327.68v369.869z m266.24-201.933H768a20.48 20.48 0 0 1 0 40.96h-40.96a20.48 20.48 0 0 1 0-40.96z m-80.691-153.6l29.491-29.082a20.48 20.48 0 0 1 28.877 28.877l-28.877 29.082a20.48 20.48 0 0 1-28.877-28.877z m36.25 311.091l28.876 28.877a20.48 20.48 0 1 1-28.877 28.877l-28.876-28.877a20.48 20.48 0 1 1 28.876-28.877z"
|
||||
p-id="1809"></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fill } from 'three/src/extras/TextureUtils.js';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const prop = ref({
|
||||
color: '#469DE9'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/** .border设置循环旋转动画效果 */
|
||||
.border {
|
||||
animation: rotate 3s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,127 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- <img id="bg-img" class="img " :src="gitBG"> -->
|
||||
<ThreeBG style="position: absolute;left: 0;top: 0;" />
|
||||
<div class="abs-header">研发中心环境实时监测系统</div>
|
||||
<div class="l-box">
|
||||
<div class="lbox1">
|
||||
<ItemVue title="温湿度">
|
||||
<Humiture />
|
||||
</ItemVue>
|
||||
</div>
|
||||
<div class="lbox1">
|
||||
<ItemVue title="粉尘">
|
||||
<PmVue />
|
||||
</ItemVue>
|
||||
</div>
|
||||
<div class="lbox1">
|
||||
<ItemVue title="温湿度">
|
||||
<LineChart />
|
||||
</ItemVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-box">
|
||||
<div class="ct-sensor">
|
||||
<div class="sensor-item" v-for="item in sensor_list">
|
||||
<!-- <svg-icon ref="fenchen" icon-class="fenchen" :color="'#469DE9'" class="sensor-icon" /> -->
|
||||
<component style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="cb-box">
|
||||
<div class="cbox">
|
||||
<ItemVue title="温湿度">
|
||||
<LineChart />
|
||||
</ItemVue>
|
||||
</div>
|
||||
<div class="cbox">
|
||||
<ItemVue title="温湿度">
|
||||
<LineChart />
|
||||
</ItemVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r-box">
|
||||
<div class="rbox-item">
|
||||
<ItemVue title="温湿度">
|
||||
<LineChart />
|
||||
</ItemVue>
|
||||
</div>
|
||||
<div class="rbox-item">
|
||||
<ItemVue title="温湿度">
|
||||
</ItemVue>
|
||||
</div>
|
||||
<div class="rbox-item">
|
||||
<ItemVue title="温湿度">
|
||||
</ItemVue>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <ThreeBG /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import gitBG from '@/assets/images/gif-bg.gif';
|
||||
import ThreeBG from './component/ThreeBG.vue';
|
||||
import { ref,reactive, onMounted } from 'vue';
|
||||
import ThreeBG from './component/threeBG.vue';
|
||||
import ItemVue from './component/item.vue';
|
||||
import Humiture from './component/humiture_line.vue';
|
||||
import PmVue from './component/pm.vue';
|
||||
import LineChart from './component/lineChart.vue';
|
||||
import SvgFenchen from './component/svgFenchen.vue';
|
||||
import SvgJiaquan from './component/svgJiaquan.vue';
|
||||
import SvgZaosheng from './component/svgZaosheng.vue';
|
||||
import SvgTVOC from './component/svgTVOC.vue';
|
||||
import SvgShidu from './component/svgShidu.vue';
|
||||
import SvgWendu from './component/svgWendu.vue';
|
||||
import SvgYanwu from './component/svgYanwu.vue';
|
||||
import { color } from 'echarts';
|
||||
|
||||
|
||||
let sensor_list = reactive([
|
||||
{
|
||||
name:'温度',
|
||||
component:SvgWendu,
|
||||
value: 20,
|
||||
unit: '℃'
|
||||
},
|
||||
{
|
||||
name:'湿度',
|
||||
component:SvgShidu,
|
||||
value: 20,
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
name:'甲醛',
|
||||
component:SvgJiaquan,
|
||||
value: 20,
|
||||
unit: 'mg/m³'
|
||||
},
|
||||
{
|
||||
name:'TVOC',
|
||||
component:SvgTVOC,
|
||||
value: 20,
|
||||
unit: 'mg/m³'
|
||||
},
|
||||
{
|
||||
name:'噪声',
|
||||
component:SvgZaosheng,
|
||||
value: 20,
|
||||
unit: 'dB'
|
||||
},
|
||||
{
|
||||
name:'烟雾',
|
||||
component:SvgYanwu,
|
||||
value: 20,
|
||||
unit: 'mg/m³'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -26,13 +139,84 @@ import ThreeBG from './component/ThreeBG.vue';
|
||||
/* 或者其他你需要的大小设置 */
|
||||
background-position: center;
|
||||
|
||||
.bg-img {
|
||||
.abs-header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #00c6ff;
|
||||
}
|
||||
|
||||
.l-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 33px;
|
||||
width: 410px;
|
||||
height: 950px;
|
||||
|
||||
.lbox1 {
|
||||
width: 100%;
|
||||
height: 316px;
|
||||
}
|
||||
}
|
||||
.ct-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 445px;
|
||||
width: 1026px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.ct-sensor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.sensor-item {
|
||||
width: 146px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.sensor-icon {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cb-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
bottom: 30px;
|
||||
left: 445px;
|
||||
width: 1026px;
|
||||
height: 316px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cbox {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
.r-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 38px;
|
||||
width: 410px;
|
||||
height: 950px;
|
||||
|
||||
.rbox-item {
|
||||
width: 100%;
|
||||
height: 316px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user