Merge pull request '设备类型增加参数、说明、视频' (#30 ) from liubiao/dyf-vue-ui:main into main

Reviewed-on: dyf/dyf-vue-ui#30
设备类型增加参数、说明、视频
2026-02-27 15:29:05 +08:00 · 2026-02-27 15:20:07 +08:00 · 2026-02-26 09:07:42 +08:00 · 2026-02-05 13:13:06 +08:00 · 2026-02-05 09:26:11 +08:00 · 2026-02-03 15:20:19 +08:00
12 changed files with 2242 additions and 231 deletions
--- a/.env.development
+++ b/.env.development
@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'

 # 开发环境
 #  VITE_APP_BASE_API = 'http://139.224.253.23:8000'
-  VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
-#VITE_APP_BASE_API = 'http://192.168.110.56:8000'   
+# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+VITE_APP_BASE_API = 'http://192.168.110.57:8000'   
 #代永飞接口
 # VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   

--- a/.env.production
+++ b/.env.production
@ -2,13 +2,16 @@
 VITE_APP_TITLE = 云平台管理系统

 # 生产环境配置 晶全1
-VITE_APP_ENV = 'https://www.cnxhyc.com'
+VITE_APP_ENV = 'production'

 # 生产环境配置 富源晟2
 # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'

 # 应用访问路径 晶全1
-VITE_APP_CONTEXT_PATH = '/jingquan/'
+VITE_APP_CONTEXT_PATH = '/PC/'
+
+# 高德地图Key
+VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'

 # 应用访问路径 富源晟2
 #VITE_APP_CONTEXT_PATH = '/sys/'          
@ -20,7 +23,9 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'

 # 生产环境 晶全3 代理访问
-VITE_APP_BASE_API = '/jq'
+VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+
+# VITE_APP_BASE_API = 'http://139.224.253.23:8000'

 # 生产环境 富源晟3
 #VITE_APP_BASE_API = '/backend-fys'
--- a/index.html
+++ b/index.html
@ -6,7 +6,12 @@
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="/favicon.ico" />
-      <script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307&plugin=AMap.CircleEditor"></script>
+    <script  type="text/javascript">
+      window._AMapSecurityConfig = {
+        securityJsCode: "4239900f4fb7b2569df651ac814a28de",
+      };
+    </script>
+      <script src="https://webapi.amap.com/maps?v=2.0&key=78c36a1e251a95f1a21a9e5ea7a1331c&plugin=AMap.CircleEditor"></script>
    <title>物联网管理平台</title>
    <!--[if lt IE 11
      ]><script>
--- a/src/api/equipmentManagement/deviceType/index.ts
+++ b/src/api/equipmentManagement/deviceType/index.ts
@ -17,7 +17,10 @@ export const addDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
  return request({
    url: '/api/deviceType/add',
    method: 'post',
-    data: data
+    data: data,
+     headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    }
  });
 };

@ -26,6 +29,9 @@ export const updateDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
  return request({
    url: '/api/deviceType/update',
    method: 'put',
+    headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    },
    data
  })
 }
