hanzhengzheng/RAS-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hzz 2024-11-12 17:01:40 +08:00
parent e03f9e5178
commit 5a45cbf558
5 changed files with 167 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -19,9 +19,9 @@
"@vueup/vue-quill": "1.1.0", "@vueup/vue-quill": "1.1.0",
"@vueuse/core": "9.5.0", "@vueuse/core": "9.5.0",
"axios": "0.27.2", "axios": "0.27.2",
"echarts": "5.4.0", "echarts": "^5.5.1",
"element-plus": "2.2.27", "element-plus": "2.2.27",
"file-saver": "2.0.5", "file-saver": "^2.0.5",
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
@ -30,6 +30,7 @@
"three": "^0.169.0", "three": "^0.169.0",
"vue": "3.2.45", "vue": "3.2.45",
"vue-cropper": "1.0.3", "vue-cropper": "1.0.3",
"vue-echarts": "^7.0.3",
"vue-router": "4.1.4" "vue-router": "4.1.4"
}, },
"devDependencies": { "devDependencies": {

9
src/main.js
View File

@ -20,14 +20,15 @@ import {
CanvasRenderer CanvasRenderer
} from 'echarts/renderers' } from 'echarts/renderers'
import { import {
PieChart,LineChart,BarChart,CustomChart,GaugeChart PieChart,LineChart,BarChart,CustomChart,GaugeChart,PictorialBarChart
} from 'echarts/charts' } from 'echarts/charts'
import { import {
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
LegendComponent, LegendComponent,
GridComponent, GridComponent,
ToolboxComponent ToolboxComponent,
MarkLineComponent
} from 'echarts/components' } from 'echarts/components'
echarts.use([ echarts.use([
CanvasRenderer, CanvasRenderer,
@ -36,11 +37,13 @@ echarts.use([
LegendComponent, LegendComponent,
GridComponent, GridComponent,
ToolboxComponent, ToolboxComponent,
MarkLineComponent,
PieChart, PieChart,
LineChart, LineChart,
BarChart, BarChart,
CustomChart, CustomChart,
GaugeChart GaugeChart,
PictorialBarChart
]); ]);

95
src/views/screen/R_D_Environment/component/lineChart.vue
View File

@ -1,60 +1,61 @@
<template> <template>
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" /> <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
const prop = defineProps({ const prop = defineProps({
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
return {}; return {};
}
} }
}
}); });
const options = computed(() => { const options = computed(() => {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: function (params) { formatter: function (params) {
let tooltipText = ''; let tooltipText = '';
let xAxisValue = params[0].name; // 获取 x 轴的值 let xAxisValue = params[0].name; // 获取 x 轴的值
params.forEach((item) => { params.forEach((item) => {
tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`; tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
}); });
return `${xAxisValue}<br>${tooltipText}`; return `${xAxisValue}<br>${tooltipText}`;
} }
}, },
xAxis: { backgroundColor: 'transparent',
type: 'category', xAxis: {
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'], type: 'category',
}, data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
yAxis: { },
type: 'value', yAxis: {
}, type: 'value',
series: [ },
{ series: [
name: "耗电量", {
data: [820, 932, 901, 934, 1290, 1330, 1320], name: "耗电量",
type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320],
smooth: true, type: 'line',
areaStyle: { smooth: true,
color: { areaStyle: {
type: 'linear', color: {
x: 0, type: 'linear',
y: 0, x: 0,
x2: 0, y: 0,
y2: 1, x2: 0,
colorStops: [ y2: 1,
{ offset: 0, color: 'rgba(0, 198, 255, 0.5)' }, colorStops: [
{ offset: 1, color: 'rgba(0, 114, 255, 0.01)' } { offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
] { offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
} ]
}, }
} },
] }
}; ]
};
}); });
</script> </script>

194
src/views/screen/R_D_Environment/component/proge.vue
View File

@ -1,101 +1,113 @@
<template> <template>
<div class=""></div> <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template> </template>
<script setup> <script setup>
import { computed } from 'vue';
const prop = defineProps({
data: {
type: Object,
default: () => {
return {
xData: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5', '办公室6'],
seriesData: [80, 60, 60, 60, 60, 60]
};
}
}
});
const bodyMax = 150; 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,
}
]
}
] const options = computed(() => {
};
const labelSetting = {
show: true,
position: 'top',
offset: [0, -20],
formatter: function (param) {
console.log(param.data, 'param', param.dataIndex);
return prop.data.xData[param.dataIndex] + '\r\n' + prop.data.seriesData[param.dataIndex] + 'dB';
},
fontSize: 14,
fontFamily: 'Arial',
color: '#33FFFF'
};
return {
tooltip: {
},
backgroundColor: 'transparent',
xAxis: {
data: prop.data.xData,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
yAxis: {
show: false,
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], //图形元素的尺寸
itemStyle: {
color: '#33FFFF'
},
data: prop.data.seriesData.map((item) => {
return {
value: item
};
}),
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,
}, {
value: 100,
}, {
value: 100,
}, {
value: 100,
}, {
value: 100,
}
]
}
]
}
})
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

8
src/views/screen/R_D_Environment/index.vue
View File

@ -23,6 +23,8 @@
<div class="sensor-item" v-for="item in sensor_list"> <div class="sensor-item" v-for="item in sensor_list">
<!-- <svg-icon ref="fenchen" icon-class="fenchen" :color="'#469DE9'" class="sensor-icon" /> --> <!-- <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" /> <component style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
<div style="margin: 10px 0;color: #A8EFC0;">{{ item.value + item.unit }}</div>
<div>{{ item.name }}</div>
</div> </div>
</div> </div>
@ -47,6 +49,7 @@
</div> </div>
<div class="rbox-item"> <div class="rbox-item">
<ItemVue title="温湿度" pos="right"> <ItemVue title="温湿度" pos="right">
<ProgeChart />
</ItemVue> </ItemVue>
</div> </div>
<div class="rbox-item"> <div class="rbox-item">
@ -55,7 +58,7 @@
</div> </div>
</div> </div>
<ThreeBG /> <!-- <ThreeBG /> -->
</div> </div>
</template> </template>
@ -66,6 +69,7 @@ import ItemVue from './component/item.vue';
import Humiture from './component/humiture_line.vue'; import Humiture from './component/humiture_line.vue';
import PmVue from './component/pm.vue'; import PmVue from './component/pm.vue';
import LineChart from './component/lineChart.vue'; import LineChart from './component/lineChart.vue';
import ProgeChart from './component/proge.vue';
import SvgFenchen from './component/svgFenchen.vue'; import SvgFenchen from './component/svgFenchen.vue';
import SvgJiaquan from './component/svgJiaquan.vue'; import SvgJiaquan from './component/svgJiaquan.vue';
import SvgZaosheng from './component/svgZaosheng.vue'; import SvgZaosheng from './component/svgZaosheng.vue';
@ -189,6 +193,8 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 14px;
color: #fff;
.sensor-icon { .sensor-icon {
width: 75px; width: 75px;
height: 75px; height: 75px;