完成设备详情

src/api/equipmentManagement/device/shareManage.ts

@@ -0,0 +1,86 @@
+import request from '@/utils/request';
+import { resolve } from 'path';
+
+
+
+function DelShare(ids) {
+    return request({
+        url: '/api/equipment/share/' + ids,
+        method: 'delete'
+    });
+}
+//添加分享数据
+function SaveShare(data,type){
+
+    let promise=null;
+   if(type=='add'){
+    promise=addShare(data);
+   }else{
+    promise=powerSet(data);
+   }
+   return promise;
+}
+//添加
+function addShare(data) {
+    return request({
+        url: '/api/equipment/share/deviceShare',
+        method: 'post',
+        data: data
+    });
+}
+
+//修改
+function powerSet(data) {
+    return request({
+        url: '/api/equipment/share/permission',
+        method: 'post',
+        data: data
+    });
+
+}
+//查询
+function searchShare(params) {
+    return request({
+        url: '/api/equipment/share/deviceShareList',
+        method: 'get',
+        params: params
+    })
+}
+
+//发送验证码
+function sendSms(phoneNumber) {
+    return request({
+        url: '/api/equipment/share/sms/code',
+        method: 'get',
+        params: {
+            phonenumber: phoneNumber
+        }
+    });
+
+    // return new Promise((resolve,reject)=>{
+    //     resolve({
+    //         code:200
+    //     });
+    // });
+}
+
+function getUsrs(){
+     return request({
+        url: '/WebApp/user/list',
+        method: 'get',
+        params: {
+           pageNum:1,
+           pageSize:9999
+        }
+    });
+    
+}
+
+export default {
+    powerSet: powerSet,
+    DelShare: DelShare,
+    SaveShare: SaveShare,
+    searchShare: searchShare,
+sendSms:sendSms,
+getUsrs:getUsrs
+}

src/api/equipmentManagement/devicegroup/index.ts