@ -34,6 +40,7 @@ export const deleteDeviceType = (ids: any): AxiosPromise<deviceTypeVO[]> => {
  return request({
    url: '/api/deviceType/delete',
    method: 'delete',
+    
    data: ids
  })
 }
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@ -57,9 +57,9 @@ const props = defineProps({
  // 数量限制
  limit: propTypes.number.def(5),
  // 大小限制(MB)
-  fileSize: propTypes.number.def(5),
+  fileSize: propTypes.number.def(200),
  // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4']),
  // 是否显示提示
  isShowTip: propTypes.bool.def(true),
  // 禁用组件（仅查看文件）
--- a/src/views/controlCenter/018A/index.vue
+++ b/src/views/controlCenter/018A/index.vue
--- a/src/views/debugCenter/debugPanel/index.vue
+++ b/src/views/debugCenter/debugPanel/index.vue
@ -25,7 +25,7 @@
          <el-collapse-item name="1">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
              <el-form-item label="设备类型" prop="deviceType">
-                <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+                <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
                </el-select>
              </el-form-item>
@ -69,7 +69,7 @@
        :data="List"
        :height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
      >
-        <el-table-column type="selection" width="50" align="center"  :selectable="isSelectable"/>
+        <el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
        <el-table-column label="设备名称" align="center" prop="deviceName" />
        <el-table-column label="设备图片" align="center" prop="devicePic">
          <template #default="scope">
@ -189,7 +189,7 @@
            <div class="Preview">
              <div class="imgContent" v-for="(item, index) in cEdit.fileParam">
                <img class="img" :src="item.src" />
-                <div class="opt" @click.stop="DelImg(item,index,'fileParam')">
+                <div class="opt" @click.stop="DelImg(item, index, 'fileParam')">
                  <el-icon>
                    <Delete />
                  </el-icon>
@ -207,7 +207,14 @@
          <div class="title">操作说明</div>
          <div class="imgs">
            <div class="Preview">
-              <img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
+              <div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
            </div>
          </div>
          <div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
@ -231,8 +238,8 @@

    <!-- 提示框 -->
    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
-      <span>
-        {{ Status.confirm.text }}
+      <span v-html="Status.confirm.text">
+        
      </span>
      <template #footer>
        <div class="dialog-footer">
@ -293,7 +300,7 @@ var cEdit = reactive({
  fileParam: [],
  fileOprat: [],
  Video: '',
-  fileIds:[]
+  fileIds: []
 });
 //页码控件数据
 var pagin = reactive({
@ -340,8 +347,7 @@ function handleQuery() {
 const isSelectable = (row: any) => {
  // 仅当在线状态（onlineStatus == 1）时允许选中
  return row.onlineStatus === 1;
-}
-
+};

 function getList() {
  Status.loading = true;
@ -425,6 +431,7 @@ function ShowMultiEdit(type: MideaType) {

  setTimeout(dragImgAddEvt, 500);
 }
+
 function ShowSingleEdit(item) {
  Status.ShowEditPop = true;
  //期待接口返回以下4个字段
@ -454,7 +461,7 @@ function ShowSingleEdit(item) {
          return v.fileType == 1;
        })
        .map((v) => {
-          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
        });

      cEdit.fileParam = arr
@ -462,7 +469,7 @@ function ShowSingleEdit(item) {
          return v.fileType == 2;
        })
        .map((v) => {
-          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
        });

      cEdit.fileBoot.src = '';
@ -478,7 +485,7 @@ function CloseSingleEdit() {
  cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
  cEdit.fileOprat = [];
  cEdit.fileParam = [];
-  cEdit.fileIds=[];
+  cEdit.fileIds = [];
 }

 //关闭上传框
@ -591,7 +598,7 @@ function SaveItemData() {
  var formData = new FormData();
  formData.append('deviceId', cEdit.deviceId);
  formData.append('deviceImei', cEdit.deviceImei);
-  formData.append("fileIds",cEdit.fileIds);
+  formData.append('fileIds', cEdit.fileIds);

  cEdit.fileParam.forEach((v) => {
    if (v.file) {
@ -615,11 +622,20 @@ function SaveItemData() {
      if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
        if (res[0].value.code == 200 && res[1].value.code == 200) {
          CloseSingleEdit();
-          alert('操作成功');
+          alert('<span class="green">操作成功</span>');
          return;
        }
      }
-      alert('全部失败或部分失败');
+      if(res[0].status == 'fulfilled' && res[0].value.code == 200){
+        alert('<span class="green">产品参数、操作说明、操作视频保存成功</span>，<span class="red">开机画面保存失败</span>');
+        return;
+      }
+
+      if(res[1].status == 'fulfilled' && res[1].value.code == 200){
+        alert('<span class="red">产品参数、操作说明、操作视频保存失败</span>，<span class="green">开机画面保存成功</span>');
+        return;
+      }
+      alert('<span class="red">操作失败</span>');
    })
    .finally(() => {
      Status.fullLoading = false;
@ -822,17 +838,15 @@ var hideConfirm = function () {
 };

 //删除某个图片
-function DelImg(item,index,type){
-  
-if(item.id){
-confirm('您确认删除吗?',()=>{
+function DelImg(item, index, type) {
+  if (item.id) {
+    confirm('您确认删除吗?', () => {
      cEdit.fileIds.push(item.id);
-   cEdit[type].splice(index,1);
-
-});
-}else{
-  cEdit[type].splice(index,1);
-}
+      cEdit[type].splice(index, 1);
+    });
+  } else {
+    cEdit[type].splice(index, 1);
+  }
 }

 onMounted(() => {
@ -1093,5 +1107,4 @@ onMounted(() => {
 .red {
  color: rgba(224, 52, 52, 1);
 }
-
 </style>
--- a/src/views/equipmentManagement/deviceType/index.vue
+++ b/src/views/equipmentManagement/deviceType/index.vue
--- a/src/views/equipmentManagement/devices/eqDetail.vue
+++ b/src/views/equipmentManagement/devices/eqDetail.vue
@ -24,7 +24,7 @@
        
        <div class="item">
          <div class="lable">通讯方式<span>：</span></div>
-          <div class="val">{{ detailData?.communicationMode===1 ?'蓝牙':'4G' }}</div>
+          <div class="val">{{ detailData?.communicationMode===1 ?'4G':'蓝牙' }}</div>
        </div>
        <div class="item">
          <div class="lable">蓝牙名称<span>：</span></div>
--- a/src/views/equipmentManagement/devices/index.vue
+++ b/src/views/equipmentManagement/devices/index.vue
@ -16,7 +16,7 @@
                <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
              </el-form-item>
              <el-form-item label="设备类型" prop="deviceType" >
-                <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
+                <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                    :value="item.id" />
                </el-select>
@ -227,7 +227,7 @@
          <el-col :span="24">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
-                :disabled="form.id != ''">
+                >
                <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                  :value="item.id" />
              </el-select>
--- a/src/views/equipmentManagement/devices/shareManage.vue
+++ b/src/views/equipmentManagement/devices/shareManage.vue
@ -141,6 +141,7 @@
 import request from '@/utils/request';
 import common from '@/utils/common';
 import api from '@/api/equipmentManagement/device/shareManage';
+import { dataURLtoImage } from 'image-conversion';
 const props = defineProps({
  data: {
    type: Object,
@ -211,18 +212,172 @@ var dic = reactive({
 });


-var power = computed(() => {
-  let arr = [];
-  let keys = Object.keys(dic);
-  keys.forEach((key) => {
-    arr.push({ label: dic[key], value: key });
-  });
-  return arr;
-});
+var power =ref([]); 
+
+function calcPower() {
+  
+
+  let array = [{
+				value: "1",
+				label: "灯光模式",
+				checked: false,
+				type: ['BJQ6170', 'HBY670','HBY102','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "2",
+				label: "激光模式",
+				checked: false,
+				type: ['BJQ6170']
+			},
+			{
+				value: "3",
+				label: "开机画面",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "4",
+				label: "人员信息登记",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "5",
+				label: "发送信息",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670']
+			},
+			{
+				value: "6",
+				label: "产品信息",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670']
+			}, {
+				value: "41",
+				label: "静电探测",
+				checked: false,
+				type: ['HBY670','HBY650']
+			}, {
+				value: "42",
+				label: "SOS",
+				checked: false,
+				type: ['HBY670','BJQ4877']
+			},
+			{
+				value: "43",
+				label: "联机设备",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "44",
+				label: "报警声音",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "45",
+				label: "自动报警",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "46",
+				label: "手动报警",
+				checked: false,
+				type: ['HBY210','HBY102']
+			},
+				{
+				value: "47",
+				label: "报警时长",
+				checked: false,
+				type: ['HBY210']
+			},
+			{
+				value: "48",
+				label: "物体感应",
+				checked: false,
+				type: ['HBY102']
+			},
+			{
+				value: "49",
+				label: "联机模式",
+				checked: false,
+				type: ['HBY102']
+			},
+			
+			{
+				value: "50",
+				label: "报警模式",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "51",
+				label: "警示灯",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "52",
+				label: "语音管理",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "53",
+				label: "箭头模式",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "54",
+				label: "配组设置",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "55",
+				label: "修改信道",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "56",
+				label: "灯光类型设置",
+				checked: false,
+				type: ['HBY100-J']
+			}
+		];
+
+     
+let f=array.filter(v=>{
+ if(v.type.indexOf(data.value.typeName)>-1){
+  return true;
+ }
+ return false;
+})
+
+power.value=f;
+
+  // let arr = [];
+  // let keys = Object.keys(dic);
+
+  // keys.forEach((key) => {
+  //   arr.push({ label: dic[key], value: key });
+  // });
+  // return arr;
+};
+
+
 //打开编辑
 function ShowEdit() {
  Status.ShowEditPop = true;
  getUsrs();
+  calcPower();
 }
 //关闭编辑
 function CloseEdit() {
@ -276,6 +431,7 @@ function SaveFormData(type) {
 }

 function getPower(item) {
+  
  let str = [];
  if (item && item.permission) {
    let arr = item.permission.split(',');
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -4,20 +4,28 @@
    <div>
      <h2>数据总览</h2>
      <div class="data-item">
-        <div class="data_bck">
-          <div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
+        <div class="data_bck data">
+          <div class="number">
+            <span>{{ DataOverview.devicesNumber }}</span> 个
+          </div>
          <div class="title_number">设备数量</div>
        </div>
-        <div class="data_green">
-          <div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
+        <div class="data_green data">
+          <div class="number">
+            <span>{{ DataOverview.equipmentOnline }}</span> 个
+          </div>
          <div class="title_number">在线设备</div>
        </div>
-        <div class="data_orgine">
-          <div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
+        <div class="data_orgine data">
+          <div class="number">
+            <span>{{ DataOverview.binding }}</span> 个
+          </div>
          <div class="title_number">已绑定设备</div>
        </div>
-        <div class="data_red">
-          <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
+        <div class="data_red data">
+          <div class="number">
+            <span>{{ DataOverview.equipmentAbnormal }}</span> 个
+          </div>
          <div class="title_number">异常设备</div>
        </div>
      </div>
@ -28,10 +36,8 @@
          <div class="content-row">
            <h2>设备分类</h2>
            <div class="card-header">
-              <div v-for="(item, index) in deviceList" :key="index" class="progress-item"
-                style="display: inline-block; margin-right: 40px;">
-                <el-progress :stroke-width="7" type="circle" :width="100"
-                  :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
+              <div v-for="(item, index) in deviceList" :key="index" class="progress-item" style="display: inline-block; margin-right: 40px">
+                <el-progress :stroke-width="7" type="circle" :width="100" :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
                  <template #default>
                    <div class="progress-text">
                      <span class="current">{{ item.current }}</span>
@ -77,20 +83,12 @@
            <div class="card-header">
              <h2>设备使用频次</h2>
              <div class="chart-controls">
-                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;"
-                  @change="handleDeviceTypeChange">
-                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
-                    :value="item.deviceTypeId" />
+                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px" @change="handleDeviceTypeChange">
+                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
                </el-select>
                <div class="tab-group">
-                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }"
-                    @click="updateFrequencyChart('1')">
-                    近半年
-                  </div>
-                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }"
-                    @click="updateFrequencyChart('2')">
-                    近一年
-                  </div>
+                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }" @click="updateFrequencyChart('1')">近半年</div>
+                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }" @click="updateFrequencyChart('2')">近一年</div>
                </div>
              </div>
            </div>
@ -141,8 +139,8 @@
 </template>

 <script setup name="Index" lang="ts">
-import api from '@/api/home/index'
-import { DataOverviewType } from '@/api/home/types'
+import api from '@/api/home/index';
+import { DataOverviewType } from '@/api/home/types';
 import router from '@/router';
 import * as echarts from 'echarts'; // 引入ECharts核心库
 import apiTypeAll from '@/api/equipmentManagement/device/index';
@ -153,15 +151,15 @@ const DataOverview = ref<DataOverviewType>({
  equipmentAbnormal: 0
 });
 const deviceTypeOptions = ref([]); //设备类型
-const deviceType = ref()
+const deviceType = ref();
 const activeTab = ref('1');
-const alarmsData = ref()
+const alarmsData = ref();
 // ---------------------- 基础数据 ----------------------
 // 设备分类数据
 const deviceList = ref([
-  { name: "4G设备", current: 0, total: 0 },
-  { name: "蓝牙设备", current: 0, total: 0 },
-  { name: "4G&蓝牙设备", current: 0, total: 0 },
+  { name: '4G设备', current: 0, total: 0 },
+  { name: '蓝牙设备', current: 0, total: 0 },
+  { name: '4G&蓝牙设备', current: 0, total: 0 }
 ]);
 // ---------------------- 图表Ref（用于挂载图表实例） ----------------------
 const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
@ -193,7 +191,7 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
  try {
    let data = {
      deviceTypeId: deviceTypeId
-    }
+    };
    const res = await api.getEquipmentUsageData(range, data);
    const monthData = res.data[0] || {};
    const monthKeys = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12'];
@ -202,23 +200,24 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
    let filteredKeys, filteredNames, yAxisData;
    const today = new Date();
    const currentMonth = today.getMonth();
-    if (range === '1') {
+
+    let mm = 6;
+    if (range === '2') {
+      mm = 12;
+    }
    const result = [];
-      for (let i = 0; i < 6; i++) {
+    for (let i = 0; i < mm; i++) {
      const targetMonth = (currentMonth - i + 12) % 12;
      result.push(targetMonth);
    }
-      const recent6Months = result.reverse();
+    const recentMonths = result.reverse();
+
+
    // 匹配接口字段和名称
-      filteredKeys = recent6Months.map(monthIndex => monthKeys[monthIndex]);
-      filteredNames = recent6Months.map(monthIndex => monthNames[monthIndex]);
-      yAxisData = filteredKeys.map(key => monthData[key] || 0);
-    } else {
-      // 近一年：全部12个月（1月→12月）
-      filteredKeys = monthKeys;
-      filteredNames = monthNames;
-      yAxisData = filteredKeys.map(key => monthData[key] || 0);
-    }
+    filteredKeys = recentMonths.map((monthIndex) => monthKeys[monthIndex]);
+    filteredNames = recentMonths.map((monthIndex) => monthNames[monthIndex]);
+    yAxisData = filteredKeys.map((key) => monthData[key] || 0);
+
    const chartData = {
      xAxis: filteredNames,
      yAxis: yAxisData,
@ -258,7 +257,10 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
          areaStyle: {
            color: {
              type: 'linear',
-              x: 0, y: 0, x2: 0, y2: 1,
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0)' }
@ -267,21 +269,22 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
          },
          markPoint: {
            data: chartData.peak.value
-              ? [{
+              ? [
+                  {
                    name: chartData.peak.name,
                    value: chartData.peak.value,
                    xAxis: chartData.xAxis.indexOf(chartData.peak.month),
                    yAxis: chartData.peak.value,
                    itemStyle: { color: '#409eff' }
-              }]
+                  }
+                ]
              : []
          }
        }
      ]
    };
    frequencyChartInstance.setOption(option);
-  } catch (error) {
-  }
+  } catch (error) {}
 };
 /**
 * 2. 报警环形图（今日报警处理占比）
@ -292,7 +295,7 @@ const initAlarmRingChart = async () => {
  try {
    const res = await api.getAlarmInformation({});
    const { alarmsTotalToday = 0, processingAlarmToday = 0 } = res.data || {};
-    alarmsData.value = res.data || '0'
+    alarmsData.value = res.data || '0';
    alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
    const option = {
      tooltip: {
@ -312,16 +315,13 @@ const initAlarmRingChart = async () => {
          label: {
            show: true,
            position: 'center',
-            formatter: [
-              '{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
-              '{textStyle|今日报警/处理}'
-            ].join('\n'), // 换行
+            formatter: ['{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}', '{textStyle|今日报警/处理}'].join('\n'), // 换行
            // 关键：配置 rich 定义样式
            rich: {
              valueStyle: {
                color: '#333', // 数字颜色
                fontSize: 18, // 数字字号
-                fontWeight: 'bold',// 数字加粗
+                fontWeight: 'bold', // 数字加粗
                lineHeight: 24 // 行高（控制与下一行间距）
              },
              textStyle: {
@ -338,9 +338,8 @@ const initAlarmRingChart = async () => {
            show: false // 隐藏标签连接线
          },
          data: [
-         
            {
-              value:processingAlarmToday ,
+              value: processingAlarmToday,
              name: '已处理',
              itemStyle: { color: '#07BE75' }
            },
@ -348,17 +347,15 @@ const initAlarmRingChart = async () => {
              value: alarmsTotalToday,
              name: '报警',
              itemStyle: { color: '#F65757' }
-            },
-
+            }
          ]
        }
      ]
    };
    alarmRingChartInstance.setOption(option);
    // 报警柱状图
-    initAlarmBarChart()
-  } catch (error) {
-  }
+    initAlarmBarChart();
+  } catch (error) {}
 };

 /**
@ -373,8 +370,8 @@ const initAlarmBarChart = () => {
    { name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
  ];

-  const alarmTypes = alarmTypeMap.map(item => item.name);
-  const alarmCounts = alarmTypeMap.map(item => {
+  const alarmTypes = alarmTypeMap.map((item) => item.name);
+  const alarmCounts = alarmTypeMap.map((item) => {
    const value = alarmsData.value[item.field]; // 提取对应字段值
    console.log(`${item.name}数值:`, value); // 打印每个类型的数值
    return value;
@ -429,19 +426,18 @@ const updateFrequencyChart = (tabValue: any) => {
  if (frequencyChartInstance) {
    frequencyChartInstance.dispose();
  }
-  deviceType.value=''
+  deviceType.value = '';
  initFrequencyChart(tabValue, '');
 };
 const handleDeviceTypeChange = (all) => {
  initFrequencyChart(activeTab.value, all);
-
 };
 // 首页统计接口
 const getData = async () => {
  //  设备总览
-  api.getDataOverview({}).then(res => {
-    DataOverview.value = res.data
-  })
+  api.getDataOverview({}).then((res) => {
+    DataOverview.value = res.data;
+  });
  // 设备分类
  try {
    const res = await api.getEquipmentClassification({});
@ -450,48 +446,42 @@ const getData = async () => {
    // 映射数据：current 为各类型设备数量，total 为总设备数（6）
    deviceList.value = [
      {
-        name: "4G设备",
+        name: '4G设备',
        current: equipment4G,
        total: total
      },
      {
-        name: "蓝牙设备",
+        name: '蓝牙设备',
        current: deviceBluetooth,
        total: total
      },
      {
-        name: "4G&蓝牙设备",
+        name: '4G&蓝牙设备',
        current: devices4GAndBluetooth,
        total: total
-      },
+      }
    ];
  } catch (error) {
    console.log('获取设备分类数据失败：', error);
  }
  // 设备类型
-  apiTypeAll.deviceTypeAll().then(res => {
+  apiTypeAll
+    .deviceTypeAll()
+    .then((res) => {
      if (res.code == 200) {
        const originalData = Array.isArray(res.data) ? res.data : [];
-      deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData); 
+        deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: '' }].concat(originalData);
      }
-  }).catch(err => {
-
    })
+    .catch((err) => {});
 };

-
-
-
-
-
-
-
 // ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
 onMounted(() => {
  // 页面加载时初始化所有图表
  initFrequencyChart('1', '');
  initAlarmRingChart();
-  getData()
+  getData();

  // 监听窗口 resize，自动调整图表大小
  window.addEventListener('resize', () => {
@ -506,11 +496,15 @@ onUnmounted(() => {
  frequencyChartInstance?.dispose();
  alarmRingChartInstance?.dispose();
  //alarmBarChartInstance?.dispose();
-  window.removeEventListener('resize', () => { });
+  window.removeEventListener('resize', () => {});
 });
 </script>

 <style lang="scss" scoped>
+
+.data,.content-row,.region-chart-card{
+  box-shadow: 0px 0px 12px 0px #3c3c3c2b;
+}
 .home {
  padding: 10px 20px 10px 20px;
  background-color: #f5f7fa;
@ -528,7 +522,7 @@ onUnmounted(() => {
    .data_green,
    .data_orgine,
    .data_red {
-      width:23%;
+      width: 23%;
      height: 135px;
      border-radius: 10px;
      position: relative;
@ -556,7 +550,7 @@ onUnmounted(() => {
    }

    .number {
-      padding-top:30px;
+      padding-top: 30px;
      font-size: 18px;

      span {
@ -675,7 +669,6 @@ onUnmounted(() => {
    padding: 16px;
    height: 360px; // 固定图表卡片高度，避免布局错乱

-
    .card-body {
      height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
    }
@ -713,7 +706,7 @@ onUnmounted(() => {
        }

        .stat.green {
-          color: #07BE75;
+          color: #07be75;
        }

        .label {
Author	SHA1	Message	Date
dyf	1307e1bddf	Merge pull request '设备类型增加参数、说明、视频' (#30 ) from liubiao/dyf-vue-ui:main into main Reviewed-on: dyf/dyf-vue-ui#30	2026-02-27 15:29:05 +08:00
liub	0ff3e4b1bc	设备类型增加参数、说明、视频	2026-02-27 15:20:07 +08:00
dyf	3231df14d9	Merge pull request '修复首页“设备使用频次”功能X轴显示错误' (#29 ) from liubiao/dyf-vue-ui:main into main Reviewed-on: dyf/dyf-vue-ui#29	2026-02-26 09:07:42 +08:00
liub	4880ffc37c	修复首页“设备使用频次”功能X轴显示错误	2026-02-05 13:13:06 +08:00
dyf	26e4ab7539	Merge pull request 'main 设备功能类型控制支持筛选,文件管理功能增加更多类型扩大文件大小' (#28 ) from liubiao/dyf-vue-ui:main into main Reviewed-on: dyf/dyf-vue-ui#28	2026-02-05 09:26:11 +08:00
liubiao	5fb12d90ba	merge upstream	2026-02-03 15:20:19 +08:00
liub	c424fbd04b	设备功能类型控制支持筛选,文件管理功能增加更多类型扩大文件大小	2026-02-03 15:19:36 +08:00
dyf	15719b4a27	Merge pull request '设备类型添加图片' (#27 ) from liubiao/dyf-vue-ui:main into main Reviewed-on: dyf/dyf-vue-ui#27	2026-01-12 11:20:17 +08:00
liub	a1b3d03a0c	设备类型添加图片	2026-01-12 10:22:41 +08:00
liub	33d2123778	增加配置节	2025-12-22 09:19:32 +08:00