123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- <template>
- <div class="dane-bd" :style="style" :class="daneClass">
- <div class="dane-title">
- <div class="common-navL">
- <span :class="{ deactived: index === 1 }" @click="index = 0">
- {{ moduleNameA }}
- </span>
- <span class="ml-5px mr-5px">|</span>
- <span :class="{ deactived: index === 0 }" @click="index = 1">
- {{ moduleNameB }}
- </span>
- </div>
- <div class="common-navR">
- <!-- 下拉框 -->
- <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
- <a-select
- style="width: 140px"
- size="small"
- placeholder="请选择"
- v-model:value="selectedDeviceIDA"
- allowClear
- :options="optionsA"
- @change="selectHandlerA"
- />
- </div>
- <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
- <a-select
- style="width: 140px"
- size="small"
- placeholder="请选择"
- v-model:value="selectedDeviceIDB"
- allowClear
- :options="optionsB"
- @change="selectHandlerB"
- />
- </div>
- <!-- 日期组件 -->
- <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
- <a-range-picker
- size="small"
- style="width: 140px"
- :show-time="{ format: 'HH:mm' }"
- format="YYYY-MM-DD HH:mm"
- :placeholder="['开始时间', '结束时间']"
- @change="onChange"
- @ok="onOk"
- />
- </div> -->
- <!-- 开关组件 -->
- <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
- <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
- <a-switch v-model:checked="checked" />
- <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
- </div> -->
- </div>
- </div>
- <div class="dane-content">
- <slot>
- <Content v-if="index === 0" style="height: 100%" :moduleData="moduleDataA" :data="selectedDeviceA" />
- <Content v-if="index === 1" style="height: 100%" :moduleData="moduleDataB" :data="selectedDeviceB" />
- </slot>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import Content from './content.vue';
- import { defineProps, defineEmits, computed, ref, watch } from 'vue';
- import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
- import { useInitModule } from '../hooks/useInit';
- const props = defineProps<{
- moduleDataA: ModuleData;
- moduleNameA: string;
- deviceTypeA: string;
- moduleDataB: ModuleData;
- moduleNameB: string;
- deviceTypeB: string;
- showStyle: ShowStyle;
- visible: boolean;
- data: any;
- }>();
- const emit = defineEmits(['close', 'select']);
- const index = ref(0);
- const headerA = props.moduleDataA.header;
- const headerB = props.moduleDataB.header;
- const {
- selectedDeviceID: selectedDeviceIDA,
- selectedDevice: selectedDeviceA,
- options: optionsA,
- init: initA,
- } = useInitModule(props.deviceTypeA, props.moduleDataA);
- const {
- selectedDeviceID: selectedDeviceIDB,
- selectedDevice: selectedDeviceB,
- options: optionsB,
- init: initB,
- } = useInitModule(props.deviceTypeB, props.moduleDataB);
- const style = computed(() => {
- const size = props.showStyle.size;
- const position = props.showStyle.position;
- return size + position;
- });
- // 根据配置里的定位判断应该使用哪个module组件
- const daneClass = computed(() => {
- const position = props.showStyle.position;
- if (position.includes('left:0')) {
- return 'dane-m';
- }
- if (position.includes('right:0')) {
- return 'dane-m';
- }
- return 'dane-w';
- });
- //切换时间选项
- // function onChange(value, dateString) {
- // console.log('Selected Time: ', value);
- // console.log('Formatted Selected Time: ', dateString);
- // }
- // function onOk(val) {
- // console.log('onOk: ', val);
- // }
- //下拉框选项切换
- function selectHandlerA(id) {
- selectedDeviceIDA.value = id;
- emit('select', selectedDeviceA);
- }
- function selectHandlerB(id) {
- selectedDeviceIDB.value = id;
- emit('select', selectedDeviceB);
- }
- watch(
- () => props.data,
- (d) => {
- initA(d);
- initB(d);
- selectedDeviceIDA.value = optionsA.value[0]?.value;
- selectedDeviceIDB.value = optionsB.value[0]?.value;
- },
- {
- immediate: true,
- }
- );
- </script>
- <style scoped lang="less">
- .dane-bd {
- position: absolute;
- width: 100%;
- height: 100%;
- background-image: url('@/assets/images/home-container/configurable/firehome/module-title.png');
- background-repeat: no-repeat;
- background-position: center top;
- background-size: 100% auto;
- z-index: 2;
- .dane-title {
- display: flex;
- box-sizing: border-box;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- height: 34px;
- padding: 0 40px 0 50px;
- .common-navL {
- display: flex;
- position: relative;
- align-items: center;
- color: #fff;
- font-size: 14px;
- }
- .common-navR {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- }
- // .common-navR-switch {
- // display: flex;
- // align-items: center;
- // justify-content: space-around;
- // width: 90%;
- // .status-text {
- // color: #1fb3f7;
- // font-size: 14px;
- // }
- // .status-text1 {
- // color: #a1dff8;
- // font-size: 14px;
- // }
- // }
- }
- .dane-content {
- height: calc(100% - 34px);
- // border-image: linear-gradient(#1dabeb, #1dabeb22);
- border-image: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723) 30;
- // border-left: 1px;
- // border-right: 1px;
- border-width: 2px;
- border-style: solid;
- box-sizing: border-box;
- border-top: none;
- background-image: linear-gradient(#000723 94%, #1dabeb11);
- }
- }
- .dane-l {
- background: url('@/assets/images/home-container/configurable/firehome/common-border.png') no-repeat;
- background-size: 100% auto;
- }
- .dane-m {
- // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
- background-size: 100% auto;
- }
- .dane-s {
- background: url('@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat;
- background-size: 100% auto;
- }
- .dane-w {
- background-image: url('@/assets/images/home-container/configurable/firehome/module-title-long.png');
- background-size: 100% 37px;
- }
- .deactived {
- cursor: pointer;
- color: #8087a1;
- }
- :deep(.zxm-select-selector) {
- height: 22px !important;
- border: none !important;
- // background-color: rgb(15 64 88) !important;
- background-color: transparent !important;
- color: #8087a1 !important;
- }
- :deep(.zxm-select-selection-placeholder) {
- color: #8087a1 !important;
- }
- :deep(.zxm-select-arrow) {
- color: #8087a1 !important;
- }
- :deep(.zxm-picker) {
- border: none !important;
- background-color: rgb(15 64 88) !important;
- box-shadow: none;
- color: #a1dff8 !important;
- }
- :deep(.zxm-picker-input > input) {
- color: #a1dff8 !important;
- text-align: center !important;
- }
- :deep(.zxm-picker-separator) {
- color: #a1dff8 !important;
- }
- :deep(.zxm-picker-active-bar) {
- display: none !important;
- }
- :deep(.zxm-picker-suffix) {
- color: #a1dff8 !important;
- }
- :deep(.zxm-switch) {
- min-width: 48px !important;
- }
- :deep(.zxm-switch-checked) {
- background-color: rgb(15 64 89) !important;
- }
- :deep(.zxm-switch-handle::before) {
- background-color: rgb(33 179 247) !important;
- }
- :deep(.zxm-select-selection-item) {
- color: #fff !important;
- }
- </style>
|