@@ -1,6 +1,4 @@
-import { func } from 'vue-types';
 import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
 
 //左侧节点的数据源
 function getTreeData(para: any) {

src/utils/common.ts

@@ -1,6 +1,6 @@
 function DateFormat(date, format) {
   if (!date) {
-    date = new Date();
+    return '';
   }
   if (!format) {
     format = 'yyyy-MM-dd HH:mm:ss';
@@ -40,7 +40,38 @@ function DateFormat(date, format) {
   });
 }
 
+function DateAdd(datePart, number, date) {
+    // 创建日期的副本，避免修改原日期对象
+    const newDate = new Date(date.getTime());
+    
+    // 根据不同的时间单位添加相应的值
+    switch (datePart.toLowerCase()) {
+        case 'year':
+            newDate.setFullYear(newDate.getFullYear() + number);
+            break;
+        case 'month':
+            newDate.setMonth(newDate.getMonth() + number);
+            break;
+        case 'day':
+            newDate.setDate(newDate.getDate() + number);
+            break;
+        case 'hour':
+            newDate.setHours(newDate.getHours() + number);
+            break;
+        case 'minute':
+            newDate.setMinutes(newDate.getMinutes() + number);
+            break;
+        case 'second':
+            newDate.setSeconds(newDate.getSeconds() + number);
+            break;
+        default:
+            throw new Error('不支持的datePart参数。支持的参数: Year, Month, Day, Hour, Minute, Second');
+    }
+    
+    return newDate;
+}
 
 export default{
-DateFormat:DateFormat
+DateFormat:DateFormat,
+DateAdd:DateAdd
 }

src/views/equipmentManagement/devices/Charge.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="content">
+    <div class="topFilter">
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="操作时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            :size="'default'"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="数据来源" align="center" prop="dataSource" />
+        <el-table-column label="内容" align="center" prop="content" />
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+var filter = ref({
+  Date: []
+});
+var Status = ref({
+  loading: false
+});
+
+var data = ref({});
+var grid = ref(null);
+var List = ref([]);
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+function getRecordList() {
+  Status.value.loading = true;
+
+
+  setTimeout(() => {
+    initData(props.data,true);
+  }, 0);
+}
+
+var deviceid = null;
+function initData(item,Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+      Status.value.loading = false;
+    return;
+  }
+    List.value = [];
+  deviceid = item.data.deviceId;
+  
+  let params = {
+    startTime: '',
+    endTime: '',
+    deviceId:deviceid,
+    pageNum:pagin.value.pageIndex,
+    pageSize:pagin.value.pageSize,
+    orderByColumn:"updatedAt",
+    isAsc:"descending"
+  };
+  if (filter.value.Date && filter.value.Date.length) {
+    params.startTime = filter.value.Date[0];
+    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
+  }
+
+  request({
+    url: '/equipment/chargeDischarge/list' ,
+    method: 'get',
+    params: params
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+         pagin.value.total= res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.value.loading = false;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+
+   
+    if (newVal === 3) {
+      // 确保参数有效
+      debugger;
+       console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+</style>

src/views/equipmentManagement/devices/OpraRecored.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="content">
+    <div class="topFilter">
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="操作时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            :size="'default'"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="数据来源" align="center" prop="dataSource" />
+        <el-table-column label="内容" align="center" prop="content" />
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+var filter = ref({
+  Date: []
+});
+var Status = ref({
+  loading: false
+});
+
+var data = ref({});
+var grid = ref(null);
+var List = ref([]);
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+function getRecordList() {
+  Status.value.loading = true;
+
+
+  setTimeout(() => {
+    initData(props.data,true);
+  }, 0);
+}
+
+var deviceid = null;
+function initData(item,Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+      Status.value.loading = false;
+    return;
+  }
+    List.value = [];
+  deviceid = item.data.deviceId;
+
+ 
+  let params = {
+    startTime: '',
+    endTime: '',
+    pageNum:pagin.value.pageIndex,
+    pageSize:pagin.value.pageSize,
+    orderByColumn:"updateTime",
+    isAsc:"descending"
+  };
+  if (filter.value.Date && filter.value.Date.length) {
+    params.startTime = filter.value.Date[0];
+    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
+  }
+
+  request({
+    url: '/api/device/getOperationRecord/' + item.data.deviceId,
+    method: 'get',
+    params: params
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+
+        pagin.value.total= res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.value.loading = false;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+
+   
+    if (newVal === 3) {
+      // 确保参数有效
+      debugger;
+       console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+</style>

src/views/equipmentManagement/devices/Usr.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="content">
+    <div class="row">
+      <div class="item">
+        <div class="lable">姓名<span>：</span></div>
+        <div class="val">{{ lastData?.name }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">单位名称<span>：</span></div>
+        <div class="val">{{ lastData?.position }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">职务<span>：</span></div>
+        <div class="val">{{ lastData?.unitName }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">ID号<span>：</span></div>
+        <div class="val">{{ lastData?.code }}</div>
+      </div>
+      <div class="clear"></div>
+    </div>
+    <div class="clear divider"></div>
+    <div class="listTitle">信息登记记录</div>
+    <div class="list">
+      <div class="item" v-for="(item, index) in detailData">
+        <div class="time">
+          <el-icon><Timer /></el-icon>{{ item.item }}
+        </div>
+        <div class="childContent">
+          <div class="itemChild" :class="i === item.child.length - 1 ? '' : 'marginBottom'" v-for="(c, i) in item.child">
+            <div class="itemRow">登记时间：{{ c.createTime }}</div>
+            <div class="itemRow">姓&nbsp;&nbsp;&nbsp;&nbsp;名：{{ c.name }}</div>
+            <div class="itemRow">单位名称：{{ c.position }}</div>
+            <div class="itemRow">职&nbsp;&nbsp;&nbsp;&nbsp;务：{{ c.unitName }}</div>
+            <div class="itemRow">ID&nbsp;&nbsp;&nbsp;&nbsp;号：{{ c.code }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+
+var detailData = ref([]);
+var data = ref({});
+var deviceid = null;
+var lastData = ref({ name: '', position: '', unitName: '', code: '' });
+function processDataByDateGroup(originalData) {
+  // 1. 深拷贝原始数据（避免修改原数据，保护源数据完整性）
+  const data = JSON.parse(JSON.stringify(originalData));
+
+  // 边界处理：若data不存在或非数组，返回原结构+空sipledate
+  if (!data?.data || !Array.isArray(data.data)) {
+    return {
+      code: data?.code ?? 400, // 若原code不存在，默认400（请求错误）
+      msg: data?.msg ?? '数据格式错误',
+      sipledate: []
+    };
+  }
+
+  // 2. 先按createTime逆序排序（子数据内部也保持“新->旧”顺序）
+  const sortedData = data.data.sort((a, b) => {
+    const timeA = new Date(a.createTime);
+    const timeB = new Date(b.createTime);
+    return timeB - timeA; // 逆序：后创建的排在前面
+  });
+
+  // 3. 按日期分组（key：yyyy-MM-dd，value：该日期下的所有子数据）
+  const dateGroupMap = sortedData.reduce((map, item) => {
+    // 提取当前数据的“yyyy-MM-dd”格式日期
+    const dateKey = item.createTime.slice(0, 10);
+    // 若当前日期未在map中，初始化空数组；若已存在，直接push子数据
+    if (!map.has(dateKey)) {
+      map.set(dateKey, []);
+    }
+    map.get(dateKey).push(item);
+    return map;
+  }, new Map()); // 使用Map而非Object，确保日期顺序与排序后一致
+
+  // 4. 转换为需求格式的sipledate数组（每个元素含item和child）
+  const sipledate = Array.from(dateGroupMap.entries()).map(([date, childData]) => ({
+    item: date, // 日期标识（yyyy-MM-dd），原需求“item1/item2”统一为“item”（更语义化）
+    child: childData // 该日期下的所有子数据（已按时间逆序）
+  }));
+
+  // 5. 返回最终格式结果
+  return {
+    code: data.code,
+    msg: data.msg,
+    sipledate: sipledate
+  };
+}
+
+function initData(item) {
+  if (deviceid == item.data.deviceId) {
+    return;
+  }
+  deviceid = item.data.deviceId;
+  request({
+    url: '/api/device/getDeviceUser/' + item.data.deviceId,
+    method: 'get'
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.data) {
+          if (res.data.length) {
+            lastData.value = res.data[0];
+            let data = processDataByDateGroup(res);
+            detailData.value = data.sipledate;
+          }
+        }
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+    if (newVal === 2 && props.data) {
+      // 确保参数有效
+      initData(props.data); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+.row {
+  width: 50%;
+}
+.row .item {
+  width: 50%;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+
+  color: rgba(56, 64, 79, 1);
+
+font-family: Microsoft YaHei;
+font-size: 14px;
+font-weight: 400;
+line-height: 18px;
+letter-spacing: 0px;
+text-align: left;
+}
+
+.row .item .lable {
+  width: 100px;
+  text-align: right;
+}
+
+.divider {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
+
+.listTitle {
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 700;
+  height: 56px;
+  line-height: 56px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.list {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100% - 130px);
+  padding: 15px 12px;
+  overflow-y: scroll;
+}
+
+.list .time {
+  color: #027cfb;
+
+  font-family: Microsoft YaHei;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  height: 21px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+
+.list .itemRow{
+  color: rgba(56, 64, 79, 1);
+
+font-family: Microsoft YaHei;
+font-size: 14px;
+font-weight: 400;
+line-height: 18px;
+letter-spacing: 0px;
+text-align: left;
+margin-bottom: 13px;
+}
+.itemChild.marginBottom {
+  margin-bottom: 12px;
+}
+.list .childContent {
+  width: 100%;
+  height: auto;
+  border-left: 1px solid rgba(0, 198, 250, 0.2);
+  box-sizing: border-box;
+  padding: 6px 20px;
+}
+
+.list .itemChild {
+  border-radius: 4px;
+  background: rgba(247, 248, 252, 1);
+  width: 100%;
+  height: auto;
+}
+
+.fleft {
+  float: left;
+}
+.fright {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+</style>

src/views/equipmentManagement/devices/WarnRecord.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="content">
+    <div class="topFilter">
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="操作时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            :size="'default'"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
+        <el-table-column prop="deviceAction" label="报警事项" align="center">
+          <template #default="scope">
+            <div>{{ dic.warType[scope.row.deviceAction] }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="报警开始时间" align="center" prop="startTime" />
+        <el-table-column label="报警结束时间" align="center" prop="finishTime" />
+        <el-table-column label="报警持续时间" align="center" prop="durationTime" />
+        <el-table-column label="处理状态" align="center" prop="treatmentState">
+          <template #default="scope">
+            <div>{{ dic.treamt[scope.row.deviceAction] ? dic.treamt[scope.row.deviceAction] :'未处理' }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+
+var dic = {
+  warType: {
+    0: '强制报警',
+    1: '撞击闯入',
+    2: '手动报警',
+    3: '电子围栏告警',
+    4: '强制告警'
+  },
+  treamt:{
+    0:"已处理",
+    1:"未处理"
+  }
+};
+
+var filter = ref({
+  Date: []
+});
+var Status = ref({
+  loading: false
+});
+
+var data = ref({});
+var grid = ref(null);
+var List = ref([]);
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+function getRecordList() {
+  Status.value.loading = true;
+
+  setTimeout(() => {
+    initData(props.data, true);
+  }, 0);
+}
+
+var deviceid = null;
+function initData(item, Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+    Status.value.loading = false;
+    return;
+  }
+  List.value = [];
+  deviceid = item.data.deviceId;
+  let params = {
+    startTime: '',
+    endTime: '',
+    pageNum:pagin.value.pageIndex,
+    pageSize:pagin.value.pageSize,
+    orderByColumn:"updateTime",
+    isAsc:"descending"
+  };
+  if (filter.value.Date && filter.value.Date.length) {
+    params.startTime = filter.value.Date[0];
+    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
+  }
+
+  request({
+    url: '/api/device/getAlarmRecord/' + item.data.deviceId,
+    method: 'get',
+    params: params
+  })
+    .then((res) => {
+      debugger;
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+         pagin.value.total= res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.value.loading = false;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+    if (newVal === 4) {
+      // 确保参数有效
+
+      console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+</style>

src/views/equipmentManagement/devices/eqDetail.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="content">
+    <div class="leftImg fleft">
+      <img class="img" :src="detailData?.devicePic" />
+    </div>
+    <div class="detail fleft">
+
+      <div class="row">
+
+        <div class="item">
+          <div class="lable">设备名称<span>：</span></div>
+          <div class="val">{{ detailData?.deviceName }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">设备IMEI<span>：</span></div>
+          <div class="val">{{ detailData?.deviceImei }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">设备MAC<span>：</span></div>
+          <div class="val">{{ detailData?.deviceMac }}</div>
+        </div>
+       
+
+        
+        <div class="item">
+          <div class="lable">通讯方式<span>：</span></div>
+          <div class="val">{{ detailData?.communicationMode===1 ?'蓝牙':'4G' }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">蓝牙名称<span>：</span></div>
+          <div class="val">{{ detailData?.bluetoothName }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">设备类型<span>：</span></div>
+          <div class="val">{{ detailData?.typeName }}</div>
+        </div>
+
+
+          <div class="item">
+          <div class="lable">使用人员<span>：</span></div>
+          <div class="val">{{ detailData?.personnelBy }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">设备状态<span>：</span></div>
+          <div class="val">{{ detailData?.deviceStatus===1 ?'正常':'失效' }}</div>
+        </div>
+        <div class="item">
+          <div class="lable">绑定时间<span>：</span></div>
+          <div class="val">{{ detailData?.bindingTime }}</div>
+        </div>
+
+
+         <div class="item">
+          <div class="lable">在线状态<span>：</span></div>
+          <div class="val">{{ detailData?.onlineStatus===1?'在线':'离线' }}</div>
+        </div>
+         <div class="item">
+          <div class="lable">电量<span>：</span></div>
+          <div class="val">{{ detailData?.battery }}%</div>
+        </div>
+         <div class="item">
+          <div class="lable">告警状态<span>：</span></div>
+          <div class="val">{{ detailData?.alarmStatus=='1'?'告警':'未告警' }}</div>
+        </div>
+
+
+          <div class="item">
+          <div class="lable">经度<span>：</span></div>
+          <div class="val">{{ detailData?.latitude }}</div>
+        </div>
+          <div class="item">
+          <div class="lable">纬度<span>：</span></div>
+          <div class="val">{{ detailData?.longitude }}</div>
+        </div>
+          <div class="item">
+          <div class="lable">分享用户数量<span>：</span></div>
+          <div class="val">{{ detailData?.shareUsersNumber }}</div>
+        </div>
+
+      </div>
+    </div>
+    <div class="clear"></div>
+   
+  </div>
+</template>
+<script setup lang="ts">
+import request from "@/utils/request";
+import { number } from "vue-types";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex:{
+    type:Number,
+    required: true
+  }
+
+})
+var data=ref({});
+var detailData = ref({});
+var deviceid=null;
+function initData(item) {
+  if(deviceid==item.data.deviceId){
+    return;
+  }
+deviceid=item.data.deviceId
+
+  detailData.value={};
+  request({
+    url: "/api/device/pc/detail/" + item.data.deviceId,
+    method: 'get'
+  }).then(res => {
+    if (res.code == 200) {
+      if (res.data) {
+        detailData.value = res.data;
+      }
+    }
+  }).finally(() => {
+    data.value=item.data;
+  });
+
+
+}
+
+watch(
+  () => props.acIndex,  // 监听的属性
+  (newVal) => {       
+    if (newVal===1 && props.data) {  // 确保参数有效
+      initData(props.data)  // 调用回调
+    }
+  },
+  { immediate: true }  // 关键：组件初始化时立即执行一次
+)
+
+
+
+
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+
+}
+
+.leftImg {
+  width: 18%;
+  text-align: center;
+}
+
+.leftImg .img {
+  width: 200px;
+  height: 200px;
+  object-fit: scale-down;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px 0px rgba(0, 27, 74, 0.15);
+  background: rgba(247, 248, 252, 1);
+}
+
+.detail {
+  width: 82%;
+
+}
+
+.detail .row {
+  width: 100%;
+  height: 100%;
+
+}
+
+.detail .row .item {
+  width: calc(100% / 3);
+  margin-bottom: 20px;
+  height: 20px;
+  line-height: 20px;
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+
+  letter-spacing: 0px;
+  text-align: left;
+  float: left;
+}
+
+.detail .row .lable {
+  width: 100px;
+  text-align: right;
+  float: left;
+}
+
+.detail .row .val {
+  float: left;
+}
+
+.fleft {
+  float: left;
+}
+
+.fright {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+</style>

src/views/equipmentManagement/devices/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="p-2">
+    <div :class="Status.Mode == PageMode.device ? '' : 'displayNone'">
+
+
       <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
         :leave-active-class="proxy?.animate.searchAnimate.leave">
         <div v-show="showSearch" class="mb-[10px]">
@@ -82,7 +85,8 @@
             <template #default="scope">
               <el-popover placement="right" trigger="click">
                 <template #reference>
-                <img :src="scope.row.devicePic" style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
+                  <img :src="scope.row.devicePic"
+                    style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
                     class="hover:opacity-80 transition-opacity" />
                 </template>
                 <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
@@ -113,6 +117,8 @@
 
           <el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
             <template #default="scope">
+             
+
               <el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
                 <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
               </el-tooltip>
@@ -132,13 +138,70 @@
               <el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
                 <el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
               </el-tooltip>
+               <el-tooltip content="详情" placement="top">
+                <el-button link type="primary" icon="More" @click="handleDetail(scope.row)"></el-button>
+              </el-tooltip>
             </template>
           </el-table-column>
         </el-table>
         <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
           :total="total" @pagination="getList" />
       </el-card>
+    </div>
 
+    <div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'"  class="detailMain">
+      <div class="tabContent">
+        <div class="tabHeader">
+          <div class="indexContent">
+
+
+            <div class="tabIndex" :class="Status.tabActive == 1 ? 'active' : ''" @click="tabIndexChange(1)">
+              设备信息
+            </div>
+            <div class="tabIndex" :class="Status.tabActive == 2 ? 'active' : ''" @click="tabIndexChange(2)">
+              用户信息
+            </div>
+            <div class="tabIndex" :class="Status.tabActive == 3 ? 'active' : ''" @click="tabIndexChange(3)">
+              操作记录
+            </div>
+            <div class="tabIndex" :class="Status.tabActive == 4 ? 'active' : ''" @click="tabIndexChange(4)">
+              报警记录
+            </div>
+            <div class="tabIndex" :class="Status.tabActive == 5 ? 'active' : ''" @click="tabIndexChange(5)">
+              分享管理
+            </div>
+            <div class="tabIndex" :class="Status.tabActive == 6 ? 'active' : ''" @click="tabIndexChange(6)">
+              充放电
+            </div>
+          </div>
+          <div class="tabClose">
+            <el-icon @click="closeDetail()" :size="20" :color="'#7787a4'">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+
+
+        <div class="tabItem" v-show="Status.tabActive == 1">
+          <eqDetail :data="detailData" :acIndex="Status.tabActive"  data-name="eqDetail"></eqDetail>
+        </div>
+        <div class="tabItem" v-show="Status.tabActive == 2">
+          <Usr :data="detailData" :acIndex="Status.tabActive"  data-name="Usr"></Usr>
+        </div>
+        <div class="tabItem" v-show="Status.tabActive == 3">
+          <OpraRecored :data="detailData" :acIndex="Status.tabActive"  data-name="OpraRecored"></OpraRecored>
+        </div>
+        <div class="tabItem" v-show="Status.tabActive == 4">
+          <WarnRecord :data="detailData" :acIndex="Status.tabActive"  data-name="WarnRecord"></WarnRecord>
+        </div>
+        <div class="tabItem" v-show="Status.tabActive == 5">
+          <shareManage :data="detailData" :acIndex="Status.tabActive"  data-name="shareManage"></shareManage>
+        </div>
+        <div class="tabItem" v-show="Status.tabActive == 6">
+          <Charge :data="detailData" :acIndex="Status.tabActive"  data-name="Charge"></Charge>
+        </div>
+      </div>
+    </div>
 
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
@@ -299,6 +362,14 @@ const deviceDist = ref<deviceVO[]>();
 import { to } from 'await-to-js';
 import request from "@/utils/request";
 import { getBearerToken } from '@/utils/auth'
+
+import eqDetail from './eqDetail.vue';
+import Usr from './Usr.vue';
+import OpraRecored from './OpraRecored.vue';
+import WarnRecord from './WarnRecord.vue';
+import shareManage from './shareManage.vue';
+import Charge from './Charge.vue';
+
 const loading = ref(true);
 const showSearch = ref(true);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
@@ -329,6 +400,42 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+
+//页面类型
+enum PageMode {
+  device = 'device',//设备
+  detail = 'detail'//详情
+
+}
+
+//页面状态控制
+var Status = reactive({
+  Mode: PageMode.device,
+  tabActive: 0
+});
+//传给详情的数据
+var detailData = ref(null);
+
+//加载详情
+function handleDetail(item) {
+  Status.tabActive = 1;
+  detailData.value = { data: item };
+  Status.Mode = PageMode.detail;
+}
+//关闭详情
+function closeDetail() {
+  Status.Mode = PageMode.device;
+    Status.tabActive = -1;
+}
+
+function tabIndexChange(index) {
+  if (Status.tabActive == index) {
+    return;
+  }
+  Status.tabActive = index;
+}
+
+//
 const initFormData: deviceForm = {
   deviceName: '',
   deviceMac: '',
@@ -870,4 +977,90 @@ onMounted(() => {
   height: 100px !important;
   object-fit: cover;
 }
+
+
+.displayNone {
+  display: none !important;
+}
+
+.detailMain {
+  width: 100%;
+  height: calc(100vh - 115px);
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 13px;
+}
+
+.detailMain .tabContent {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  
+
+}
+
+.detailMain .tabHeader {
+  width: 100%;
+  height: 36px;
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid rgba(235, 238, 248, 1);
+  box-sizing: border-box;
+
+}
+
+.detailMain .tabHeader .indexContent {
+  height: 100%;
+  width: calc(100% - 20px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.detailMain .tabHeader .tabIndex {
+  color: rgba(56, 64, 79, 1);
+  font-family: Microsoft YaHei;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  text-align: left;
+  padding: 0px 30px;
+  position: relative;
+  height: 36px;
+  line-height: 36px;
+  cursor: pointer;
+}
+
+.detailMain .tabHeader .tabIndex.active {
+  color: rgba(2, 124, 251, 1);
+  font-weight: 700;
+  border-bottom: 2px solid rgba(2, 124, 251, 1);
+}
+
+
+.detailMain .tabHeader .tabClose {
+  width: 20px;
+  cursor: pointer;
+}
+
+.detailMain .tabItem {
+  height:calc(100% - 36px);
+  width: 100%;
+}
+
+.p-2 {
+  background: rgba(247, 248, 252, 1);
+  min-height: calc(100vh - 85px) !important;
+}
 </style>

src/views/equipmentManagement/devices/shareManage.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="content" v-loading="Status.fullLoading">
+    <div class="topFilter">
+      <div>
+        <el-button type="primary" @click="ShowEdit"
+          ><el-icon> <Plus /> </el-icon>添加分享</el-button
+        >
+        <el-button type="danger" @click="DelShare(null, true)" :disabled="selectRows.length===0">批量删除</el-button>
+      </div>
+
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="">
+          <el-input v-model="filter.phonenumber" placeholder="查找分享用户" />
+        </el-form-item>
+        <el-form-item label="分享时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="datetimerange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD HH:mm:ss"
+            date-format="YYYY/MM/DD ddd"
+            time-format="A hh:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)" @selection-change="RowSelectionChange">
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="分享用户" align="center" prop="phonenumber" />
+        <el-table-column label="分享权限" align="center" prop="permission">
+          <template #default="scope">
+            <div>{{ getPower(scope.row) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="分享时间" align="center" prop="createTime" />
+        <el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width opt">
+          <template #default="scope">
+            <div class="center">
+              <el-text class="mx-1 marginRight10" type="primary" @click.stop="powerSet(scope.row)">权限管理</el-text>
+
+              <el-text class="mx-1" type="danger" @click.stop="DelShare(scope.row, false)">移除</el-text>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+
+    <!-- 修改权限弹窗 -->
+    <el-dialog v-model="Status.ShowPowerSet" :title="'权限管理'" width="800" :draggable="true">
+      <div class="form">
+        <el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px">
+          <el-form-item label="分享权限" label-position="right">
+            <el-checkbox-group v-model="cEdit.permission">
+              <el-checkbox :label="item.label" v-for="item in power" :value="item.value" />
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="验证码" label-position="right">
+            <el-input v-model="cEdit.smsCode" placeholder="验证码">
+              <template #append
+                ><div class="btnSendSms" @click.stop="sendSms">{{ time > 0 ? time + '秒后重发' : '发送验证码' }}</div></template
+              >
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="center" style="margin-top: 10px">
+        <el-button type="primary" @click="SaveFormData('update')"> 确定 </el-button>
+        <el-button @click="CloseEdit"> 取消 </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 编辑框 -->
+    <el-dialog v-model="Status.ShowEditPop" :data-val="Status.ShowEditPop" :title="'添加分享'" width="800" :draggable="true">
+      <div class="form">
+        <el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px" :label-width="'75px'">
+          <el-form-item label="分享用户" label-position="right">
+            <el-select v-model="cEdit.phonenumber" filterable placeholder="输入以搜索">
+              <el-option v-for="item in Usrs" :key="item.phonenumber" :label="item.userName" :value="item.phonenumber" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="分享权限" label-position="right">
+            <el-checkbox-group v-model="cEdit.permission">
+              <el-checkbox :label="item.label" v-for="item in power" :value="item.value" />
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="验证码" label-position="right">
+            <el-input v-model="cEdit.smsCode" placeholder="验证码">
+              <template #append
+                ><div class="btnSendSms" @click.stop="sendSms">{{ time > 0 ? time + '秒后重发' : '发送验证码' }}</div></template
+              >
+            </el-input>
+          </el-form-item>
+          <el-form-item label="备注" label-position="right">
+            <el-input v-model="cEdit.remark" placeholder="请输入备注" type="textarea" show-word-limit :rows="5" maxlength="50" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="center" style="margin-top: 10px">
+        <el-button type="primary" @click="SaveFormData('add')"> 确定 </el-button>
+        <el-button @click="CloseEdit()"> 取消 </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 提示框 -->
+    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
+      <span>
+        {{ Status.confirm.text }}
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
+          <el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+import common from '@/utils/common';
+import api from '@/api/equipmentManagement/device/shareManage';
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+
+var filter = ref({
+  Date: [],
+  phonenumber: ''
+});
+
+var Status = reactive({
+  loading: false,
+  fullLoading: false,
+  confirm: {
+    //弹出框的配置
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: true
+  },
+  ShowEditPop: false, //是否显示编辑弹窗
+  ShowPowerSet: false //是否显示权限管理
+});
+
+var deviceid = null;
+
+var data = ref({});
+
+var grid = ref(null);
+//主数据
+var List = ref([]);
+
+//所有用户
+var Usrs = ref([]);
+
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+
+//当前正在编辑的数据
+var cEdit = reactive({
+  phonenumber: '',
+  permission: [],
+  remark: '',
+  smsCode: ''
+});
+
+//权限字典
+var dic = reactive({
+  '1': '灯光模式',
+  '2': '激光模式',
+  '3': '开机画面',
+  '4': '人员信息登记',
+  '5': '发送信息',
+  '6': '产品信息'
+});
+
+var power = computed(() => {
+  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();
+}
+//关闭编辑
+function CloseEdit() {
+  Status.ShowEditPop = false;
+  Status.ShowPowerSet = false;
+}
+
+//添加分享
+
+//保存分享数据
+function SaveFormData(type) {
+  let data = {
+    'deviceId': deviceid,
+    'phonenumber': cEdit.phonenumber,
+    'permission': cEdit.permission.join(','),
+    'shareUser': '',
+    'remark': cEdit.remark,
+    'smsCode': cEdit.smsCode
+  };
+
+  Status.fullLoading = true;
+  api
+    .SaveShare(data, type)
+    .then((res) => {
+      if (res.code == 200) {
+        getRecordList();
+        CloseEdit();
+      }
+      alert(res.msg);
+    })
+    .catch((ex) => {
+      console.log('出现异常', ex);
+    })
+    .finally(() => {
+      Status.fullLoading = false;
+      cEdit.phonenumber = '';
+      cEdit.permission = [];
+      cEdit.remark = '';
+      cEdit.smsCode = '';
+    });
+}
+
+function getPower(item) {
+  let str = [];
+  if (item && item.permission) {
+    let arr = item.permission.split(',');
+
+    arr.forEach((k) => {
+      str.push(dic[k]);
+    });
+  }
+
+  return str.join(',');
+}
+//批量删除
+
+var selectRows = computed(() => {
+   let arr = getSelectionRows(grid);
+   return arr;
+});
+
+function DelShare(item, isBatch) {
+  let arr = [];
+  if (isBatch) {
+    arr = getSelectionRows(grid);
+  } else {
+    arr = [item];
+  }
+  if(arr.length===0){
+    alert("请选择需要删除的数据");
+    return;
+  }
+  debugger;
+  let OkDel = () => {
+    hideConfirm();
+    Status.fullLoading = true;
+    setTimeout(() => {
+      let ids = arr
+        .map((v) => {
+          return v.id;
+        })
+        .join(',');
+      api
+        .DelShare(ids)
+        .then((res) => {
+          if (res.code == 200) {
+            getRecordList();
+          }
+          hideConfirm();
+          alert(res.msg);
+        })
+        .catch((ex) => {
+          console.log('ex=', ex);
+        })
+        .finally(() => {
+          Status.fullLoading = false;
+        });
+    }, 0);
+  };
+  confirm('您确认删除选择的' + arr.length + '条数据吗?', OkDel, hideConfirm, '提示');
+}
+
+let timeOut = null;
+let time = ref(0);
+let timeIntval = null;
+function sendSms() {
+  if (time.value > 0) {
+    return;
+  }
+  if (timeIntval) {
+    return;
+  }
+  clearTimeout(timeOut);
+  timeOut = setTimeout(() => {
+    api
+      .sendSms(cEdit.phonenumber)
+      .then((res) => {
+        if (res.code == 200) {
+          console.log('res=', res);
+          time.value = 60;
+          timeIntval = setInterval(() => {
+            time.value = time.value - 1;
+            if (time.value == 0) {
+              clearInterval(timeIntval);
+              timeIntval = null;
+            }
+          }, 1000);
+        }
+      })
+      .catch((ex) => {
+        console.log('ex=', ex);
+      })
+      .finally(() => {});
+  }, 500);
+}
+//权限设置
+function powerSet(item) {
+  debugger;
+  Status.ShowPowerSet = true;
+  cEdit.permission = item.permission.split(',');
+  cEdit.phonenumber = item.phonenumber;
+  cEdit.remark = item.remark;
+  cEdit.smsCode = '123456';
+}
+
+function getUsrs() {
+  if (Usrs.value && Usrs.value.length > 0) {
+    return;
+  }
+  api.getUsrs().then((res) => {
+    if (res.code == 200) {
+      Usrs.value = res.rows;
+    }
+  });
+}
+
+function RowSelectionChange(row) {}
+var getSelectionRows = (gridInstance) => {
+  if (gridInstance.value) {
+    // 检查ref是否已正确引用组件实例
+    var selectedRows = gridInstance.value.getSelectionRows(); // 获取选中行数据数组
+    return selectedRows;
+  }
+  return [];
+};
+
+function getRecordList() {
+  Status.loading = true;
+
+  setTimeout(() => {
+    initData(props.data, true);
+  }, 0);
+}
+
+function initData(item, Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+    Status.loading = false;
+    return;
+  }
+  debugger;
+  List.value = [];
+
+  deviceid = item.data.deviceId;
+  let params = {
+    deviceId: item.data.deviceId,
+    shareStartTime: '',
+    shareEndTime: '',
+    phonenumber: filter.value.phonenumber,
+    pageSize: pagin.value.pageSize,
+    pageNum: pagin.value.pageIndex,
+    orderByColumn: 'createTime',
+    isAsc: 'descending'
+  };
+
+  if (filter.value.Date && filter.value.Date.length) {
+    params.shareStartTime = common.DateFormat(filter.value.Date[0], null);
+    params.shareEndTime = common.DateFormat(filter.value.Date.length > 1 ? filter.value.Date[1] : '', null);
+  }
+
+  api
+    .searchShare(params)
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+        pagin.value.total = res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.loading = false;
+    });
+}
+
+window.confirm = function (text, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
+      }
+    }
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.alert = function (text, OK, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '不符合规则',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: false,
+    cancelCallback: null
+  };
+
+  Status.confirm = Cfg;
+};
+
+var hideConfirm = function () {
+  let Cfg = {
+    Visible: false,
+    title: '提示',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: false
+  };
+
+  Status.confirm = Cfg;
+};
+window.hideConfirm = hideConfirm;
+window.hideAlert = hideConfirm;
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+    if (newVal === 5) {
+      // 确保参数有效
+
+      console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+
+.marginRight10 {
+  margin-right: 10px;
+}
+.mx-1 {
+  cursor: pointer;
+}
+
+.btnSendSms {
+  background-color: #409eff;
+  color: #ffffff;
+  padding: 0px 20px;
+  cursor: pointer;
+}
+
+:deep .el-overlay .el-input-group__append {
+  padding: 0px !important;
+}
+</style>