97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<!--
|
|
* @FilePath: \wwwd:\code\screenFront\src\views\Offsite\content\left.vue
|
|
* @Author: 王路平
|
|
* @文件版本: V1.0.0
|
|
* @Date: 2023-03-26 16:09:16
|
|
* @Description:
|
|
*
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
|
-->
|
|
|
|
<template>
|
|
<div class="content-left">
|
|
<el-row>
|
|
<el-col>
|
|
<offsitegateway ref="offsitegatewayref" :title="t('messages.datacom')"></offsitegateway>
|
|
</el-col>
|
|
<el-col>
|
|
<devList ref="devlist1" :title="t('messages.OffSiteDevList')"></devList>
|
|
</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 offsitegateway from "./chart/offsitegateway.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 offsitegatewayref=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);
|
|
}
|
|
|
|
const box = (width: any, height: any) => {
|
|
let a = calcWH(height, width, 3, 1, 0);
|
|
|
|
// a.oHeight=a.oHeight
|
|
//修改高度
|
|
devlist1.value.setchartWH(a.oWidth, a.oHeight*2 - 30);
|
|
offsitegatewayref.value.setchartWH(a.oWidth, a.oHeight - 30);
|
|
};
|
|
|
|
onMounted(() => {
|
|
});
|
|
|
|
|
|
watch(
|
|
() => store.devlist,
|
|
(newVal, oldVal) => {
|
|
// equipment1.value.setData(arr);
|
|
devlist1.value.setData(newVal)
|
|
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
watch(
|
|
() => store.offsitegatewayStatus,
|
|
(newVal, oldVal) => {
|
|
// equipment1.value.setData(arr);
|
|
offsitegatewayref.value.setData(newVal)
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
</script>
|
|
|
|
<style scope>
|
|
.content-left {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|