139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<!--
|
|
* @FilePath: \wwwd:\code\screenFront\src\views\Offsite\content\bottom.vue
|
|
* @Author: 王路平
|
|
* @文件版本: V1.0.0
|
|
* @Date: 2023-02-16 11:30:31
|
|
* @Description:
|
|
*
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
|
-->
|
|
|
|
<template>
|
|
<div class="content-left">
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<devList ref="devlist1" :title="'设备明细'"></devList>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<mapEcharts ref="map1"></mapEcharts>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<equipment ref="equipment1" :title="t('messages.DevType')"></equipment>
|
|
<equipment ref="equipment2" :title="t('messages.DevStatus')"></equipment>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
|
|
import { calcWH } from "@/components/ts/selfAdaption";
|
|
import devList from "./chart/deviceslist.vue";
|
|
import equipment from "./chart/equipment.vue";
|
|
import mapEcharts from "./chart/mapEchart.vue";
|
|
import { Offsite } from "@/store/module/offsite";
|
|
import { useI18n } from 'vue-i18n'
|
|
let {t} = useI18n();
|
|
const store = Offsite();
|
|
let props = defineProps<{
|
|
width: number;
|
|
height: number;
|
|
}>();
|
|
|
|
//内容dom-------------------------
|
|
let devlist1 = ref();
|
|
let equipment1 = ref();
|
|
let equipment2 = ref();
|
|
let map1 = ref();
|
|
|
|
//---------------------------
|
|
|
|
watch(
|
|
() => props,
|
|
(newVal, oldVal) => {
|
|
//监听父组件宽高变化，随时重置本组件尺寸
|
|
reset(newVal);
|
|
},
|
|
{ immediate: true, deep: true, flush: "post" }
|
|
);
|
|
|
|
//---------------------------
|
|
|
|
function reset(val: any) {
|
|
//宽高为0时跳出该方法
|
|
if (!val.width && !val.height) return;
|
|
box(val.width, val.height);
|
|
Pie(val.width, val.height);
|
|
}
|
|
|
|
const box = (width: any, height: any) => {
|
|
let a = calcWH(height, width, 1, 24, 0);
|
|
|
|
// a.oHeight=a.oHeight
|
|
//修改高度
|
|
devlist1.value.setchartWH(a.oWidth * 11, a.oHeight - 30);
|
|
map1.value.setchartWH(a.oWidth * 8, a.oHeight - 30);
|
|
};
|
|
const Pie = (width: any, height: any) => {
|
|
let a = calcWH(height, width, 2, 24, 0);
|
|
|
|
// a.oHeight=a.oHeight
|
|
//修改高度
|
|
equipment1.value.setchartWH(a.oWidth * 5, a.oHeight - 30);
|
|
equipment2.value.setchartWH(a.oWidth * 5, a.oHeight - 30);
|
|
};
|
|
|
|
// async function getnoiseDatafun(){
|
|
// let result:any = await getnoiseData()
|
|
|
|
// if(result.code==200){
|
|
// console.log(result);
|
|
// refnoise.value.setData(result.data)
|
|
// // setData(room,year,result.title)
|
|
// }
|
|
// }
|
|
onMounted(() => {
|
|
});
|
|
|
|
watch(
|
|
() => store.itemDevNum,
|
|
(newVal, oldVal) => {
|
|
|
|
let arr=[]
|
|
newVal.forEach(res=>{
|
|
if(res.type==t('messages.OnProduct')||res.type==t('messages.OffProduct')){
|
|
arr.push({name:res.title,value:res.num})
|
|
}
|
|
})
|
|
equipment2.value.setData(arr);
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
|
|
watch(
|
|
() => store.devtype,
|
|
(newVal, oldVal) => {
|
|
let arr=[]
|
|
newVal.forEach(res=>{
|
|
arr.push({name:res.name,value:res.counts})
|
|
})
|
|
equipment1.value.setData(arr);
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
watch(
|
|
() => store.devlist,
|
|
(newVal, oldVal) => {
|
|
// equipment1.value.setData(arr);
|
|
devlist1.value.setData(newVal)
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
</script>
|
|
|
|
<style scope>
|
|
.content-left {
|
|
width: 100%;
|
|
}
|
|
</style>
|