|
|
@@ -0,0 +1,652 @@
|
|
|
+<template>
|
|
|
+ <div class="safetyList">
|
|
|
+ <customHeader>数据中心-分站管理</customHeader>
|
|
|
+ <div class="content">
|
|
|
+ <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
|
|
|
+ <a-tab-pane tab="分站监测" key="device" />
|
|
|
+ </a-tabs>
|
|
|
+ <div class="box-content">
|
|
|
+ <!-- 分站监测 -->
|
|
|
+ <div class="now-content">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
+ <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'" @click="cardClick(item, index)">
|
|
|
+ <div class="card-item-label">{{ item.strname }}</div>
|
|
|
+ </div>
|
|
|
+ <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
|
|
|
+ <div class="modal-name">站点名称：</div>
|
|
|
+ <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
|
|
|
+ <div class="modal-lj">连接状态：</div>
|
|
|
+ <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-title">详细信息：</div>
|
|
|
+ <a-table
|
|
|
+ size="small"
|
|
|
+ :scroll="{ y: 680 }"
|
|
|
+ :columns="outerColumns"
|
|
|
+ :data-source="deviceList"
|
|
|
+ :pagination="pagination"
|
|
|
+ :row-key="(record) => record.id"
|
|
|
+ :expand-row-by-click="true"
|
|
|
+ :expanded-row-keys="expandedRowKeys"
|
|
|
+ @expand="onExpand"
|
|
|
+ >
|
|
|
+ <!-- 自定义展开图标 -->
|
|
|
+ <template #expandIcon="{ expanded, onExpand, record }">
|
|
|
+ <a-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="
|
|
|
+ (e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ toggleExpand(record.id);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <DownOutlined v-if="expandedRowKeys.includes(record.id)" />
|
|
|
+ <RightOutlined v-else />
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 嵌套表格 -->
|
|
|
+ <template #expandedRowRender="{ record }">
|
|
|
+ <a-table
|
|
|
+ size="small"
|
|
|
+ :columns="innerColumns"
|
|
|
+ :data-source="record.monitoringFields"
|
|
|
+ :pagination="false"
|
|
|
+ :loading="loadingMap[record.id]"
|
|
|
+ bordered
|
|
|
+ >
|
|
|
+ <template #bodyCell="{ column, record: innerRecord }">
|
|
|
+ <template v-if="column.dataIndex === 'value'">
|
|
|
+ <span :class="getValueClass(innerRecord.value)">
|
|
|
+ {{ innerRecord.value }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, nextTick, reactive, onMounted, onUnmounted, inject } from 'vue';
|
|
|
+import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+import { AesEncryption } from '/@/utils/cipher';
|
|
|
+import { loginCipher } from '/@/settings/encryptionSetting';
|
|
|
+import { message, TreeProps } from 'ant-design-vue';
|
|
|
+import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } from './device.api';
|
|
|
+import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
|
|
|
+
|
|
|
+const { hasPermission } = usePermission();
|
|
|
+let activeKey = ref('device');
|
|
|
+const treeData = ref<TreeProps['treeData']>([]);
|
|
|
+const selectedKeys = ref<string[]>([]);
|
|
|
+const expandedKeys = ref<string[]>([]);
|
|
|
+const systemID = ref(''); // 系统监测时，系统id
|
|
|
+//树形菜单选择事件
|
|
|
+const onSelect: TreeProps['onSelect'] = (keys, e) => {};
|
|
|
+// 获取树形菜单数据
|
|
|
+async function getDeviceType(sysType?) {
|
|
|
+ if (treeData.value?.length > 0) return;
|
|
|
+ const result = await getDeviceTypeList({});
|
|
|
+ if (result.length > 0) {
|
|
|
+ const dataSource = <TreeProps['treeData']>[];
|
|
|
+ let key = '0';
|
|
|
+ const getData = (resultList, dataSourceList, keyVal) => {
|
|
|
+ resultList.forEach((item, index) => {
|
|
|
+ if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
|
|
|
+ const children = getData(item.children, [], `${keyVal}-${index}`);
|
|
|
+ // 判断关键阻力路线
|
|
|
+ if (item.itemValue.startsWith(sysType) && children[0]) {
|
|
|
+ systemID.value = item.children[0]['itemValue'];
|
|
|
+ }
|
|
|
+
|
|
|
+ dataSourceList.push({
|
|
|
+ children: children,
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ parentKey: `${keyVal}`,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ dataSourceList.push({
|
|
|
+ children: [],
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ parentKey: `${keyVal}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return dataSourceList;
|
|
|
+ };
|
|
|
+ treeData.value = getData(result, dataSource, key);
|
|
|
+ }
|
|
|
+}
|
|
|
+// 设备数据结构
|
|
|
+const deviceList = ref([
|
|
|
+ {
|
|
|
+ id: 'D001',
|
|
|
+ name: '模拟设备1',
|
|
|
+ status: '在线',
|
|
|
+ monitoringFields: [], // 初始为空，点击时加载
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'D002',
|
|
|
+ name: '模拟设备2',
|
|
|
+ status: '离线',
|
|
|
+ monitoringFields: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'D003',
|
|
|
+ name: '模拟设备3',
|
|
|
+ status: '在线',
|
|
|
+ monitoringFields: [],
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+// 当前展开的行key数组
|
|
|
+const expandedRowKeys = ref([]);
|
|
|
+
|
|
|
+// 加载状态映射
|
|
|
+const loadingMap = reactive({});
|
|
|
+
|
|
|
+// 外层表格列配置
|
|
|
+const outerColumns = [
|
|
|
+ {
|
|
|
+ title: '设备ID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ customRender: ({ text }) => {
|
|
|
+ text = '在线';
|
|
|
+ return `${text}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+// 内层表格列配置
|
|
|
+const innerColumns = [
|
|
|
+ {
|
|
|
+ title: '监测字段',
|
|
|
+ dataIndex: 'field',
|
|
|
+ key: 'field',
|
|
|
+ width: '40%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '当前值',
|
|
|
+ dataIndex: 'value',
|
|
|
+ key: 'value',
|
|
|
+ width: '30%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单位',
|
|
|
+ dataIndex: 'unit',
|
|
|
+ key: 'unit',
|
|
|
+ width: '30%',
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+// 分页配置
|
|
|
+const pagination = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 3,
|
|
|
+ showSizeChanger: true,
|
|
|
+ pageSizeOptions: ['10', '20', '50'],
|
|
|
+});
|
|
|
+
|
|
|
+// 切换展开状态
|
|
|
+const toggleExpand = (deviceId) => {
|
|
|
+ const index = expandedRowKeys.value.indexOf(deviceId);
|
|
|
+
|
|
|
+ if (index > -1) {
|
|
|
+ // 如果已经展开，则关闭
|
|
|
+ expandedRowKeys.value.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ // 如果未展开，则打开
|
|
|
+ expandedRowKeys.value.push(deviceId);
|
|
|
+ loadMonitoringData(deviceId);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 加载监测数据
|
|
|
+const loadMonitoringData = async (deviceId) => {
|
|
|
+ const device = deviceList.value.find((d) => d.id === deviceId);
|
|
|
+
|
|
|
+ if (device && device.monitoringFields.length === 0) {
|
|
|
+ loadingMap[deviceId] = true;
|
|
|
+ try {
|
|
|
+ // 模拟API请求
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 800));
|
|
|
+ // 根据设备ID加载对应数据
|
|
|
+ device.monitoringFields = mockFetchMonitoringData(deviceId);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(`加载设备 ${deviceId} 数据失败:`, error);
|
|
|
+ } finally {
|
|
|
+ loadingMap[deviceId] = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 值样式分类
|
|
|
+const getValueClass = (value) => {
|
|
|
+ if (value > 30) return 'high-value';
|
|
|
+ if (value < 10) return 'low-value';
|
|
|
+ return 'normal-value';
|
|
|
+};
|
|
|
+
|
|
|
+// 模拟API获取监测数据
|
|
|
+const mockFetchMonitoringData = (deviceId) => {
|
|
|
+ const dataMap = {
|
|
|
+ D001: [
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ ],
|
|
|
+ D002: [
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ ],
|
|
|
+ D003: [
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ return dataMap[deviceId] || [];
|
|
|
+};
|
|
|
+onMounted(async () => {
|
|
|
+ getDeviceType();
|
|
|
+});
|
|
|
+onUnmounted(() => {});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.safetyList {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ position: relative;
|
|
|
+ margin: 70px 10px 10px 10px;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tab-box {
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(#001325, #012e4f);
|
|
|
+
|
|
|
+ :deep(.zxm-tabs-nav) {
|
|
|
+ margin: 0 !important;
|
|
|
+
|
|
|
+ .zxm-tabs-tab {
|
|
|
+ width: 180px;
|
|
|
+ height: 45px;
|
|
|
+ background: url('/@/assets/images/top-btn.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-tab-active {
|
|
|
+ width: 180px;
|
|
|
+ position: relative;
|
|
|
+ background: url('/@/assets/images/top-btn-select.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .zxm-tabs-tab-btn {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-ink-bar {
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-tab + .zxm-tabs-tab {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-content {
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ padding-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .now-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 30%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: calc(70% - 15px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .right-title {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .left-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ position: relative;
|
|
|
+ // width: 242px;
|
|
|
+ width: 182px;
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .card-itemN {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('/@/assets/images/zd-2.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-itemL {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('/@/assets/images/zd-3.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-itemD {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('/@/assets/images/zd-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-modal {
|
|
|
+ width: 86px;
|
|
|
+ position: absolute;
|
|
|
+ left: 140px;
|
|
|
+ color: #fff;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-modal1 {
|
|
|
+ width: 86px;
|
|
|
+ position: absolute;
|
|
|
+ left: -42px;
|
|
|
+ color: #fff;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: calc(60% - 15px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .historytable {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-title {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.down-btn {
|
|
|
+ line-height: 15px;
|
|
|
+ height: 20px;
|
|
|
+ padding: 0px 17px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.zxm-form {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 20px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.zxm-picker,
|
|
|
+.zxm-input {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card-item.selected {
|
|
|
+ border: 2px solid #3ad8ff77;
|
|
|
+ /* 选中时的边框颜色 */
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.zxm-radio-wrapper) {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.zxm-input) {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+}
|
|
|
+
|
|
|
+// ::v-deep(.zxm-select-selection-item) {
|
|
|
+// color: #fff ;
|
|
|
+// }
|
|
|
+
|
|
|
+// ::v-deep(.zxm-form-item-label > label) {
|
|
|
+// color: #fff !important;
|
|
|
+// }
|
|
|
+/* 值样式 */
|
|
|
+.high-value {
|
|
|
+ color: #f5222d;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.low-value {
|
|
|
+ color: #1890ff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.normal-value {
|
|
|
+ color: #52c41a;
|
|
|
+}
|
|
|
+
|
|
|
+/* 嵌套表格样式 */
|
|
|
+:deep(.ant-table-expanded-row) > td {
|
|
|
+ background-color: #f9f9f9 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.ant-table-expanded-row .ant-table) {
|
|
|
+ margin: -10px -8px;
|
|
|
+ background: #f9f9f9;
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义展开按钮 */
|
|
|
+:deep(.ant-table-row-expand-icon) {
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-box {
|
|
|
+ margin-top: 60px;
|
|
|
+ width: 208px;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ overflow-y: auto;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ :deep(.zxm-tree) {
|
|
|
+ background: transparent !important;
|
|
|
+ color: #fff !important;
|
|
|
+
|
|
|
+ .zxm-tree-switcher {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
|
|
|
+ background-color: var(--tree-node-select);
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper:hover {
|
|
|
+ background-color: var(--tree-node-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ height: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed22;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #4288a444;
|
|
|
+ }
|
|
|
+}
|
|
|
+.device-select {
|
|
|
+ width: 250px;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ background: var(--image-tree-bg) no-repeat;
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 55px;
|
|
|
+ background-size: contain;
|
|
|
+ pointer-events: auto;
|
|
|
+ padding: 20px 10px 30px 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+div[aria-hidden='true'] {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
