467 lines
16 KiB
Vue
467 lines
16 KiB
Vue
<template>
|
||
<div class="deviceInfoDialog">
|
||
<div class="left-div">
|
||
<el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
|
||
<el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" check-strictly="true"
|
||
highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
||
</div>
|
||
<div class="right-div">
|
||
<div class="top-div">
|
||
<div :id="'echartDiv' + index" class="echartDiv100" v-for="(item, index) of deviceList" :key="index"
|
||
style="width: 100%;height:100%"></div>
|
||
</div>
|
||
<div class="bottom-div">
|
||
<el-table :data="tableData" border style="width: 100%" height="420">
|
||
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
|
||
<el-table-column prop="name" label="名称" align="center" />
|
||
<el-table-column prop="num" label="编码" align="center" />
|
||
<el-table-column prop="type" label="类型" align="center" />
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<el-button type="primary" @click="viewDetail(scope.row)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import * as echarts from "echarts";
|
||
import bimStore from '@/store/modules/bim';
|
||
const buildOptions = [
|
||
{
|
||
value: '0',
|
||
label: '漳州工厂',
|
||
}
|
||
]
|
||
|
||
const defaultProps = {
|
||
children: 'children',
|
||
label: 'label',
|
||
}
|
||
const data = reactive({
|
||
buildValue: '0',
|
||
treeData: [
|
||
{
|
||
label: '原料糖化车间',
|
||
id: '0',
|
||
url: '/jz/glb/scene.gltf',
|
||
info: {
|
||
name: '原料糖化车间',
|
||
area: '9436 ㎡',
|
||
status: '启用',
|
||
desc: '原料糖化车间，负责原料糖化，启用于2011年'
|
||
},
|
||
deviceInfo: [
|
||
{
|
||
type: '生产设备',
|
||
name: '立仓',
|
||
num: 'T11',
|
||
value: 45,
|
||
id: "echartDiv0"
|
||
},
|
||
{
|
||
type: '生产设备',
|
||
name: '过滤槽',
|
||
num: 'guolvcao_1',
|
||
value: 130,
|
||
id: "echartDiv1"
|
||
},
|
||
{
|
||
type: '安防设备',
|
||
name: '摄像头',
|
||
num: 'T3',
|
||
value: 180,
|
||
id: "echartDiv2"
|
||
},
|
||
{
|
||
type: '消防设备',
|
||
name: '烟感',
|
||
num: 'T4',
|
||
value: 100,
|
||
id: "echartDiv3"
|
||
}
|
||
],
|
||
children: [
|
||
{
|
||
label: '原料糖化车间一',
|
||
id: '0-1',
|
||
url: '/jz/glb/scene.gltf',
|
||
children: [],
|
||
info: {
|
||
name: '原料糖化车间一',
|
||
area: '5200 ㎡',
|
||
status: '启用',
|
||
desc: '原料糖化车间一，负责原料糖化，启用于2011年'
|
||
},
|
||
deviceInfo: [
|
||
{
|
||
type: '生产设备',
|
||
name: '立仓',
|
||
num: 'T11',
|
||
value: 15,
|
||
id: "echartDiv0"
|
||
},
|
||
{
|
||
type: '生产设备',
|
||
name: '过滤槽',
|
||
num: 'guolvcao_1',
|
||
value: 50,
|
||
id: "echartDiv1"
|
||
},
|
||
{
|
||
type: '安防设备',
|
||
name: '摄像头',
|
||
num: 'T3',
|
||
value: 80,
|
||
id: "echartDiv2"
|
||
},
|
||
{
|
||
type: '消防设备',
|
||
name: '烟感',
|
||
num: 'T4',
|
||
value: 50,
|
||
id: "echartDiv3"
|
||
}
|
||
],
|
||
|
||
},
|
||
{
|
||
label: '原料糖化车间二',
|
||
id: '0-2',
|
||
url: '/jz/glb/scene.gltf',
|
||
children: [],
|
||
info: {
|
||
name: '原料糖化车间二',
|
||
area: '4236 ㎡',
|
||
status: '启用',
|
||
desc: '原料糖化车间二，负责原料糖化，启用于2013年'
|
||
},
|
||
deviceInfo: [
|
||
{
|
||
type: '生产设备',
|
||
name: '立仓',
|
||
num: 'T11',
|
||
value: 30,
|
||
id: "echartDiv0"
|
||
},
|
||
{
|
||
type: '生产设备',
|
||
name: '过滤槽',
|
||
num: 'guolvcao_1',
|
||
value: 80,
|
||
id: "echartDiv1"
|
||
},
|
||
{
|
||
type: '安防设备',
|
||
name: '摄像头',
|
||
num: 'T4',
|
||
value: 100,
|
||
id: "echartDiv2"
|
||
},
|
||
{
|
||
type: '消防设备',
|
||
name: '烟感',
|
||
num: 'T3',
|
||
value: 50,
|
||
id: "echartDiv3"
|
||
}
|
||
],
|
||
},
|
||
],
|
||
}
|
||
],
|
||
checkedkeys: "",
|
||
deviceList: [
|
||
{
|
||
name: '设备A',
|
||
num: 36,
|
||
id: "echartDiv0"
|
||
},
|
||
{
|
||
name: '设备B',
|
||
num: 36,
|
||
id: "echartDiv1"
|
||
},
|
||
{
|
||
name: '设备C',
|
||
num: 36,
|
||
id: "echartDiv2"
|
||
},
|
||
{
|
||
name: '设备D',
|
||
num: 36,
|
||
|
||
id: "echartDiv3"
|
||
}
|
||
],
|
||
tableData: []
|
||
});
|
||
const { buildValue, treeData, checkedkeys, deviceList, tableData } = toRefs(data);
|
||
const emit = defineEmits(['viewDetail'])
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
checkedkeys.value = treeData.value[0].id;
|
||
handleNodeClick(treeData.value[0]);
|
||
})
|
||
})
|
||
|
||
const handleNodeClick = (value) => {
|
||
value.deviceInfo.forEach(ele => {
|
||
getCharts(ele);
|
||
})
|
||
tableData.value = value.deviceInfo;
|
||
}
|
||
|
||
const getCharts = (ele) => {
|
||
var dom = document.getElementById(ele.id);
|
||
if (dom) {
|
||
// 手动移除该属性
|
||
dom.removeAttribute('_echarts_instance_')
|
||
var myChart = echarts.init(dom);
|
||
var option = {
|
||
grid: {
|
||
left: "8%", //画布左移位置
|
||
top: "10%",
|
||
width: "90%", //画布宽度
|
||
height: "65%", //画布高度
|
||
},
|
||
series: [{
|
||
name: '第二次弧形向外渐变',
|
||
type: 'gauge',
|
||
radius: '60%',
|
||
splitNumber: 0, // 刻度数量
|
||
min: 0, // 最小刻度
|
||
max: 100,
|
||
// 仪表盘轴线相关配置
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
3,
|
||
{
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.6,
|
||
r: 0.6,
|
||
colorStops: [
|
||
{
|
||
offset: 0.84,
|
||
color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
|
||
}, {
|
||
offset: 0.85,
|
||
color: 'rgba(29, 129, 172, 1.00)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.99,
|
||
color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(50, 226, 247, 0)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
],
|
||
],
|
||
width: 40,
|
||
},
|
||
},
|
||
/** 分隔线样式*/
|
||
splitLine: {
|
||
show: false,
|
||
length: 9,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#fff', // 用颜色渐变函数不起作用
|
||
},
|
||
},
|
||
/** 刻度线*/
|
||
axisTick: {
|
||
show: false,
|
||
splitNumber: 2,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)', // 用颜色渐变函数不起作用
|
||
width: 1,
|
||
},
|
||
length: 5,
|
||
},
|
||
/** 刻度标签*/
|
||
axisLabel: {
|
||
distance: 2,
|
||
show: false,
|
||
color: 'rgba(255, 255, 255, 1)',
|
||
fontSize: 12,
|
||
fontFamily: 'DIN-Bold'
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
animationDuration: 4000,
|
||
}, {
|
||
type: 'gauge',
|
||
radius: '92%',
|
||
splitNumber: 0, // 刻度数量
|
||
min: 0, // 最小刻度
|
||
max: 100,
|
||
progress: {
|
||
show: true,
|
||
roundCap: true,
|
||
width: 15,
|
||
itemStyle: {
|
||
color: '#58D9F9',
|
||
shadowColor: 'rgba(0,138,255,0.45)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[
|
||
5,
|
||
{
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.6,
|
||
r: 0.6,
|
||
colorStops: [
|
||
{
|
||
offset: 0.84,
|
||
color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
|
||
}, {
|
||
offset: 0.85,
|
||
color: 'rgba(29, 129, 172, 1.00)', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.99,
|
||
color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(50, 226, 247, 0)', // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
],
|
||
],
|
||
width: 18,
|
||
},
|
||
},
|
||
//分隔线样式。
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
//刻度样式。
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
//刻度标签。
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
//仪表盘指针。
|
||
pointer: {
|
||
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
|
||
show: false,
|
||
//指针长度
|
||
length: '90%',
|
||
width: 0,
|
||
},
|
||
//仪表盘标题。
|
||
title: {
|
||
show: true,
|
||
offsetCenter: ['2', '55'], // x, y，单位px
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
},
|
||
|
||
backgroundColor: "#58D9F9",
|
||
borderWidth: 3, //设置边框粗细
|
||
borderRadius: 20,
|
||
lineHeight: 20,
|
||
height: 20,
|
||
width: 80
|
||
},
|
||
//仪表盘详情，用于显示数据。
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: [0, '0%'],
|
||
formatter: function (value) {
|
||
return value + '台';
|
||
},
|
||
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#31e4f4'
|
||
}
|
||
},
|
||
|
||
data: [{
|
||
value: ele.value,
|
||
name: ele.name
|
||
},]
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
}
|
||
|
||
const viewDetail = (val) => {
|
||
bimStore().setDeviceNum(val.num);
|
||
emit('viewDetail', val);
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.deviceInfoDialog {
|
||
height: 600px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left-div {
|
||
width: 20%;
|
||
height: 100%;
|
||
border: 1px solid #2E6099;
|
||
|
||
.el-tree {
|
||
margin: 0 10px;
|
||
}
|
||
.el-select {
|
||
margin: 10px;
|
||
}
|
||
}
|
||
|
||
.right-div {
|
||
width: 79%;
|
||
height: 100%;
|
||
// border: 1px solid #3cbfdf;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.top-div {
|
||
width: 100%;
|
||
height: 25%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.echartDiv100 {
|
||
width: 22% !important;
|
||
height: 100% !important;
|
||
border: 1px solid #2E6099;
|
||
}
|
||
}
|
||
|
||
.bottom-div {
|
||
height: 74%;
|
||
border: 1px solid #2E6099;
|
||
}
|
||
}
|
||
}
|
||
</style> |