mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

12.29

Browse Source
This commit is contained in:
朱菊兰
2023-12-29 09:26:07 +08:00
parent 9690ab4f70
commit 35bcb23920
23 changed files with 809 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/databoard/components/GasChart.vue
View File

@@ -116,6 +116,9 @@ export default {
sidebarStatus() {
return this.$store.state.app.sidebar.opened;
},
gasChartMsg() {
return this.$store.state.websocket.gasInfo
}
},
watch: {
sidebarStatus(val) {
@@ -127,6 +130,14 @@ export default {
this.chart.setOption(this.option);
}, 500);
},
gasChartMsg: {
handler(newVal, oldVal) {
console.log(newVal)
// this.chartData = newVal
console.log('newVal============')
// this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {

8
src/views/databoard/components/Header.vue
View File

@@ -7,9 +7,7 @@
<template>
<header class="kiln-header">
<h1>
窑炉生产运行驾驶舱
</h1>
<h1>{{topTitle}}</h1>
<!-- left: 312px; -->
<div
class="firm">
@@ -38,7 +36,9 @@ export default {
name: 'KilnHeader',
// components: { DateBtnGroup },
props: {
isFullScreen:false
isFullScreen:false,
topTitle: ''
},
data() {
return {

221
src/views/databoard/components/ISRAChart.vue
View File

@@ -21,8 +21,9 @@ export default {
data() {
return {
chart: null,
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
chartData: [],
option: {
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
tooltip: {
trigger: 'item',
},
@@ -35,7 +36,7 @@ export default {
}
},
title: {
text: 11234,
text: 0,
subtext: '总数',
top: '43%',
left: '49%',
@@ -47,11 +48,62 @@ export default {
},
subtextStyle: {
fontSize: 16,
color: '#fff7',
color: '#fff00',
},
},
series: [
{
series: []
},
};
},
mounted() {
this.initChart();
},
activated() {
},
computed: {
israChartMsg() {
return this.$store.state.websocket.israKiln
}
},
watch: {
israChartMsg: {
handler(newVal, oldVal) {
console.log(newVal)
this.chartData = newVal
console.log('newVal============')
this.updateChart()
}
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
updateChart() {
console.log('update')
let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num+=i.num
})
this.chart.setOption({
title:{
text: num,
subtext: '总数',
top: '43%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
lineHeight: 16,
color: '#fff',
},
subtextStyle: {
fontSize: 16,
color: '#fff00',
},
},
series:[{
name: 'Access From',
type: 'pie',
radius: ['45%', '65%'],
@@ -60,10 +112,6 @@ export default {
show: true,
position: 'outside',
formatter: ({ dataIndex, percent }) => {
// console.log(
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
// percent
// );
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
return `{${styleName}|${percent}%}`;
},
@@ -98,141 +146,28 @@ export default {
show: true,
},
itemStyle: {
borderRadius: 12,
// borderColor: 'transparent',
// borderWidth: 20
borderRadius: 12
},
data: [
{
value: 1048,
name: '缺陷1',
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#2760ff', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#2760ff33', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 735,
name: '缺陷2',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#518eec', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#518eec33', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 580,
name: '缺陷3',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0ee8e4', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#0ee8e433', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 484,
name: '缺陷4',
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#ddb523', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 70% 处的颜色
// },
{
offset: 1,
color: '#ddb52333', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
},
],
},
};
},
mounted() {
this.initChart();
},
activated() {
// this.initChart();
},
computed: {},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name:item.name,
value: item.num,
itemStyle:{
color:{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
global: false,
colorStops:[
{offset: 0,color: this.colors[index%4]},
{offset: 1,color: this.colors[index%4]+'33'}
]
}
}
}))}]
})
}
},
};
</script>

4
src/views/databoard/components/SelectorBtnGroup.vue
View File

@@ -29,7 +29,9 @@ export default {
};
},
computed: {},
methods: {},
methods: {
},
};
</script>