liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

完成电子围栏，并拉取合并代码

Browse Source
This commit is contained in:
liub
2025-09-12 16:59:08 +08:00
parent d976443fb9 24cb308980
commit 030d305702
5 changed files with 196 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/home/types.ts
View File

@ -1,6 +1,6 @@
export interface DataOverviewType { export interface DataOverviewType {
devicesNumber: number | string; devicesNumber: number | string;
equipmentOnline: number | string; equipmentOnline: number | string;
bindingNew: number | string; binding: number | string;
equipmentAbnormal: number | string; equipmentAbnormal: number | string;
} }

2
src/router/index.ts
View File

@ -48,7 +48,7 @@ export const constantRoutes: RouteRecordRaw[] = [
path: '/index', path: '/index',
component: () => import('@/views/index.vue'), component: () => import('@/views/index.vue'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
} }
] ]
}, },

7
src/views/controlCenter/6170/index.vue
View File

@ -280,7 +280,7 @@ const handleModeClick = async (modeId: string) => {
} }
} }
} catch (error) { } catch (error) {
proxy?.$modal.msgError("操作失败，请稍后重试"); // proxy?.$modal.msgError("操作失败，请稍后重试");
// 异常时恢复状态 // 异常时恢复状态
const prevActiveMode = lightModes.value.find(m => m.active); const prevActiveMode = lightModes.value.find(m => m.active);
if (prevActiveMode) { if (prevActiveMode) {
@ -329,9 +329,6 @@ const getList = async () => {
const laserStatus = Number(res.data.laserLightMode); const laserStatus = Number(res.data.laserLightMode);
laserMode.value.active = laserStatus === 1; laserMode.value.active = laserStatus === 1;
laserMode.value.switchStatus = laserStatus === 1; laserMode.value.switchStatus = laserStatus === 1;
setTimeout(() => {
console.log('延迟检查激光状态:', laserMode.value.active, laserMode.value.switchStatus);
}, 1000);
} catch (error) { } catch (error) {
console.error("获取设备详情失败：", error); console.error("获取设备详情失败：", error);
setActiveLightMode("strong"); // 异常时默认强光 setActiveLightMode("strong"); // 异常时默认强光
@ -360,7 +357,7 @@ const handleLaserClick = async () => {
laserMode.value.switchStatus = !targetStatus; laserMode.value.switchStatus = !targetStatus;
} }
} catch (error: any) { } catch (error: any) {
proxy?.$modal.msgError(error.msg); proxy?.$modal.msgError(error.msg) ;
// 恢复之前的状态 // 恢复之前的状态
laserMode.value.switchStatus = !laserMode.value.switchStatus; laserMode.value.switchStatus = !laserMode.value.switchStatus;
} finally { } } finally { }

127
src/views/equipmentManagement/devices/index.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<div :class="Status.Mode == PageMode.device ? '' : 'displayNone'"> <div :class="Status.Mode == PageMode.device ? '' : 'displayNone'">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]"> <div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover"> <el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
@ -16,7 +17,8 @@
</el-form-item> </el-form-item>
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型"> <el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.id" /> <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备状态" prop="deviceStatus"> <el-form-item label="设备状态" prop="deviceStatus">
@ -26,15 +28,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
v-model="dateRange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@ -49,29 +45,33 @@
<template #header> <template #header>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button> <el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus"
@click="handleAdd()">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()"> <el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit"
@click="handleUpdate()">
修改 修改
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain icon="Download" @click="handleExport" <el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain
>导出</el-button icon="Download" @click="handleExport">导出</el-button>
>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple" @click="handleDelete()"> <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
@click="handleDelete()">
批量删除 批量删除
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport"> 批量导入 </el-button> <el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport"> 批量导入
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple" @click="handleBatchAssign"> <el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple"
@click="handleBatchAssign">
批量分配客户 批量分配客户
</el-button> </el-button>
</el-col> </el-col>
@ -82,16 +82,14 @@
<el-table v-loading="loading" border :data="deviceDist" @selection-change="handleSelectionChange"> <el-table v-loading="loading" border :data="deviceDist" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column prop="customerName" label="所属客户" /> <el-table-column prop="customerName" label="所属客户" v-hasPermi="['equipment:devices:allocate']" />
<el-table-column prop="devicePic" label="设备图片"> <el-table-column prop="devicePic" label="设备图片">
<template #default="scope"> <template #default="scope">
<el-popover placement="right" trigger="click"> <el-popover placement="right" trigger="click">
<template #reference> <template #reference>
<img <img :src="scope.row.devicePic"
:src="scope.row.devicePic"
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain" style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity" class="hover:opacity-80 transition-opacity" />
/>
</template> </template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" /> <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
</el-popover> </el-popover>
@ -108,7 +106,7 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="deviceStatus" label="设备状态"> <el-table-column prop="deviceStatus" label="设备状态" v-hasPermi="['equipment:devices:allocate']">
<template #default="scope"> <template #default="scope">
<el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'"> <el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">
{{ scope.row.deviceStatus == 1 ? '正常' : '失效' }} {{ scope.row.deviceStatus == 1 ? '正常' : '失效' }}
@ -122,25 +120,25 @@
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width"> <el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top"> <el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
<el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="!scope.row.customerName" content="删除" placement="top"> <el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
<el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top"> <el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
<el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User"
@click="handleAssign(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top"> <el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
<el-button <el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled"
v-hasPermi="['equipment:devices:revoke']" @click="handleWithdraw(scope.row)"></el-button>
link
type="primary"
icon="UploadFilled"
@click="handleWithdraw(scope.row)"
></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑" placement="top"> <el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button> placement="top">
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh"
@click="handleUnbind(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top"> <el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button> <el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
@ -151,7 +149,8 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</el-card> </el-card>
</div> </div>
<div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain"> <div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain">
@ -193,7 +192,8 @@
</div> </div>
</div> </div>
<!-- 添加或修改用户配置对话框 --> <!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body @close="closeDialog"> <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
@close="closeDialog">
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px"> <el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
@ -205,8 +205,10 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)" :disabled="form.id != ''"> <el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.id" /> :disabled="form.id != ''">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -235,15 +237,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="设备图片" prop="image"> <el-form-item label="设备图片" prop="image">
<el-upload <el-upload action="#" list-type="picture-card" :before-upload="beforeUpload" :on-change="fileUploadChange"
action="#" :http-request="httpRequestImg" :file-list="fileList" :limit="1">
list-type="picture-card"
:before-upload="beforeUpload"
:on-change="fileUploadChange"
:http-request="httpRequestImg"
:file-list="fileList"
:limit="1"
>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<template v-if="form.image && typeof form.image === 'string'"> <template v-if="form.image && typeof form.image === 'string'">
<img :src="form.image" class="avatar" style="width: 100px; height: 100px; object-fit: contain" /> <img :src="form.image" class="avatar" style="width: 100px; height: 100px; object-fit: contain" />
@ -272,7 +267,8 @@
<el-form> <el-form>
<el-form-item label="选择客户"> <el-form-item label="选择客户">
<el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%"> <el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName" :value="item.customerId" /> <el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -290,27 +286,17 @@
<p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p> <p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p>
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button> <el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button>
</div> </div>
<el-upload <el-upload ref="importUpload" :action="api.devicDeimport()" :headers="head_upload()" :show-file-list="false"
ref="importUpload" :before-upload="beforeImportUpload" :on-success="handleImportSuccess" :on-error="handleImportError" :limit="1"
:action="api.devicDeimport()" accept=".xlsx,.xls">
:headers="head_upload()"
:show-file-list="false"
:before-upload="beforeImportUpload"
:on-success="handleImportSuccess"
:on-error="handleImportError"
:limit="1"
accept=".xlsx,.xls"
>
<el-button type="success">选择文件开始导入</el-button> <el-button type="success">选择文件开始导入</el-button>
<div v-if="!importResult.isShow" slot="tip" class="el-upload__tip"> <div v-if="!importResult.isShow" slot="tip" class="el-upload__tip">
<div style="color: #409eff">只能上传模板excel文件</div> <div style="color: #409eff">只能上传模板excel文件</div>
</div> </div>
<div v-if="importResult.isShow" slot="tip" class="el-upload__tip"> <div v-if="importResult.isShow" slot="tip" class="el-upload__tip">
<span style="color: #409eff" <span style="color: #409eff">批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
>批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
<span style="color: #67c23a">{{ importResult.succeed }}</span> 条，失败 <span style="color: #67c23a">{{ importResult.succeed }}</span> 条，失败
<span style="color: red">{{ importResult.errorSun }}</span> 条。</span <span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
>
<p v-if="importResult.errorSun > 0" style="padding: 10px"> <p v-if="importResult.errorSun > 0" style="padding: 10px">
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a> <a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
</p> </p>
@ -327,7 +313,8 @@
<el-form> <el-form>
<el-form-item label="选择客户"> <el-form-item label="选择客户">
<el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%"> <el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName" :value="item.customerId" /> <el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -554,7 +541,7 @@ const handleUnbind = (row) => {
} }
}); });
}) })
.catch(() => {}); .catch(() => { });
}; };
// 撤回 // 撤回
const handleWithdraw = (row: any) => { const handleWithdraw = (row: any) => {
@ -837,7 +824,7 @@ const getDeviceType = () => {
deviceTypeOptions.value = res.data; deviceTypeOptions.value = res.data;
} }
}) })
.catch((err) => {}); .catch((err) => { });
}; };
// 客户下拉框 // 客户下拉框
const getAllCustomerAll = () => { const getAllCustomerAll = () => {
@ -965,7 +952,7 @@ const handleBatchAssignConfirm = () => {
return proxy?.$modal.msgSuccess(`分配成功`); return proxy?.$modal.msgSuccess(`分配成功`);
} }
}) })
.catch(() => {}); .catch(() => { });
}; };
watch( watch(

161
src/views/index.vue
View File

@ -13,8 +13,8 @@
<div class="title_number">在线设备</div> <div class="title_number">在线设备</div>
</div> </div>
<div class="data_orgine"> <div class="data_orgine">
<div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div> <div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
<div class="title_number">新增绑定</div> <div class="title_number">已绑定设备</div>
</div> </div>
<div class="data_red"> <div class="data_red">
<div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div> <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
@ -30,7 +30,7 @@
<div class="card-header"> <div class="card-header">
<div v-for="(item, index) in deviceList" :key="index" class="progress-item" <div v-for="(item, index) in deviceList" :key="index" class="progress-item"
style="display: inline-block; margin-right: 40px;"> style="display: inline-block; margin-right: 40px;">
<el-progress :stroke-width="7" type="circle" <el-progress :stroke-width="7" type="circle" :width="100"
:percentage="item.total === 0 ? 0 : (item.current / item.total) * 100"> :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
<template #default> <template #default>
<div class="progress-text"> <div class="progress-text">
@ -123,7 +123,6 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 报警事项 + 柱状图 --> <!-- 报警事项 + 柱状图 -->
<el-col :span="16"> <el-col :span="16">
<div class="alarm-items"> <div class="alarm-items">
@ -150,7 +149,7 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
const DataOverview = ref<DataOverviewType>({ const DataOverview = ref<DataOverviewType>({
devicesNumber: 0, devicesNumber: 0,
equipmentOnline: 0, equipmentOnline: 0,
bindingNew: 0, binding: 0,
equipmentAbnormal: 0 equipmentAbnormal: 0
}); });
const deviceTypeOptions = ref([]); //设备类型 const deviceTypeOptions = ref([]); //设备类型
@ -168,7 +167,6 @@ const deviceList = ref([
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图 const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图 const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图 const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
// ---------------------- 图表实例存储（用于销毁/更新） ---------------------- // ---------------------- 图表实例存储（用于销毁/更新） ----------------------
let frequencyChartInstance: echarts.ECharts | null = null; let frequencyChartInstance: echarts.ECharts | null = null;
let alarmRingChartInstance: echarts.ECharts | null = null; let alarmRingChartInstance: echarts.ECharts | null = null;
@ -301,6 +299,10 @@ const initAlarmRingChart = async () => {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比 formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比
}, },
legend: {
origin: 'vertical',
data: ['报警', '已处理']
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
@ -310,7 +312,24 @@ const initAlarmRingChart = async () => {
label: { label: {
show: true, show: true,
position: 'center', position: 'center',
formatter: `${alarmsTotalToday}/${processingAlarmToday}\n今日报警/处理`, formatter: [
'{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
'{textStyle|今日报警/处理}'
].join('\n'), // 换行
// 关键：配置 rich 定义样式
rich: {
valueStyle: {
color: '#333', // 数字颜色
fontSize: 18, // 数字字号
fontWeight: 'bold',// 数字加粗
lineHeight: 24 // 行高（控制与下一行间距）
},
textStyle: {
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
fontSize: 12, // 文字字号
lineHeight: 20 // 文字行高
}
},
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
@ -320,15 +339,16 @@ const initAlarmRingChart = async () => {
}, },
data: [ data: [
{ {
value: alarmsTotalToday, value: processingAlarmToday,
name: '已处理报警', name: '报警',
itemStyle: { color: '#07BE75' } // 绿色：已处理 itemStyle: { color: '#F65757' } // 红色：未处理
}, },
{ {
value: processingAlarmToday, value: alarmsTotalToday,
name: '未处理报警', name: '已处理',
itemStyle: { color: '#F65757' } // 红色：未处理 itemStyle: { color: '#07BE75' } // 绿色：已处理
} },
] ]
} }
] ]
@ -449,7 +469,8 @@ const getData = async () => {
// 设备类型 // 设备类型
apiTypeAll.deviceTypeAll().then(res => { apiTypeAll.deviceTypeAll().then(res => {
if (res.code == 200) { if (res.code == 200) {
deviceTypeOptions.value = res.data const originalData = Array.isArray(res.data) ? res.data : [];
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData);
} }
}).catch(err => { }).catch(err => {
@ -489,14 +510,13 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
padding:0px 20px 10px 20px; padding: 0px 20px 10px 20px;
background-color: #f5f7fa; background-color: #f5f7fa;
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
// 数据总览卡片样式 // 数据总览卡片样式
.data-item { .data-item {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
@ -506,32 +526,35 @@ onUnmounted(() => {
.data_green, .data_green,
.data_orgine, .data_orgine,
.data_red { .data_red {
width: 280px; width:23%;
height: 110px; height: 135px;
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
text-align: center; text-align: center;
background-size: 100% 100%; // 确保背景图充满容器
} }
.data_bck { .data_bck {
background: url('../assets/index/devices_online.png') no-repeat; background: url('../assets/index/devices_online.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
} }
.data_green { .data_green {
background: url('../assets/index/online.png') no-repeat; background: url('../assets/index/online.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
} }
.data_orgine { .data_orgine {
background: url('../assets/index/add.png') no-repeat; background: url('../assets/index/add.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
} }
.data_red { .data_red {
background: url('../assets/index/device_yc.png') no-repeat; background: url('../assets/index/device_yc.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
} }
.number { .number {
padding-top: 20px; padding-top:30px;
font-size: 18px; font-size: 18px;
span { span {
@ -550,7 +573,7 @@ onUnmounted(() => {
// 设备分类/快捷操作卡片样式 // 设备分类/快捷操作卡片样式
.content-row { .content-row {
background-color: #fff; background-color: #fff;
height: 240px; height: 215px;
border-radius: 10px; border-radius: 10px;
padding: 15px 25px; padding: 15px 25px;
margin-bottom: 20px; margin-bottom: 20px;
@ -577,16 +600,16 @@ onUnmounted(() => {
} }
.progress-name { .progress-name {
margin-top: 10px; margin-top: 20px;
font-size: 14px; font-size: 16px;
color: #666; color: #333;
} }
} }
.quick-item { .quick-item {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-top: 25px; margin-top: 15px;
.quick-img { .quick-img {
width: 80px; width: 80px;
@ -733,5 +756,91 @@ onUnmounted(() => {
} }
} }
} }
// 新增媒体查询，处理更小屏幕尺寸
@media (max-width: 768px) {
.data-item {
.data_bck,
.data_green,
.data_orgine,
.data_red {
width: 100%; // 在更小屏幕上，每个卡片占据一行
margin-bottom: 20px;
}
}
.content-row {
height: auto; // 自动高度，避免固定高度导致内容溢出
padding: 15px;
h2 {
font-size: 16px;
}
.progress-item,
.quick-item {
margin-top: 10px;
}
}
.region-chart-card {
height: auto; // 自动高度，避免固定高度导致内容溢出
.card-body {
height: auto;
}
.chart-container {
height: 200px; // 减少图表高度，适应小屏幕
}
}
.alarm-overview {
.alarm-stats {
flex-direction: column; // 报警统计项改为垂直排列
gap: 10px;
}
}
}
// 针对超小屏幕尺寸的适配
@media (max-width: 480px) {
.data-item {
.data_bck,
.data_green,
.data_orgine,
.data_red {
width: 100%; // 每个卡片占据一行
margin-bottom: 15px;
}
}
.content-row {
padding: 10px;
h2 {
font-size: 14px;
}
.progress-item,
.quick-item {
margin-top: 5px;
}
}
.region-chart-card {
padding: 10px;
.chart-container {
height: 150px; // 进一步减少图表高度
}
}
.alarm-overview {
.alarm-stats {
gap: 5px;
}
}
}
} }
</style> </style>