114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
|
<div class="deviceDiv">
|
|
<TopDiv title="资产信息"></TopDiv>
|
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
|
<!-- <div class="container1">
|
|
|
|
</div> -->
|
|
<div class="container">
|
|
<div class="chartsGl" id="charts"></div>
|
|
</div>
|
|
|
|
</dv-border-box-10>
|
|
<div class="box-button" @click="openDialog">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import getPie3D from './3DChart.js';
|
|
import * as echarts from 'echarts';
|
|
import "echarts-gl"
|
|
import TopDiv from "./TopDiv.vue";
|
|
import bimStore from '@/store/modules/bim';
|
|
const emit = defineEmits(['openDialog'])
|
|
|
|
|
|
const deviceInfo = computed(() =>
|
|
bimStore().activateTree.deviceInfo
|
|
);
|
|
|
|
onMounted(() => {
|
|
initData();
|
|
})
|
|
|
|
watch(deviceInfo, (value) => {
|
|
if (value) {
|
|
initData();
|
|
}
|
|
},)
|
|
|
|
const initData = () => {
|
|
const optionData = deviceInfo.value.map((item) => {
|
|
return {
|
|
...item,
|
|
rate: ((item.value / 300).toFixed(1)) * 100,
|
|
};
|
|
});
|
|
nextTick(() => {
|
|
getCharts(optionData);
|
|
})
|
|
}
|
|
const getCharts = (optionData) => {
|
|
var dom = document.getElementById('charts');
|
|
if (dom) {
|
|
// 手动移除该属性
|
|
dom.removeAttribute('_echarts_instance_')
|
|
var myChart = echarts.init(dom);
|
|
var option = getPie3D(optionData, 0, '占比');
|
|
// myChart.resize({
|
|
// height: '300px',
|
|
// });
|
|
option && myChart.setOption(option);
|
|
}
|
|
}
|
|
|
|
const openDialog = () => {
|
|
emit('openDialog')
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.deviceDiv {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
right: 10px;
|
|
width: 360px;
|
|
height: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #3cbfdf;
|
|
}
|
|
|
|
:deep(.border-box-content) {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
>div {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.chartsGl {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.box-button {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
border: 2px solid #3cbfdf;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
</style> |