1.合并机械分厂环境
This commit is contained in:
15133876896-BGG25
parent
268d566865
commit
d679ed7978
164
src/views/generalEnvironmentMechanical/components/gas.vue
Normal file
164
src/views/generalEnvironmentMechanical/components/gas.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\gas.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-14 13:24:12
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- <h1>{{props.title}}</h1> -->
|
||||
<div ref="gas" class="gas-echarts-class"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getCurrentInstance, onMounted, onUpdated, reactive, ref, watch} from "vue"
|
||||
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||
import 'echarts-liquidfill'
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props=defineProps<{
|
||||
title:string,
|
||||
value:any;
|
||||
}>()
|
||||
let gas=ref()
|
||||
|
||||
let refborder4=ref()
|
||||
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
gas:{
|
||||
div:null,
|
||||
data:null,
|
||||
title:'',
|
||||
box:null
|
||||
},
|
||||
})
|
||||
|
||||
const setData=()=>{
|
||||
|
||||
echartsData.gas!.div=gas.value
|
||||
echartsData.gas!.title=props.title
|
||||
echartsData.gas!.data=({
|
||||
title: {
|
||||
// 标题
|
||||
text: echartsData.gas!.title,
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20
|
||||
},
|
||||
top:'2%'
|
||||
},
|
||||
series: [{
|
||||
type: 'liquidFill',
|
||||
radius: '80%', //水球大小
|
||||
shape:'rect',
|
||||
center: ['50%', '50%'],
|
||||
waveAnimation: true,
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#186945',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#1b7a4f',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
],
|
||||
data: [0.7,0.7], // data个数代表波浪数
|
||||
amplitude: 10, //振幅
|
||||
backgroundStyle: {
|
||||
borderWidth: 2, //边框大小
|
||||
borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
|
||||
color: 'rgba(8, 206, 120, 0.4)',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
formatter:function(params){
|
||||
return props.value
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
outline: {
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 4,
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
}],
|
||||
})
|
||||
|
||||
change(echartsData.gas)
|
||||
}
|
||||
|
||||
const change = (item:EDataPersonItem) => {
|
||||
let Ebox;
|
||||
if (!item.box) {
|
||||
Ebox = proxy.$echarts.init(item.div, "dark");
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
Ebox.setOption(item.data);
|
||||
item.box = Ebox;
|
||||
};
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('数据更新');
|
||||
|
||||
setData()
|
||||
})
|
||||
// watch(() => props.value, (val) => {
|
||||
// console.log(val);
|
||||
|
||||
// setData()
|
||||
// }, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
setData()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gasBox{
|
||||
/* border-radius: 50%; */
|
||||
background-color: #8CE78D;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.gasborder{
|
||||
position: relative;
|
||||
}
|
||||
.gasborder h1{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left:20px;
|
||||
color: #fff;
|
||||
}
|
||||
.gas-echarts-class{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
289
src/views/generalEnvironmentMechanical/components/pipe.vue
Normal file
289
src/views/generalEnvironmentMechanical/components/pipe.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div ref="pipe" class="pipebox"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, nextTick, onMounted, onUpdated, reactive, ref, watch } from "vue";
|
||||
import { EDataPerson, EDataPersonItem } from "@/type/realtimeSecurity";
|
||||
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
let { t } = useI18n();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
value: any;
|
||||
}>();
|
||||
let pipe = ref();
|
||||
|
||||
let refborder3 = ref();
|
||||
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
pipe: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
});
|
||||
|
||||
const setData = () => {
|
||||
let x = [];
|
||||
let y = [];
|
||||
let sumx = [];
|
||||
console.log(props.value,"ddd");
|
||||
|
||||
props.value.listData.forEach((res) => {
|
||||
|
||||
x.push(res.name);
|
||||
});
|
||||
let newx = [...new Set(x)];
|
||||
newx.forEach((ele) => {
|
||||
let count = 0;
|
||||
props.value.listData.forEach((res) => {
|
||||
if (ele == res.name) {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
sumx.push({ name: ele, val: 1, sum: count });
|
||||
count = 0;
|
||||
});
|
||||
|
||||
sumx.forEach((ele) => {
|
||||
props.value.listData.forEach((res) => {
|
||||
let color1 = rgb();
|
||||
if (ele.name == res.name)
|
||||
y.push({
|
||||
name: res.devName,
|
||||
value: [
|
||||
newx.map((item) => item).indexOf(res.name),
|
||||
0,
|
||||
res.value,
|
||||
ele.val++,
|
||||
ele.sum,
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
echartsData.pipe!.div = pipe.value;
|
||||
echartsData.pipe!.title = props.title;
|
||||
echartsData.pipe!.data = {
|
||||
title: {
|
||||
text: echartsData.pipe!.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top: "1%",
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: newx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
// axisLabel: {
|
||||
// formatter: "{value} mpa",
|
||||
// },
|
||||
},
|
||||
// dataset:{
|
||||
// dimensions: x,
|
||||
// source: y
|
||||
// },
|
||||
// series:server
|
||||
series: [
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: renderItem1,
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value[2];
|
||||
if (index_color >= props.value.top.value) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#4992FF";
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
formatter: function (params) {
|
||||
return params.value[2];
|
||||
},
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params) {
|
||||
return !(params.value[2] == "0.0")
|
||||
? params.name + ":" + params.value[2] + "Mpa"
|
||||
: "";
|
||||
},
|
||||
},
|
||||
// labelLayout: (params, api) => {
|
||||
// console.log(params, api);
|
||||
|
||||
// return {
|
||||
// x: params.rect.x ,
|
||||
// y: params.rect.y + params.rect.height / 2,
|
||||
// verticalAlign: "middle",
|
||||
// align: "left",
|
||||
// text:'1'
|
||||
// };
|
||||
// },
|
||||
// itemStyle: { normal: { opacity: 0.8 } },
|
||||
encode: {
|
||||
y: 2,
|
||||
x: 0,
|
||||
tooltip: [0, 1, 2], //映射到提示框中的维度
|
||||
itemName: 3,
|
||||
},
|
||||
data: y,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: `${t("messages.normal_Tip")}(0mpa - ` + props.value.top.value + "mpa)",
|
||||
color: "#4992FF",
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: `${t("messages.abnormal_Tip")}(${props.value.top.value}mpa ${t(
|
||||
"messages.abnormal_Tip_yishang"
|
||||
)})`,
|
||||
color: "#FF6E76",
|
||||
},
|
||||
],
|
||||
};
|
||||
change(echartsData.pipe);
|
||||
};
|
||||
|
||||
let renderItem1 = (params, api) => {
|
||||
// console.log(params,"?????????????????");
|
||||
|
||||
let categoryIndex = api.value(0);
|
||||
let start = api.coord([categoryIndex, api.value(1)]);
|
||||
let end = api.coord([categoryIndex, api.value(2)]);
|
||||
let width = api.size([0, api.value(4)])[0] * 0.6;
|
||||
|
||||
const num = api.value(4); // 每个系列柱子数
|
||||
const currentIndex = api.value(3);
|
||||
const isOdd = num % 2 === 0;
|
||||
const midN = isOdd ? num / 2 : (num + 1) / 2;
|
||||
|
||||
var rect = null;
|
||||
|
||||
width = width / num;
|
||||
|
||||
let rectX = start[0] - width / 2;
|
||||
|
||||
const FIXED_WIDTH = 2; // 柱子间距
|
||||
|
||||
// 数据处理，结构为 { itemStyle: { normal: { color: 'lightgreen' } }, name: '2011', value: [0, 0, 150, 2, 5] }
|
||||
// 其中value 分为五个维度，分别为{系列项}（从0开始）、y轴起始值(均为0)、实际值、同系列中索引值（从1开始）、同系列数据项总数
|
||||
|
||||
if (num > 1) {
|
||||
if (isOdd) {
|
||||
if (currentIndex <= midN) {
|
||||
// 中位数左侧
|
||||
rectX =
|
||||
start[0] -
|
||||
width / 2 -
|
||||
width / 2 +
|
||||
(currentIndex - midN) * width -
|
||||
FIXED_WIDTH * (midN + 1 - currentIndex);
|
||||
} else {
|
||||
// 中位数右侧
|
||||
rectX =
|
||||
start[0] -
|
||||
width / 2 +
|
||||
width / 2 +
|
||||
(currentIndex - midN - 1) * width +
|
||||
FIXED_WIDTH * (currentIndex - midN);
|
||||
}
|
||||
} else {
|
||||
rectX =
|
||||
start[0] - width / 2 + (currentIndex - midN) * (width + FIXED_WIDTH);
|
||||
}
|
||||
}
|
||||
|
||||
rect = {
|
||||
type: "rect",
|
||||
shape: proxy.$echarts.graphic.clipRectByRect(
|
||||
{ x: rectX, y: end[1], width: width, height: start[1] - end[1] },
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height,
|
||||
}
|
||||
),
|
||||
style: api.style(),
|
||||
};
|
||||
|
||||
return rect;
|
||||
};
|
||||
function rgb() {
|
||||
//rgb颜色随机
|
||||
const r = Math.floor(Math.random() * 256);
|
||||
const g = Math.floor(Math.random() * 256);
|
||||
const b = Math.floor(Math.random() * 256);
|
||||
return `rgb(${r},${g},${b})`;
|
||||
}
|
||||
|
||||
const change = (item: EDataPersonItem) => {
|
||||
let Ebox;
|
||||
if (!item.box) {
|
||||
Ebox = proxy.$echarts.init(item.div, "dark");
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
Ebox.setOption(item.data);
|
||||
item.box = Ebox;
|
||||
};
|
||||
onUpdated(() => {
|
||||
setData()
|
||||
})
|
||||
watch(() => props.value, (val) => {
|
||||
|
||||
setData()
|
||||
}, { deep: true })
|
||||
onMounted(() => {
|
||||
setData()
|
||||
});
|
||||
|
||||
// return{setchartWH}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pipebox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
278
src/views/generalEnvironmentMechanical/components/power2023.vue
Normal file
278
src/views/generalEnvironmentMechanical/components/power2023.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\power2023.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 15:04:23
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="power" class="power-class"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, onMounted, onUpdated, reactive, ref } from "vue";
|
||||
import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
|
||||
import { accAdd } from "@/utils/precision";
|
||||
import border4 from "@/components/borderBox/border6.vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
seriesVal: any[];
|
||||
httpValue: any;
|
||||
}>();
|
||||
let power = ref();
|
||||
|
||||
let refborder4 = ref();
|
||||
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
power: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
});
|
||||
|
||||
const initEchart = () => {
|
||||
if (props.httpValue.listData) {
|
||||
console.log('zhixingle');
|
||||
|
||||
let series = [];
|
||||
props.httpValue.listData.forEach((res) => {
|
||||
if (res.years == 2023) {
|
||||
for (let key in res.month) {
|
||||
series.push({
|
||||
name: key + "月",
|
||||
type: "bar",
|
||||
stack: res.years,
|
||||
emphasis: {
|
||||
focus: "coordinateSystem",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (value, index) {
|
||||
return value.value.toLocaleString();
|
||||
},
|
||||
},
|
||||
},
|
||||
data: res.month[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
//data0用于初始化计算的数据
|
||||
let data0 = [];
|
||||
|
||||
for (let i = 1; i <= props.httpValue.name.length; i++) {
|
||||
data0.push(0);
|
||||
}
|
||||
|
||||
series.push({
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data0,
|
||||
color: "#bbf",
|
||||
stack: props.httpValue.listData[1].years,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
echartsData.power!.div = power.value;
|
||||
echartsData.power!.title = props.title;
|
||||
echartsData.power!.data = {
|
||||
title: {
|
||||
text: echartsData.power!.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
top: "3%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
axis: "auto",
|
||||
},
|
||||
},
|
||||
// color:color,
|
||||
legend: {
|
||||
type: "scroll",
|
||||
// width:400,
|
||||
// right:20,
|
||||
top: "11%",
|
||||
// itemStyle:{
|
||||
// data:yue
|
||||
// },
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "3%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: props.httpValue?.name,
|
||||
},
|
||||
series: props.seriesVal,
|
||||
};
|
||||
|
||||
change(echartsData.power, props.httpValue);
|
||||
};
|
||||
const change = (item: EDataPersonItem, value: any) => {
|
||||
let Ebox;
|
||||
if (!item.box) {
|
||||
Ebox = proxy.$echarts.init(item.div, "dark");
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
clacChartsSum(item.data, value);
|
||||
Ebox.setOption(item.data);
|
||||
item.box = Ebox;
|
||||
changeecharts(item.data, value);
|
||||
};
|
||||
|
||||
/**
|
||||
* @函数功能: 修改用电量总数数值的标签
|
||||
* @param {*} option echarts数据
|
||||
* @param {*} value api接收数据
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const clacChartsSum = (option: any, value: any) => {
|
||||
var series = option.series;
|
||||
// function getSum1 (params) {
|
||||
// let stack=value.listData[0].years
|
||||
// var datavalue = 0
|
||||
// for (var i = 0; i < series.length; i++) {
|
||||
// if(series[i].stack==stack){
|
||||
// // datavalue += series[i].data[params.dataIndex]
|
||||
// datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||||
// }
|
||||
|
||||
// }
|
||||
// return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||||
// }
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].years;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
}
|
||||
return datavalue ? datavalue.toLocaleString() : null;
|
||||
}
|
||||
console.log(series);
|
||||
|
||||
if (series.length) {
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
}
|
||||
|
||||
// series[series.length - 2].label.formatter = getSum1
|
||||
};
|
||||
|
||||
/**
|
||||
* @函数功能: 修改用电量总数数值的标签
|
||||
* @param {*} option echarts数据
|
||||
* @param {*} value api接收数据
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const changeecharts = (option: any, value: any) => {
|
||||
var series = option.series;
|
||||
|
||||
echartsData.power.box.on("legendselectchanged", (obj) => {
|
||||
//重新计算今年年数据
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].years;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (obj.selected[series[i].name]) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return datavalue ? datavalue.toLocaleString() : null;
|
||||
}
|
||||
if(series.length){
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
}
|
||||
|
||||
// series[series.length - 2].label.formatter = getSum1
|
||||
echartsData.power.box.setOption(option);
|
||||
});
|
||||
|
||||
function getSum2(params) {
|
||||
let stack = value.listData[1].years;
|
||||
var datavalue = 0;
|
||||
for (var i = 0; i < series.length; i++) {
|
||||
if (series[i].stack == stack) {
|
||||
// datavalue += series[i].data[params.dataIndex]
|
||||
datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
|
||||
}
|
||||
}
|
||||
return datavalue ? datavalue.toLocaleString() : null;
|
||||
}
|
||||
|
||||
if (series.length) {
|
||||
series[series.length - 1].label.formatter = getSum2;
|
||||
}
|
||||
|
||||
// series[series.length - 2].label.formatter = getSum1
|
||||
};
|
||||
let boxWH = reactive({
|
||||
width: "0px",
|
||||
height: "0px",
|
||||
});
|
||||
function setchartWH(width: any, height: any) {
|
||||
echartsData.power!.div = power.value;
|
||||
power.value.style.height = height + "px";
|
||||
power.value.style.width = width + "px";
|
||||
boxWH.height = height + 30 + "px";
|
||||
boxWH.width = width + "px";
|
||||
refborder4.value.resetWH();
|
||||
if (echartsData.power.box) {
|
||||
echartsData.power.box.resize();
|
||||
}
|
||||
}
|
||||
|
||||
onUpdated(() => {
|
||||
initEchart();
|
||||
});
|
||||
onMounted(() => {
|
||||
initEchart();
|
||||
});
|
||||
|
||||
// return{setchartWH}
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.power-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -17,12 +17,20 @@
|
||||
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<power style="width: 33%;height: 100%;box-sizing: border-box;" :title="powerTitle" :series="powerSeries"
|
||||
:listName="listName">
|
||||
</power>
|
||||
<div style="width: 33%;height: 100%;background: #bfb;">
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value"></power>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 33%;height: 100%;background: #bfc;">
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<pipe :title="t('messages.PipelinePressure_Mpa')" :value="pipeData"></pipe>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<gas :title="t('messages.gashistory')" :value="gasData"></gas>
|
||||
</border13>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,11 +41,14 @@
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import verticalNumLoop from './components/verticalNumLoop.vue'
|
||||
import power from './components/power.vue';
|
||||
import power from './components/power2023.vue';
|
||||
import gas from './components/gas.vue'
|
||||
import pipe from './components/pipe.vue'
|
||||
import border13 from '@/components/border/Border13.vue'
|
||||
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
|
||||
import { getnoiseData } from "@/http/generalEnvironment";
|
||||
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
||||
import { getPowerData } from "@/http/energyConsume";
|
||||
import { getPowerData,getconsumeDetail } from "@/http/energyConsume";
|
||||
import { useSocketStore } from "@/store/moduleSocketMechanics";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { gettime, clacendTime } from "@/utils/time"
|
||||
@ -69,10 +80,11 @@ const verticalType = {
|
||||
'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
|
||||
}
|
||||
/**用电量 */
|
||||
let listName = ref<string[]>()
|
||||
let powerTitle = t('messages.Powerto2023')
|
||||
let powerSeries = ref()
|
||||
let powerData=ref({value:{name:[]},seriesVal:[],title:t('messages.Powerto2023')})
|
||||
|
||||
let gasData=ref(0)
|
||||
|
||||
let pipeData=ref({listData:[],top:0})
|
||||
|
||||
let headerref = ref()
|
||||
let verticalList: any[] = reactive([])
|
||||
@ -130,56 +142,80 @@ async function getSensorData() {
|
||||
}
|
||||
|
||||
async function getPower_data() {
|
||||
const { data }: any = await getPowerData({ time: 1 })
|
||||
listName.value = data.name
|
||||
let result: any = await getPowerData({ time: 1 });
|
||||
|
||||
if (result.code == 200) {
|
||||
let series = [];
|
||||
result.data.listData.forEach((res) => {
|
||||
if (res.years == 2023) {
|
||||
for (let key in res.month) {
|
||||
series.push({
|
||||
name: key + "月",
|
||||
type: "bar",
|
||||
stack: res.years,
|
||||
emphasis: {
|
||||
focus: "coordinateSystem",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (value, index) {
|
||||
return value.value.toLocaleString();
|
||||
},
|
||||
},
|
||||
},
|
||||
data: res.month[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
//data0用于初始化计算的数据
|
||||
let data0 = [];
|
||||
|
||||
let series = []
|
||||
data.listData.forEach(res => {
|
||||
if (res.years == 2023) {
|
||||
for (let key in res.month) {
|
||||
series.push({
|
||||
name: key + '月',
|
||||
type: 'bar',
|
||||
stack: res.years,
|
||||
emphasis: {
|
||||
focus: 'coordinateSystem',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (value, index) {
|
||||
return value.value.toLocaleString()
|
||||
}
|
||||
}
|
||||
},
|
||||
data: res.month[key]
|
||||
})
|
||||
}
|
||||
for (let i = 1; i <= result.data.name.length; i++) {
|
||||
data0.push(0);
|
||||
}
|
||||
|
||||
series.push({
|
||||
name: "",
|
||||
type: "bar",
|
||||
data: data0,
|
||||
color: "#bbf",
|
||||
stack: result.data.listData[1].years,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
position: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
});
|
||||
|
||||
powerData.value.value=result.data
|
||||
powerData.value.seriesVal=series
|
||||
powerData.value.title='机械分厂用电量'
|
||||
}
|
||||
}
|
||||
async function getconsumeDetailfun(){
|
||||
let result:any = await getconsumeDetail()
|
||||
console.log(gasData.value);
|
||||
if(result.code==200){
|
||||
result.data.forEach(res=>{
|
||||
if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
|
||||
gasData.value=res.usageNum
|
||||
}
|
||||
})
|
||||
//data0用于初始化计算的数据
|
||||
let data0 = []
|
||||
|
||||
for (let i = 1; i <= data.name.length; i++) {
|
||||
data0.push(0)
|
||||
}
|
||||
|
||||
series.push(
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
data: data0,
|
||||
color: '#bbf',
|
||||
stack: data.listData[1].years,
|
||||
// barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
)
|
||||
powerSeries.value = series
|
||||
console.log(gasData.value);
|
||||
|
||||
}
|
||||
}
|
||||
async function getpipeDatafun() {
|
||||
let pageValue = '6,7,9,10,11'
|
||||
let result: any = await getpipeData({ deptIds: pageValue })
|
||||
|
||||
if (result.code == 200) {
|
||||
pipeData.value.listData=result.data.listData
|
||||
pipeData.value.top=result.data.top
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val) {
|
||||
@ -235,8 +271,13 @@ function errWebsocket(val) {
|
||||
onMounted(() => {
|
||||
getSensorData()
|
||||
getPower_data()
|
||||
getpipeDatafun()
|
||||
getconsumeDetailfun()
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
})
|
||||
onUnmounted(() => {
|
||||
closeWebsocket();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user