Merge branch 'feature/v7.0/7.0.3' into prod
# Conflicts:
# src/views/tickets/orderLog.vue
| | |
| | | </div> |
| | | <div class="item"> |
| | | <div class="itemchild">机巢查询:</div> |
| | | <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch"> |
| | | <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch" clearable> |
| | | <el-option v-for="item in jcoptions" :key="item" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | |
| | | import FirmwareManage from './components/firmwareManage.vue' |
| | | import DevicePerShare from './components/devicePerShare.vue' |
| | | import DockControlPanel from './components/DockControlPanel.vue' |
| | | import { getWebsocketUrl } from '@/utils/websocket/config'; |
| | | import ConnectWebSocket from '@/utils/websocket'; |
| | | import { getWebsocketUrl } from '@/utils/websocket/config' |
| | | import ConnectWebSocket from '@/utils/websocket' |
| | | import warnSvg from '@/assets/images/warn.svg' |
| | | |
| | | export default { |
| | |
| | | labelWidth: 145, |
| | | width: 120, |
| | | }, |
| | | |
| | | { |
| | | label: '设备名称', |
| | | prop: 'nickname', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | searchSpan: 4, |
| | | search: true, |
| | | overHidden: true, |
| | | editDisplay: true, //编辑显示 |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入设备名称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | |
| | | { |
| | | label: '4G增强', |
| | | prop: 'link_workmode', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | overHidden: true, |
| | | editDisplay: false, //编辑显示 |
| | | viewDisplay: false, |
| | | align: 'center', |
| | | formatter: (row, column, cellValue) => { |
| | | const statusMap = { |
| | | 0: '关', |
| | | 1: '开', |
| | | } |
| | | return statusMap[cellValue] || '/' |
| | | } |
| | | }, |
| | | |
| | | { |
| | | label: '负载设备', |
| | | prop: 'payload_str', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | overHidden: true, |
| | | editDisplay: false, //编辑显示 |
| | | |
| | | }, |
| | | |
| | | { |
| | | label: '流量剩余(GB)', |
| | | prop: 'traffic_remaining', |
| | | labelWidth: 145, |
| | | width: 120, |
| | | // editDisabled: true, |
| | | editDisplay: false, //编辑显示 |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: '请输入流量剩余', |
| | | // trigger: 'blur', |
| | | // }, |
| | | // ], |
| | | }, |
| | | |
| | | { |
| | | label: '流量到期时间', |
| | | prop: 'traffic_expire_time', |
| | | labelWidth: 145, |
| | | width: 120, |
| | | type: 'date', |
| | | format: 'YYYY-MM-DD', |
| | | editDisplay: false, //编辑显示 |
| | | }, |
| | | |
| | | { |
| | | label: '设备状态', |
| | | prop: 'cnstatus', |
| | | hide: true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 145, |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'status', |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 100, |
| | | hide: true, |
| | | // searchSpan: 4, |
| | | // search: true, |
| | | slot: true, |
| | | width: 100, |
| | | |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入在线状态', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'cnmode_code', |
| | | hide: true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: true, |
| | | labelWidth: 145, |
| | | width: 110, |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'mode_code', |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 145, |
| | | searchSpan: 4, |
| | | search: true, |
| | | type: 'select', |
| | | dicData: [ |
| | | { label: '在线', value: 0 }, |
| | | { label: '离线', value: -1 }, |
| | | { label: '远程调试', value: 2 }, |
| | | { label: '现场调试', value: 1 }, |
| | | { label: '固件升级中', value: 3 } |
| | | ], |
| | | slot: true, |
| | | width: 110, |
| | | |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机场状态', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | |
| | | { |
| | | label: '设备SN', |
| | | prop: 'device_sn', |
| | |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '设备名称', |
| | | prop: 'nickname', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | searchSpan: 4, |
| | | search: true, |
| | | overHidden: true, |
| | | editDisplay: true, //编辑显示 |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入设备名称', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '4G增强', |
| | | prop: 'link_workmode', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | overHidden: true, |
| | | editDisplay: false, //编辑显示 |
| | | viewDisplay: false, |
| | | align: 'center', |
| | | formatter: (row, column, cellValue) => { |
| | | const statusMap = { |
| | | 0: '关', |
| | | 1: '开', |
| | | } |
| | | return statusMap[cellValue] || '/' |
| | | } |
| | | }, |
| | | |
| | | { |
| | | label: '负载设备', |
| | | prop: 'payload_str', |
| | | labelWidth: 145, |
| | | width: 160, |
| | | overHidden: true, |
| | | editDisplay: false, //编辑显示 |
| | | |
| | | }, |
| | | { |
| | | // hide: true, |
| | | label: '保险有效期', |
| | |
| | | // }, |
| | | // ], |
| | | // }, |
| | | { |
| | | label: '流量剩余(GB)', |
| | | prop: 'traffic_remaining', |
| | | labelWidth: 145, |
| | | width: 120, |
| | | // editDisabled: true, |
| | | editDisplay: false, //编辑显示 |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: '请输入流量剩余', |
| | | // trigger: 'blur', |
| | | // }, |
| | | // ], |
| | | }, |
| | | { |
| | | label: '流量到期时间', |
| | | prop: 'traffic_expire_time', |
| | | labelWidth: 145, |
| | | width: 120, |
| | | type: 'date', |
| | | format: 'YYYY-MM-DD', |
| | | editDisplay: false, //编辑显示 |
| | | }, |
| | | |
| | | |
| | | { |
| | | label: '固件版本', |
| | | prop: 'firmware_version', |
| | |
| | | labelWidth: 145, |
| | | width: 160, |
| | | format: 'YYYY-MM-DD HH:mm:ss', |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'cnstatus', |
| | | hide: true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 145, |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'status', |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 100, |
| | | hide: true, |
| | | // searchSpan: 4, |
| | | // search: true, |
| | | slot: true, |
| | | width: 100, |
| | | |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入在线状态', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'cnmode_code', |
| | | hide: true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: true, |
| | | labelWidth: 145, |
| | | width: 110, |
| | | }, |
| | | { |
| | | label: '设备状态', |
| | | prop: 'mode_code', |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: false, |
| | | labelWidth: 145, |
| | | searchSpan: 4, |
| | | search: true, |
| | | type: 'select', |
| | | dicData: [ |
| | | { label: '在线', value: 0 }, |
| | | { label: '离线', value: -1 }, |
| | | { label: '远程调试', value: 2 }, |
| | | { label: '现场调试', value: 1 }, |
| | | { label: '固件升级中', value: 3 } |
| | | ], |
| | | slot: true, |
| | | width: 110, |
| | | |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入机场状态', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | |
| | | right: 30px; |
| | | } |
| | | |
| | | .force-center-dialog .el-dialog { |
| | | .force-center-dialog .el-dialog {} |
| | | |
| | | } |
| | | .zx-cancel { |
| | | .txt-contain { |
| | | display: flex; |
| | |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | |
| | | img { |
| | | width: 20px; |
| | | height: 20px; |
| | | } |
| | | |
| | | .name { |
| | | color: #0E8BFF; |
| | | margin-left: 6px; |
| | |
| | | } |
| | | |
| | | } |
| | | |
| | | .delete-txt { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | |
| | | margin-bottom: 20px; |
| | | } |
| | | } |
| | | |
| | | </style> |
| | |
| | | return this.$message.warning('任务时间不能小于当前时间') |
| | | } |
| | | } |
| | | const maxItem = this.device_sns.reduce((max, item) => { |
| | | return item.drone_height > max.drone_height ? item : max |
| | | }) |
| | | console.log(maxItem.drone_height, '高度') |
| | | console.log(this.lastHeight, '最后一点高度') |
| | | let result = _.round((maxItem.drone_height + this.form.rth_altitude), 2) |
| | | let checkedList = this.device_sns.filter(item => this.form.device_sns.includes(item.device_sn)); |
| | | const maxItem = checkedList.reduce((max, item) => { |
| | | return item.drone_height > max.drone_height ? item : max; |
| | | }); |
| | | console.log(maxItem.drone_height, '高度'); |
| | | console.log(this.lastHeight, '最后一点高度'); |
| | | let result = _.round((maxItem.drone_height + this.form.rth_altitude), 2); |
| | | |
| | | let resultHeight = this.lastHeight - maxItem.drone_height |
| | | let resultH = _.round(resultHeight, 2) |
| | |
| | | } |
| | | |
| | | // 更新机巢列表 |
| | | this.device_sns = data.device_list |
| | | this.device_sns = data.device_map_infos;// data.device_list; |
| | | this.permission && |
| | | (this.permission.order_log_review || this.permission.order_log_recall) && |
| | | (data.status == 1 || |
| | |
| | | </div> |
| | | <div class="status-list"> |
| | | <template v-if="test[item]?.name == '机巢' || test[item]?.name == '无人机'"> |
| | | <div |
| | | v-for="statusKey in [4, 0, -1]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | <div v-for="statusKey in [4, 0, -1]" :key="statusKey" class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }" |
| | | ></span> |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }"> |
| | | <span class="indicator" :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }"></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span> |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | |
| | | </div> |
| | | </template> |
| | | <template v-else-if="test[item]?.name == '监控设备'"> |
| | | <div |
| | | v-for="statusKey in [1, 0]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | <div v-for="statusKey in [1, 0]" :key="statusKey" class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }" |
| | | ></span> |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }"> |
| | | <span class="indicator" :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }"></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span> |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | |
| | | </span> |
| | | </div> |
| | | </template> |
| | | <template v-else-if="test[item]?.name == '机巢保险'"> |
| | | <div |
| | | v-for="statusKey in [1, 0,2]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | <template v-else-if="test[item]?.name == '无人机保险'"> |
| | | <div v-for="statusKey in [1, 0, 2]" :key="statusKey" class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }" |
| | | ></span> |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }"> |
| | | <span class="indicator" :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }"></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span> |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | |
| | | </span> |
| | | </div> |
| | | </template> |
| | | <template v-else-if="test[item]?.name == '无人机流量'"> |
| | | <div |
| | | v-for="statusKey in [ 0,2,1]" |
| | | :key="statusKey" |
| | | class="status-item" |
| | | <template v-else-if="test[item]?.name == '无人机流量'"> |
| | | <div v-for="statusKey in [0, 2, 1]" :key="statusKey" class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusKey)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }" |
| | | ></span> |
| | | :style="{ color: getStatusColor(test[item]?.name, statusKey) }"> |
| | | <span class="indicator" :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusKey), |
| | | color: getStatusColor(test[item]?.name, statusKey), |
| | | }"></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span> |
| | | <span class="count"> |
| | | {{ newtitleData[item].status_map[statusKey] }} |
| | |
| | | </div> |
| | | </template> |
| | | <template v-else> |
| | | <div |
| | | v-for="(status, statusIndex) in newtitleData[item].status_map" |
| | | :key="statusIndex" |
| | | class="status-item" |
| | | <div v-for="(status, statusIndex) in newtitleData[item].status_map" :key="statusIndex" class="status-item" |
| | | :class="getStatusStyle(test[item]?.name, statusIndex)" |
| | | :style="{ color: getStatusColor(test[item]?.name, statusIndex) }" |
| | | > |
| | | <span |
| | | class="indicator" |
| | | :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusIndex), |
| | | color: getStatusColor(test[item]?.name, statusIndex), |
| | | }" |
| | | ></span> |
| | | :style="{ color: getStatusColor(test[item]?.name, statusIndex) }"> |
| | | <span class="indicator" :style="{ |
| | | backgroundColor: getStatusBackground(test[item]?.name, statusIndex), |
| | | color: getStatusColor(test[item]?.name, statusIndex), |
| | | }"></span> |
| | | <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span> |
| | | <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { useStore } from 'vuex'; |
| | | import { computed } from 'vue'; |
| | | import titleImg1 from '@/assets/images/workbench/st3.svg'; |
| | | import titleImg2 from '@/assets/images/workbench/st4.svg'; |
| | | import titleImg3 from '@/assets/images/workbench/st8.svg'; |
| | | import titleImg4 from '@/assets/images/workbench/st5.svg'; |
| | | import titleImg5 from '@/assets/images/workbench/st6.svg'; |
| | | import titleImg6 from '@/assets/images/workbench/st9.svg'; |
| | | import { getStatics } from '@/api/home/index'; |
| | | import { useRouter } from 'vue-router'; |
| | | const router = useRouter(); |
| | | const store = useStore(); |
| | | import { useStore } from 'vuex' |
| | | import { computed } from 'vue' |
| | | import titleImg1 from '@/assets/images/workbench/st3.svg' |
| | | import titleImg2 from '@/assets/images/workbench/st4.svg' |
| | | import titleImg3 from '@/assets/images/workbench/st8.svg' |
| | | import titleImg4 from '@/assets/images/workbench/st5.svg' |
| | | import titleImg5 from '@/assets/images/workbench/st6.svg' |
| | | import titleImg6 from '@/assets/images/workbench/st9.svg' |
| | | import { getStatics } from '@/api/home/index' |
| | | import { useRouter } from 'vue-router' |
| | | const router = useRouter() |
| | | const store = useStore() |
| | | const refresh = () => { |
| | | getStaticsList(); |
| | | }; |
| | | getStaticsList() |
| | | } |
| | | const jumppage = () => { |
| | | router.push({ |
| | | path: '/device/index', |
| | | }); |
| | | }; |
| | | const userInfo = computed(() => store.getters.userInfo); |
| | | const permission = computed(() => store.getters.permission); |
| | | }) |
| | | } |
| | | const userInfo = computed(() => store.getters.userInfo) |
| | | const permission = computed(() => store.getters.permission) |
| | | |
| | | const newtitleData = ref({}); |
| | | const newtitleData = ref({}) |
| | | |
| | | const test = { |
| | | no_move_list: { |
| | |
| | | }, |
| | | |
| | | insure_list: { |
| | | name: '机巢保险', |
| | | name: '无人机保险', |
| | | img: titleImg6, |
| | | }, |
| | | }; |
| | | } |
| | | const statusSelect = { |
| | | 4: '作业中', |
| | | 0: '空闲中', |
| | | '-1': '离线中', |
| | | }; |
| | | } |
| | | const flowStatus = { |
| | | 0: '无忧', |
| | | 1: '临期', |
| | | 2: '不足', |
| | | }; |
| | | } |
| | | const monitorStatus = { |
| | | 0: '离线中', |
| | | 1: '在线中', |
| | | }; |
| | | } |
| | | |
| | | const insureStatus = { |
| | | 0: '临近到期', |
| | | 1: '正常期限', |
| | | 2:'保险过期' |
| | | }; |
| | | 2: '保险过期' |
| | | } |
| | | const moveListStatus = { |
| | | '-1': '离线中', |
| | | 4: '在线中', |
| | | }; |
| | | } |
| | | // 样式配置对象 |
| | | const statusStyles = { |
| | | 机巢保险: { |
| | | 无人机保险: { |
| | | 0: { class: 'expired', color: '#FFA600', background: '#FFA600' }, |
| | | 1: { class: 'normal', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' }, |
| | | 2: { class: 'flying',color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' }, |
| | | 2: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' }, |
| | | }, |
| | | |
| | | 无人机流量: { |
| | |
| | | 4: { class: 'success', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' }, |
| | | '-1': { class: 'success', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' }, |
| | | }, |
| | | }; |
| | | } |
| | | |
| | | const getStatusStyle = (name, statusIndex) => { |
| | | const styleConfig = statusStyles[name] || statusStyles.default; |
| | | return styleConfig[statusIndex]?.class || ''; |
| | | }; |
| | | const styleConfig = statusStyles[name] || statusStyles.default |
| | | return styleConfig[statusIndex]?.class || '' |
| | | } |
| | | const getStatusColor = (name, statusIndex) => { |
| | | const styleConfig = statusStyles[name] || statusStyles.default; |
| | | return styleConfig[statusIndex]?.color || '#333'; |
| | | }; |
| | | const styleConfig = statusStyles[name] || statusStyles.default |
| | | return styleConfig[statusIndex]?.color || '#333' |
| | | } |
| | | //背景颜色获取方法 |
| | | const getStatusBackground = (name, statusIndex) => { |
| | | const styleConfig = statusStyles[name] || statusStyles.default; |
| | | return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0'; |
| | | }; |
| | | const styleConfig = statusStyles[name] || statusStyles.default |
| | | return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0' |
| | | } |
| | | const getStatusLabel = (itemName, statusCode) => { |
| | | switch (itemName) { |
| | | case '无人机流量': |
| | | return flowStatus[statusCode] || statusSelect[statusCode]; |
| | | return flowStatus[statusCode] || statusSelect[statusCode] |
| | | case '监控设备': |
| | | return monitorStatus[statusCode] || statusSelect[statusCode]; |
| | | case '机巢保险': |
| | | return insureStatus[statusCode] || statusSelect[statusCode]; |
| | | return monitorStatus[statusCode] || statusSelect[statusCode] |
| | | case '无人机保险': |
| | | return insureStatus[statusCode] || statusSelect[statusCode] |
| | | case '移动机巢': |
| | | return moveListStatus[statusCode] || statusSelect[statusCode]; |
| | | return moveListStatus[statusCode] || statusSelect[statusCode] |
| | | default: |
| | | return statusSelect[statusCode] || `未知状态(${statusCode})`; |
| | | return statusSelect[statusCode] || `未知状态(${statusCode})` |
| | | } |
| | | }; |
| | | } |
| | | |
| | | const getStaticsList = () => { |
| | | getStatics(userInfo.value.detail.areaCode).then(res => { |
| | | // console.log('permission.value', permission.value); |
| | | // console.log('permission.value', permission.value); |
| | | // console.log('设备', res.data.data); |
| | | if (permission.value?.device_statistics_six) { |
| | | const { move_list, monitor_list, ...filteredData } = res.data.data; |
| | | newtitleData.value = filteredData; |
| | | return; |
| | | const { move_list, monitor_list, ...filteredData } = res.data.data |
| | | newtitleData.value = filteredData |
| | | return |
| | | } |
| | | |
| | | for (let key in res.data.data) { |
| | | if (permission.value?.device_statistics_four) { |
| | | const { flow_type_list, insure_list, ...filteredData } = res.data.data; |
| | | newtitleData.value = filteredData; |
| | | return; |
| | | const { flow_type_list, insure_list, ...filteredData } = res.data.data |
| | | newtitleData.value = filteredData |
| | | return |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | }) |
| | | } |
| | | |
| | | const unitMap = { |
| | | 无人机流量: '架', |
| | | 无人机: '架', |
| | | 机巢: '个', |
| | | 机巢保险: '个', |
| | | 无人机保险: '个', |
| | | 监控设备: '个', |
| | | 移动机巢: '个', |
| | | }; |
| | | } |
| | | watch( |
| | | () => [ |
| | | userInfo.value.detail?.areaCode, |
| | |
| | | ], |
| | | () => getStaticsList(), |
| | | { immediate: true } |
| | | ); |
| | | ) |
| | | onMounted(() => { |
| | | getStaticsList(); |
| | | }); |
| | | getStaticsList() |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .statistics { |
| | | // height: 174px; |
| | | height: pxToVh(174); |
| | | height: pxToVh(174); |
| | | background: #ffffff; |
| | | border-radius: 8px 8px 8px 8px; |
| | | margin-bottom: 10px; |
| | | font-size: clamp(12px, 2vw, 24px); |
| | | |
| | | .title { |
| | | padding: 14px 14px 0 21px; |
| | | display: flex; |
| | |
| | | padding: 0 14px 0 21px; |
| | | // display: grid; |
| | | // grid-template-columns: repeat(4, 1fr); |
| | | height: pxToVh(80); |
| | | height: pxToVh(80); |
| | | display: flex; |
| | | justify-content: space-around; |
| | | :deep(.el-empty ){ |
| | | |
| | | :deep(.el-empty) { |
| | | width: 60px; |
| | | height: pxToVh(60); |
| | | .el-empty__image{ |
| | | width: 60px !important; |
| | | height: pxToVh(60)!important;} |
| | | |
| | | .el-empty__image { |
| | | width: 60px !important; |
| | | height: pxToVh(60) !important; |
| | | } |
| | | |
| | | .custom-text { |
| | | font-size: 12px; |
| | | color: #7c8091; |
| | | } |
| | | } |
| | | |
| | | .device-card { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #343434; |
| | | |
| | | div { |
| | | margin-top: 5px; |
| | | } |
| | | |
| | | .shu { |
| | | font-weight: bold; |
| | | font-size: 36px; |
| | |
| | | .status-list { |
| | | display: grid; |
| | | margin-left: 5px; |
| | | |
| | | .status-item { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | font-size: 12px; |
| | | gap: 10px; |
| | | margin-bottom: 5px; |
| | | |
| | | .indicator { |
| | | width: 6px; |
| | | height: 6px; |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .label { |
| | | flex: 1; |
| | | // font-size: clamp(12px, 1vw, 14px); |