|
@@ -21,8 +21,7 @@
|
|
|
<Echart
|
|
<Echart
|
|
|
v-if="statusChartOption.series && statusChartOption.series[0].data.length > 0"
|
|
v-if="statusChartOption.series && statusChartOption.series[0].data.length > 0"
|
|
|
:options="statusChartOption"
|
|
:options="statusChartOption"
|
|
|
- :height="160"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ :height="160" />
|
|
|
<div v-else class="flex items-center justify-center h-full text-gray-500">
|
|
<div v-else class="flex items-center justify-center h-full text-gray-500">
|
|
|
暂无数据
|
|
暂无数据
|
|
|
</div>
|
|
</div>
|
|
@@ -46,8 +45,7 @@
|
|
|
style="height: 30px"
|
|
style="height: 30px"
|
|
|
@keyup.enter="handleQuery"
|
|
@keyup.enter="handleQuery"
|
|
|
v-model="queryParams.deviceCode"
|
|
v-model="queryParams.deviceCode"
|
|
|
- placeholder="请输入设备编码"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ placeholder="请输入设备编码" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="设备名称" prop="deviceName">
|
|
<el-form-item label="设备名称" prop="deviceName">
|
|
@@ -55,8 +53,7 @@
|
|
|
style="height: 30px"
|
|
style="height: 30px"
|
|
|
@keyup.enter="handleQuery"
|
|
@keyup.enter="handleQuery"
|
|
|
v-model="queryParams.deviceName"
|
|
v-model="queryParams.deviceName"
|
|
|
- placeholder="请输入设备名称"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ placeholder="请输入设备名称" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
@@ -94,7 +91,7 @@
|
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 列表 -->
|
|
<!-- 列表 -->
|
|
|
- <ContentWrap style="border: 0; margin-top: 10px">
|
|
|
|
|
|
|
+ <ContentWrap style="margin-top: 10px; border: 0">
|
|
|
<zm-table
|
|
<zm-table
|
|
|
:loading="loading"
|
|
:loading="loading"
|
|
|
:data="list"
|
|
:data="list"
|
|
@@ -102,8 +99,7 @@
|
|
|
:show-overflow-tooltip="true"
|
|
:show-overflow-tooltip="true"
|
|
|
@sort-change="handleSortChange"
|
|
@sort-change="handleSortChange"
|
|
|
ref="tableRef"
|
|
ref="tableRef"
|
|
|
- :height="tableHeight"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ :height="tableHeight">
|
|
|
<zm-table-column :label="t('iotDevice.serial')" width="70" align="center" fixed="left">
|
|
<zm-table-column :label="t('iotDevice.serial')" width="70" align="center" fixed="left">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
{{ scope.$index + 1 }}
|
|
{{ scope.$index + 1 }}
|
|
@@ -115,8 +111,7 @@
|
|
|
sortable
|
|
sortable
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="deviceCode"
|
|
prop="deviceCode"
|
|
|
- fixed="left"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ fixed="left" />
|
|
|
<zm-table-column :label="t('iotDevice.name')" sortable align="center" prop="deviceName">
|
|
<zm-table-column :label="t('iotDevice.name')" sortable align="center" prop="deviceName">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<el-link :underline="false" type="primary" @click="handleDetail(scope.row.id)">
|
|
<el-link :underline="false" type="primary" @click="handleDetail(scope.row.id)">
|
|
@@ -130,8 +125,7 @@
|
|
|
:label="t('iotDevice.status')"
|
|
:label="t('iotDevice.status')"
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="deviceStatus"
|
|
prop="deviceStatus"
|
|
|
- min-width="90"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ min-width="90">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
|
|
<dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
|
|
|
</template>
|
|
</template>
|
|
@@ -140,8 +134,7 @@
|
|
|
:label="t('iotDevice.assets')"
|
|
:label="t('iotDevice.assets')"
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="assetProperty"
|
|
prop="assetProperty"
|
|
|
- min-width="110"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ min-width="110">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
|
<dict-tag :type="DICT_TYPE.PMS_ASSET_PROPERTY" :value="scope.row.assetProperty" />
|
|
<dict-tag :type="DICT_TYPE.PMS_ASSET_PROPERTY" :value="scope.row.assetProperty" />
|
|
|
</template>
|
|
</template>
|
|
@@ -150,8 +143,7 @@
|
|
|
:label="t('iotDevice.assetClass')"
|
|
:label="t('iotDevice.assetClass')"
|
|
|
align="center"
|
|
align="center"
|
|
|
prop="assetClassName"
|
|
prop="assetClassName"
|
|
|
- min-width="170"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ min-width="170" />
|
|
|
<zm-table-column label="生产厂家" align="center" prop="manufacturer" />
|
|
<zm-table-column label="生产厂家" align="center" prop="manufacturer" />
|
|
|
<zm-table-column label="生产日期" align="center" min-width="120">
|
|
<zm-table-column label="生产日期" align="center" min-width="120">
|
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
@@ -172,8 +164,7 @@
|
|
|
:total="total"
|
|
:total="total"
|
|
|
v-model:page="queryParams.pageNo"
|
|
v-model:page="queryParams.pageNo"
|
|
|
v-model:limit="queryParams.pageSize"
|
|
v-model:limit="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ @pagination="getList" />
|
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
|
|
|
|
|
|
<!-- <el-dialog
|
|
<!-- <el-dialog
|
|
@@ -237,7 +228,7 @@ import download from '@/utils/download'
|
|
|
const message = useMessage() // 消息弹窗
|
|
const message = useMessage() // 消息弹窗
|
|
|
let isLeftContentCollapsed = ref(false)
|
|
let isLeftContentCollapsed = ref(false)
|
|
|
/** 设备台账 列表 */
|
|
/** 设备台账 列表 */
|
|
|
-defineOptions({ name: 'IotDevicePms' })
|
|
|
|
|
|
|
+defineOptions({ name: 'DeviceBook' })
|
|
|
|
|
|
|
|
const { t } = useI18n() // 国际化
|
|
const { t } = useI18n() // 国际化
|
|
|
const { push } = useRouter() // 路由跳转
|
|
const { push } = useRouter() // 路由跳转
|
|
@@ -640,28 +631,40 @@ onMounted(async () => {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+/* 响应式调整 */
|
|
|
|
|
+@media (width <= 768px) {
|
|
|
|
|
+ .export-checkbox-group {
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .export-dialog {
|
|
|
|
|
+ width: 90% !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.stat-card {
|
|
.stat-card {
|
|
|
|
|
+ height: 230px;
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: white;
|
|
color: white;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- font-size: 14px;
|
|
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
|
|
|
transition:
|
|
transition:
|
|
|
transform 0.3s ease,
|
|
transform 0.3s ease,
|
|
|
box-shadow 0.3s ease;
|
|
box-shadow 0.3s ease;
|
|
|
backdrop-filter: blur(12px);
|
|
backdrop-filter: blur(12px);
|
|
|
- height: 230px;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.stat-card::before {
|
|
.stat-card::before {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- filter: blur(20px);
|
|
|
|
|
z-index: -1;
|
|
z-index: -1;
|
|
|
|
|
+ filter: blur(20px);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stat-card:hover {
|
|
.stat-card:hover {
|
|
|
transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
|
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
|
+ box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card-title {
|
|
.card-title {
|
|
@@ -670,9 +673,9 @@ onMounted(async () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card-value {
|
|
.card-value {
|
|
|
|
|
+ margin: 8px 0;
|
|
|
font-size: 28px;
|
|
font-size: 28px;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
- margin: 8px 0;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card-trend {
|
|
.card-trend {
|
|
@@ -682,17 +685,17 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
/* 毛玻璃渐变背景 —— 不再使用 background-image */
|
|
/* 毛玻璃渐变背景 —— 不再使用 background-image */
|
|
|
.bg-blue-gradient {
|
|
.bg-blue-gradient {
|
|
|
- background: linear-gradient(135deg, rgba(77, 147, 255, 0.5), rgba(75, 132, 254));
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, rgb(77 147 255 / 50%), rgb(75 132 254));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.bg-green-gradient {
|
|
.bg-green-gradient {
|
|
|
- background: linear-gradient(135deg, rgba(101, 226, 136, 0.1), #52d7a2);
|
|
|
|
|
- background-color: rgba(76, 175, 80, 0.1);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, rgb(101 226 136 / 10%), #52d7a2);
|
|
|
|
|
+ background-color: rgb(76 175 80 / 10%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.bg-orange-gradient {
|
|
.bg-orange-gradient {
|
|
|
background: linear-gradient(135deg, #ff9800, #f57c00);
|
|
background: linear-gradient(135deg, #ff9800, #f57c00);
|
|
|
- background-color: rgba(255, 152, 0, 0.5);
|
|
|
|
|
|
|
+ background-color: rgb(255 152 0 / 50%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 确保内容不溢出 */
|
|
/* 确保内容不溢出 */
|
|
@@ -708,14 +711,14 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
::v-deep .el-table__header-wrapper {
|
|
::v-deep .el-table__header-wrapper {
|
|
|
position: sticky !important;
|
|
position: sticky !important;
|
|
|
- width: 100%;
|
|
|
|
|
- top: 0px;
|
|
|
|
|
|
|
+ top: 0;
|
|
|
z-index: 2000;
|
|
z-index: 2000;
|
|
|
|
|
+ width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-dialog :deep(.el-dialog) {
|
|
.export-dialog :deep(.el-dialog) {
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-dialog-content {
|
|
.export-dialog-content {
|
|
@@ -727,25 +730,25 @@ onMounted(async () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-title {
|
|
.export-title {
|
|
|
|
|
+ margin: 0 0 4px;
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #303133;
|
|
color: #303133;
|
|
|
- margin: 0 0 4px 0;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-subtitle {
|
|
.export-subtitle {
|
|
|
|
|
+ margin: 0;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
color: #909399;
|
|
color: #909399;
|
|
|
- margin: 0;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-options-container {
|
|
.export-options-container {
|
|
|
max-height: 300px;
|
|
max-height: 300px;
|
|
|
- overflow-y: auto;
|
|
|
|
|
padding: 8px;
|
|
padding: 8px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ background-color: #fafafa;
|
|
|
border: 1px solid #e4e7ed;
|
|
border: 1px solid #e4e7ed;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
- background-color: #fafafa;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-checkbox-group {
|
|
.export-checkbox-group {
|
|
@@ -756,24 +759,24 @@ onMounted(async () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-checkbox-item {
|
|
.export-checkbox-item {
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
padding: 8px 12px;
|
|
padding: 8px 12px;
|
|
|
- border-radius: 6px;
|
|
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
border: 1px solid #ebeef5;
|
|
border: 1px solid #ebeef5;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
|
- background-color: #fff;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-checkbox-item:hover {
|
|
.export-checkbox-item:hover {
|
|
|
background-color: #f5f7fa;
|
|
background-color: #f5f7fa;
|
|
|
border-color: #dcdfe6;
|
|
border-color: #dcdfe6;
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
|
+ box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.export-checkbox-item:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
|
.export-checkbox-item:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
|
|
- color: #409eff;
|
|
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
|
|
+ color: #409eff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.checkbox-text {
|
|
.checkbox-text {
|
|
@@ -810,15 +813,4 @@ onMounted(async () => {
|
|
|
.export-options-container::-webkit-scrollbar-thumb:hover {
|
|
.export-options-container::-webkit-scrollbar-thumb:hover {
|
|
|
background: #a8a8a8;
|
|
background: #a8a8a8;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-/* 响应式调整 */
|
|
|
|
|
-@media (max-width: 768px) {
|
|
|
|
|
- .export-checkbox-group {
|
|
|
|
|
- grid-template-columns: 1fr;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .export-dialog {
|
|
|
|
|
- width: 90% !important;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
</style>
|
|
</style>
|