|
|
@@ -0,0 +1,604 @@
|
|
|
+<template>
|
|
|
+ <div class="monitor-container">
|
|
|
+ <!-- <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
|
|
|
+ <div class="elementContent" v-if="deviceType == 'pump_under'">
|
|
|
+ <fourBorderBg>
|
|
|
+ <template v-for="(item, index) in modelMonitor" :key="index">
|
|
|
+ <div class="gas-monitor-row">
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+</fourBorderBg>
|
|
|
+</div>
|
|
|
+</div> -->
|
|
|
+ <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
|
|
|
+ <div class="lr left-box">
|
|
|
+ <div class="left-container">
|
|
|
+ <div class="monitor-box">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>瓦斯泵</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div v-for="key in 2" :key="key">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#变频器</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-box">
|
|
|
+ <div v-for="(item, index) in pumpMonitorDataNew" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <template v-if="item.type !== 'sign' && item.type !== 'warning'">
|
|
|
+ <div class="value">{{
|
|
|
+ selectData && selectData[item[`code${key-1}`]]
|
|
|
+ ? formatNum(selectData[item[`code${key-1}`]]) : '-'
|
|
|
+ }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="value">
|
|
|
+ <span :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run': item.type === 'sign' && selectData[item[`code${key-1}`]] == '1',
|
|
|
+ 'signal-round-gry': selectData[item[`code${key-1}`]] == '0',
|
|
|
+ 'signal-round-warning': item.type === 'warning' && selectData[item[`code${key-1}`]] == '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>水泵</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div v-for="key in 2" :key="key">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#水泵</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-box">
|
|
|
+ <div v-for="(item, index) in waterPumpDataNew" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <template v-if="item.type !== 'sign'">
|
|
|
+ <div class="value">{{
|
|
|
+ selectData && selectData[item[`code${key-1}`]]
|
|
|
+ ? formatNum(selectData[item[`code${key-1}`]])
|
|
|
+ : '-'
|
|
|
+ }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="value">
|
|
|
+ <span :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run': selectData[item[`code${key-1}`]],
|
|
|
+ 'signal-round-gry': selectData[item[`code${key-1}`]] == '0',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>xxx</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div v-for="key in 2" :key="key">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#xxx</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-box">
|
|
|
+ <div v-for="(item, index) in dewateringPumpDataNew" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <template v-if="item.type !== 'sign'">
|
|
|
+ <div class="value">{{
|
|
|
+ selectData && selectData[item[`code${key-1}`]]
|
|
|
+ ? formatNum(selectData[item[`code${key-1}`]])
|
|
|
+ : '-'
|
|
|
+ }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="value">
|
|
|
+ <span :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run': selectData[item[`code${key-1}`]],
|
|
|
+ 'signal-round-gry': selectData[item[`code${key-1}`]] == '0',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lr right-box">
|
|
|
+ <div class="item-box sensor-container">
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>xxxx</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div v-for="key in 2" :key="key">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#xxxx</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-box">
|
|
|
+ <div v-for="(item, index) in otherPumpDataNew" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <template v-if="item.type !== 'sign'">
|
|
|
+ <div class="value">{{
|
|
|
+ selectData && selectData[item[`code${key-1}`]]
|
|
|
+ ? formatNum(selectData[item[`code${key-1}`]])
|
|
|
+ : '-'
|
|
|
+ }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="value">
|
|
|
+ <span :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run': selectData[item[`code${key-1}`]],
|
|
|
+ 'signal-round-gry': selectData[item[`code${key-1}`]] == '0',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="playerRef" class="player-box"></div>
|
|
|
+ </div>
|
|
|
+ <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
|
|
|
+ <PasswordModal :modal-is-show="passwordModalIsShow" modal-title="密码检验" :modal-type="handlerType"
|
|
|
+ @handle-ok="handleOK" @handle-cancel="handleCancel" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
|
|
|
+import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+import { setModelType } from '../gasPump.threejs';
|
|
|
+import ceshi from './ceshi.json'
|
|
|
+import {
|
|
|
+ stateWarningHeader,
|
|
|
+ valveWarningState,
|
|
|
+ pumpMonitorDataNew,
|
|
|
+ waterPumpDataNew,
|
|
|
+ dewateringPumpDataNew,
|
|
|
+ otherPumpDataNew,
|
|
|
+ // modelMonitor,
|
|
|
+ valveCtrlType,
|
|
|
+} from '../gasPump.data';
|
|
|
+import { list } from '../gasPump.api';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import { formatNum } from '/@/utils/ventutil';
|
|
|
+import DetailModal from './DetailModal.vue';
|
|
|
+import { useModal } from '/@/components/Modal';
|
|
|
+import { deviceControlApi } from '/@/api/vent/index';
|
|
|
+import PasswordModal from '../../comment/components/PasswordModal.vue';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+// import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
|
|
|
+import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+
|
|
|
+const globalConfig = inject('globalConfig');
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+const [register, { openModal }] = useModal();
|
|
|
+const loading = ref(false);
|
|
|
+const passwordModalIsShow = ref(false);
|
|
|
+const handlerType = ref('');
|
|
|
+const playerRef = ref();
|
|
|
+
|
|
|
+// 监测数据
|
|
|
+const selectData = reactive({});
|
|
|
+
|
|
|
+const { getCamera, removeCamera } = useCamera();
|
|
|
+
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor(flag?) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (props.deviceId) {
|
|
|
+ const data = await getDataSource(props.deviceId);
|
|
|
+ Object.assign(selectData, data);
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ resolve(null);
|
|
|
+ await getMonitor();
|
|
|
+ loading.value = false;
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function getDataSource(systemID) {
|
|
|
+ const res = await list({ devicetype: props.deviceType, ids: systemID });
|
|
|
+ const result={}
|
|
|
+ res.msgTxt.forEach(el=>{
|
|
|
+ Object.assign(result,el['datalist'][0],el['datalist'][0].readData)
|
|
|
+ })
|
|
|
+ console.log(result,'result--------------')
|
|
|
+ return result;
|
|
|
+}
|
|
|
+
|
|
|
+function handler(passWord, paramcode) {
|
|
|
+ let value = '';
|
|
|
+ if (paramcode == 'ykjdqh') {
|
|
|
+ value = selectData['ykjdqh'] == '1' ? '2' : '1';
|
|
|
+ }
|
|
|
+ if (paramcode == 'jxmsqh') {
|
|
|
+ value = selectData['jxmsqh'] == '1' ? '2' : '1';
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ deviceid: selectData['deviceID'],
|
|
|
+ devicetype: selectData['deviceType'],
|
|
|
+ paramcode: paramcode,
|
|
|
+ password: passWord,
|
|
|
+ value: value,
|
|
|
+ };
|
|
|
+ deviceControlApi(data)
|
|
|
+ .then((res) => {
|
|
|
+ if (globalConfig.History_Type == 'remote') {
|
|
|
+ message.success('指令已下发至生产管控平台成功！');
|
|
|
+ } else {
|
|
|
+ message.success('指令已下发成功！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ message.success('控制异常');
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function changeCtr(e) {
|
|
|
+ if (e.target.value == 1) {
|
|
|
+ // 就地
|
|
|
+ handlerType.value = 'jxmsqh';
|
|
|
+ } else if (e.target.value == 2) {
|
|
|
+ // 远程
|
|
|
+ handlerType.value = 'jxmsqh';
|
|
|
+ }
|
|
|
+ passwordModalIsShow.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function changeMode(e) {
|
|
|
+ if (e.target.value == 1) {
|
|
|
+ // 检修开
|
|
|
+ handlerType.value = 'ykjdqh';
|
|
|
+ } else if (e.target.value == 2) {
|
|
|
+ // 检修关
|
|
|
+ handlerType.value = 'ykjdqh';
|
|
|
+ }
|
|
|
+ passwordModalIsShow.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function handlerFn(paramcode) {
|
|
|
+ handlerType.value = paramcode;
|
|
|
+ passwordModalIsShow.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function handleOK(passWord, handlerState) {
|
|
|
+ handler(passWord, handlerState);
|
|
|
+ passwordModalIsShow.value = false;
|
|
|
+ handlerType.value = '';
|
|
|
+}
|
|
|
+
|
|
|
+function handleCancel() {
|
|
|
+ passwordModalIsShow.value = false;
|
|
|
+ handlerType.value = '';
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.deviceType,
|
|
|
+ () => {
|
|
|
+ nextTick(async () => {
|
|
|
+ if (props.deviceType == 'pump_over') {
|
|
|
+ setModelType('gasPump');
|
|
|
+ } else if (props.deviceType == 'pump_under') {
|
|
|
+ setModelType('gasPumpUnder');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+);
|
|
|
+watch(
|
|
|
+ () => props.deviceId,
|
|
|
+ async (deviceID) => {
|
|
|
+ removeCamera();
|
|
|
+ if (deviceID) await getCamera(deviceID, playerRef.value);
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ timer = null;
|
|
|
+ await getMonitor(true);
|
|
|
+ if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
|
|
|
+});
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ removeCamera();
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ removeCamera();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '/@/design/vent/modal.less';
|
|
|
+@import '../../comment/less/workFace.less';
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+// .elementContent {
|
|
|
+// :deep(.main-container) {
|
|
|
+// display: flex;
|
|
|
+// flex-wrap: wrap;
|
|
|
+// width: 690px;
|
|
|
+// padding: 10px 12px 10px 15px;
|
|
|
+// border: 1px solid #d3e1ff33;
|
|
|
+// background-color: #061c2a55;
|
|
|
+// box-shadow: 0 0 15px #3b567f55;
|
|
|
+// background-color: #38383833;
|
|
|
+
|
|
|
+// .gas-monitor-row {
|
|
|
+// display: flex;
|
|
|
+// flex-direction: row;
|
|
|
+// flex-wrap: wrap;
|
|
|
+// color: #fff;
|
|
|
+// line-height: 32px;
|
|
|
+
|
|
|
+// .title {
|
|
|
+// width: 250px;
|
|
|
+// color: #baeaff;
|
|
|
+// }
|
|
|
+
|
|
|
+// .value {
|
|
|
+// width: 80px;
|
|
|
+// color: #efae05;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+.device-state {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ color: #e90000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.lr {
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.left-box {
|
|
|
+ width: 360px !important;
|
|
|
+ direction: rtl;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ margin-top: 30px !important;
|
|
|
+
|
|
|
+ .left-container {
|
|
|
+ direction: ltr;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.right-box {
|
|
|
+ width: 350px !important;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ .environment-monitor {
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 5px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #7ae5ff;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 2px solid #50c8fc;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pool-box {
|
|
|
+ width: 327px;
|
|
|
+ height: 65px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background: url('/@/assets/images/vent/pump1.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-origin: content-box;
|
|
|
+ margin-top: 2px;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.player-box {
|
|
|
+ position: absolute;
|
|
|
+ // height: 100%;
|
|
|
+ // width: 100%;
|
|
|
+ // padding: 0 20px 0 20px;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
+ // bottom: 80px;
|
|
|
+ top: 30px;
|
|
|
+ left: 380px;
|
|
|
+
|
|
|
+ :deep(#LivePlayerBox) {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.control-group {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 4px 0;
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 1px 10px;
|
|
|
+
|
|
|
+ .control-item-title {
|
|
|
+ color: #a6dce9;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item-state {
|
|
|
+ width: 86px;
|
|
|
+ height: 31px;
|
|
|
+ background: url('/@/assets/images/vent/control-switch-bg1.png');
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px transparent solid;
|
|
|
+ background-clip: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .a-button {
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep .a-button--mini {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep .a-button--mini.is-round {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.input-box {
|
|
|
+ width: calc(100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row !important;
|
|
|
+ flex-wrap: wrap !important;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ width: calc(50% - 8px);
|
|
|
+ padding: 0 2px;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .btn-item {
|
|
|
+ width: 82px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top-btn {
|
|
|
+ .btn-group {
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .btn-item {
|
|
|
+ width: calc(50% - 16px);
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .control-title {
|
|
|
+ width: 150px;
|
|
|
+ color: #73e8fe;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.state-header {
|
|
|
+ display: flex;
|
|
|
+ color: #73e8fe;
|
|
|
+
|
|
|
+ .header-item {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.device-row {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+</style>
|
