Merge branch 'sqy_dev' into 'main'

feat:地理位置完成，首页条件判断完成，接口待调试，设备修改字段。

See merge request huang/yun-teng-iot-front!64

@@ -30,3 +30,14 @@ export const getDeviceDataKeys = (id: string) => {
     }
   );
 };
+// 获取设备状态，在线 or 离线时间
+export const getDeviceActiveTime = (entityId: string) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

+import { defHttp } from '/@/utils/http/axios';
+enum HomeEnum {
+  home = '/homepage/left/top',
+}
+
+export const getHomeData = () => {
+  return defHttp.get({
+    url: HomeEnum.home,
+  });
+};

 export enum RoleEnum {
   ROLE_SYS_ADMIN = 'SYS_ADMIN',
   ROLE_TENANT_ADMIN = 'TENANT_ADMIN',
-  ROLE_NORMAL_USER = 'CUSTOMER_USER',
   ROLE_PLATFORM_ADMIN = 'PLATFORM_ADMIN',
+  ROLE_NORMAL_USER = 'CUSTOMER_USER',
 }

@@ -51,7 +51,6 @@
           severity: alarmLevel(data.severity),
           status: statusType(data.status),
         });
-        console.log(data.status);
         alarmStatus.value = data.status;
         alarmId.value = data.id;
       });

@@ -34,8 +34,16 @@
       :canFullscreen="false"
     >
       <BasicForm @register="registerForm" />
-      <div ref="chartRef" :style="{ height: '600px', width }"></div>
+      <Alert
+        v-if="!isNull"
+        message="当前时间节点暂无历史数据"
+        description="请尝试选择其他时间段查询历史数据"
+        type="warning"
+        show-icon
+      />
+      <div v-show="isNull" ref="chartRef" :style="{ height: '600px', width }"></div>
     </BasicModal>
+    <DeviceDetailDrawer @register="registerDetailDrawer" />
   </div>
 </template>
 <script lang="ts">
@@ -44,22 +52,30 @@
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Alert } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal, BasicModal } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { schemas } from './config.data';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { getDeviceHistoryInfo, getDeviceDataKeys } from '/@/api/alarm/position';
+  import {
+    getDeviceHistoryInfo,
+    getDeviceDataKeys,
+    getDeviceActiveTime,
+  } from '/@/api/alarm/position';
+  import { useDrawer } from '/@/components/Drawer';
+  import DeviceDetailDrawer from '/@/views/device/manage/cpns/modal/DeviceDetailDrawer.vue';
   import moment from 'moment';
   export default defineComponent({
     name: 'BaiduMap',
     components: {
       BasicTable,
       Tag,
+      Alert,
       BasicModal,
       BasicForm,
+      DeviceDetailDrawer,
     },
     props: {
       width: {
@@ -74,7 +90,10 @@
     setup() {
       const wrapRef = ref<HTMLDivElement | null>(null);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
-      const entityId = ref('');
+      const [registerDetailDrawer, { openDrawer }] = useDrawer();
+
+      let entityId = '';
+      let globalRecord: any = {};
       async function initMap() {
         await toPromise();
         await nextTick();
@@ -101,13 +120,14 @@
         },
       });
       // 点击表格某一行触发
-      const deviceRowClick = (record) => {
-        entityId.value = record.tbDeviceId;
+      const deviceRowClick = async (record) => {
+        entityId = record.tbDeviceId;
+        globalRecord = record;
         const BMap = (window as any).BMap;
         const wrapEl = unref(wrapRef);
         const map = new BMap.Map(wrapEl);
         if (record.deviceInfo.address) {
-          const { name, organizationDTO, updateTime, deviceState, deviceProfile } = record;
+          const { name, organizationDTO, deviceState, deviceProfile } = record;
           const { longitude, latitude, address } = record.deviceInfo;
           const point = new BMap.Point(longitude, latitude);
           let options = {
@@ -117,6 +137,10 @@
           map.centerAndZoom(point, 15);
           map.enableScrollWheelZoom(true);
           // 创建信息窗口对象
+          const res = await getDeviceActiveTime(entityId);
+
+          let { value: activeStatus, lastUpdateTs } = res[0];
+          lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
           let infoWindow = new BMap.InfoWindow(
             `
             <div style="display:flex;justify-content:space-between; margin:20px 0px;">
@@ -132,10 +156,9 @@
             <div>所属组织：${organizationDTO.name}</div>
             <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
             <div style="margin-top:6px;">设备位置：${address}</div>
-            <div style="margin-top:6px;">下线时间：${updateTime}</div>
-            <div style="display:flex;justify-content:space-between; margin-top:10px">
-              <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
-              <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">报警记录</button>
+            <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
+            <div style="display:flex;justify-content:end; margin-top:10px">
+              <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
               <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
             </div>
             `,
@@ -185,13 +208,20 @@
           endTs = Date.now();
           // 发送请求
           const res = await getDeviceHistoryInfo({
-            entityId: entityId.value,
+            entityId,
             keys: keys.join(),
             startTs,
             endTs,
             interval,
             agg,
           });
+          // 判断对象是否为空
+          if (Object.keys(res).length === 0) {
+            isNull.value = false;
+            return;
+          } else {
+            isNull.value = true;
+          }
           // 处理数据
           for (const key in res) {
             for (const item1 of res[key]) {
@@ -250,24 +280,38 @@
 
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
+      const isNull = ref(true);
+      // 设备信息
+      const openDeviceInfoDrawer = async () => {
+        const { id, tbDeviceId } = globalRecord;
+        openDrawer(true, {
+          id,
+          tbDeviceId,
+        });
+      };
       const openHistoryModal = async () => {
         openModal(true);
-
         // 收集参数
         const dataArray: any[] = [];
         const startTs = Date.now() - 86400000; //最近一天
         const endTs = Date.now();
         // 发送请求
-        keys = await getDeviceDataKeys(entityId.value);
+        keys = await getDeviceDataKeys(entityId);
         const res = await getDeviceHistoryInfo({
-          entityId: entityId.value,
+          entityId,
           keys: keys.join(),
           startTs,
           endTs,
           interval: 7200000, //间隔两小时
           agg: 'AVG',
         });
+        // 判断对象是否为空
+        if (Object.keys(res).length === 0) {
+          isNull.value = false;
+          return;
+        } else {
+          isNull.value = true;
+        }
         // 处理数据
         for (const key in res) {
           for (const item1 of res[key]) {
@@ -327,12 +371,14 @@
           agg: 'AVG',
         });
       };
+
       const cancelHistoryModal = () => {
         resetFields();
         setOptions({});
       };
       onMounted(() => {
         initMap();
+        (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
         (window as any).openHistoryModal = openHistoryModal;
       });
       return {
@@ -343,7 +389,9 @@
         registerModal,
         registerForm,
         chartRef,
+        isNull,
         cancelHistoryModal,
+        registerDetailDrawer,
       };
     },
   });

 <template>
-  <div class="md:flex justify-between">
-    <template v-for="(item, index) in growCardList" :key="item.title">
-      <div
-        class="growCardItem md:w-1/3 w-full !md:mt-0 !mt-4 bg-white"
-        :class="index === 0 ? '!md:ml-0' : '!md:ml-4'"
-      >
-        <div
-          class="
-            growCardItem-top
-            border border-solid border-t-0 border-r-0 border-l-0 border-b-1
-            dark:border-#ccc
-            light:border-#F2F2F5
-          "
-        >
-          <img :src="item.imgUrl" style="width: 5rem; height: 5rem" />
-          <div class="growCardItem-right">
-            <div class="flex justify-between ml-3">
-              <div style="font-size: 1.625rem; color: #333">{{ item.value }}</div>
-              <img src="../../../../assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+  <div class="md:flex">
+    <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4">
+      <div class="flex" style="height: 100px">
+        <div class="mr-4"
+          ><img src="/src/assets/images/device-count.png" style="width: 5rem; height: 5rem"
+        /></div>
+        <div class="flex-auto">
+          <div class="flex justify-between" style="align-items: center">
+            <div style="font-size: 1.625rem; color: #333">{{
+              growCardList?.deviceInfo?.sumCount
+            }}</div>
+            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+          </div>
+          <div> 设备数(个) </div>
+          <div class="flex mt-2">
+            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem"
+              ><img src="/src/assets/images/online.png" class="mr-1" />
+              <span>在线{{ growCardList?.deviceInfo?.onLine }}</span>
             </div>
-            <div class="ml-3">{{ item.title }}</div>
-            <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 15rem" v-if="item.offLine">
-              <div class="count">
-                <img
-                  src="../../../../assets/images/online.png"
-                  style="width: 0.6rem; height: 0.6rem"
-                  class="mr-1"
-                />
-                在线 {{ item.onLine }}
-              </div>
-              <div class="count">
-                <img
-                  src="../../../../assets/images/offline.png"
-                  style="width: 0.6rem; height: 0.6rem"
-                  class="mr-1"
-                />
-                离线 {{ item.offLine }}
-              </div>
-              <div class="count">
-                <img
-                  src="../../../../assets/images/inactive.png"
-                  style="width: 0.6rem; height: 0.6rem"
-                  class="mr-1"
-                />
-                未激活 {{ item.inactive }}
-              </div>
+            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem">
+              <img src="/src/assets/images/offline.png" class="mr-1" />
+              <span> 离线{{ growCardList?.deviceInfo?.offLine }} </span>
             </div>
+            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem">
+              <img src="/src/assets/images/inactive.png" class="mr-1" />
+              <span> 未激活{{ growCardList?.deviceInfo?.inActive }} </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.deviceInfo?.todayAdd }}</div
+      >
+    </Card>
+    <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4">
+      <div class="flex" style="height: 100px">
+        <div class="mr-4"
+          ><img
+            :src="
+              role === 'TENANT_ADMIN'
+                ? '/src/assets/images/alarm-count.png'
+                : '/src/assets/images/zh.png'
+            "
+            style="width: 5rem; height: 5rem"
+        /></div>
+        <div class="flex-auto">
+          <div class="flex justify-between" style="align-items: center">
+            <div style="font-size: 1.625rem; color: #333">{{
+              growCardList?.tenantInfo?.sumCount
+            }}</div>
+            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
           </div>
+          <div> {{ role === 'TENANT_ADMIN' ? '11月告警数（条）' : '租户总量(个)' }}</div>
         </div>
-        <div class="growCardItem-bottom"> 今日新增 {{ item.newDay }}</div>
       </div>
-    </template>
+      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.tenantInfo?.todayAdd }}</div
+      >
+    </Card>
+    <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4">
+      <div class="flex" style="height: 100px">
+        <div class="mr-4"
+          ><img
+            :src="
+              role === 'TENANT_ADMIN'
+                ? '/src/assets/images/msg-count.png'
+                : '/src/assets/images/kf.png'
+            "
+            style="width: 5rem; height: 5rem"
+        /></div>
+        <div class="flex-auto">
+          <div class="flex justify-between" style="align-items: center">
+            <div style="font-size: 1.625rem; color: #333">{{
+              growCardList?.customerInfo?.sumCount
+            }}</div>
+            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+          </div>
+          <div> {{ role === 'TENANT_ADMIN' ? '11月消息量（条）' : '客户总量(个)' }} </div>
+        </div>
+      </div>
+      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div
+      >
+    </Card>
   </div>
 </template>
 <script lang="ts" setup>
-  import { growCardList } from '../data';
-</script>
-
-<style scoped lang="less">
-  .growCardItem {
-    height: 11.187rem;
-    color: #666;
-    .growCardItem-top {
-      display: flex;
-      margin: 1.25rem;
-      padding-bottom: 0.625rem;
-      .growCardItem-right {
-        width: 18.75rem;
-        .count {
-          display: flex;
-          font-size: 0.75rem;
-          align-items: center;
-          margin-left: 0.5rem;
-        }
-      }
-    }
-    .growCardItem-bottom {
-      margin-left: 1.25rem;
-    }
+  import { defineProps, ref, onMounted } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { getHomeData } from '/@/api/dashboard';
+  interface CardList {
+    deviceInfo: {
+      sumCount: number;
+      onLine: number;
+      offLine: number;
+      inActive: number;
+      todayAdd: number;
+    };
+    tenantInfo: { sumCount: number; todayAdd: number };
+    customerInfo: { sumCount: number; todayAdd: number };
   }
-</style>
+  const growCardList = ref<CardList>();
+  onMounted(async () => {
+    const res = await getHomeData();
+    growCardList.value = res;
+    console.log(growCardList.value);
+  });
+  defineProps<{
+    role: string;
+  }>();
+</script>

 <template>
-  <Card title="帮助文档">
-    <div>
-      <template v-for="item in helpDoc" :key="item.title">
-        <AnchorLink v-bind="item" />
-      </template>
-    </div>
-    <Card
-      :tab-list="tabListTitle"
-      v-bind="$attrs"
-      :active-tab-key="activeKey"
-      :bordered="false"
-      @tabChange="onTabChange"
-      :bodyStyle="{ padding: 0 }"
-    >
-      <div v-if="activeKey === 'tab1'">
-        <List item-layout="horizontal" :dataSource="dataSource">
-          <template #renderItem="{ item }">
-            <ListItem>
-              <ListItemMeta>
-                <template #avatar>
-                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-                </template>
-                <template #description>
-                  <span
-                    @click="go('/stationnotification/mynotification')"
-                    class="cursor-pointer noticeTitle"
-                    >{{ item.sysNotice.title }}
-                  </span>
-                </template>
-                <template #title>
-                  <span>{{ item.user.realName }}</span>
+  <div>
+    <Card title="帮助文档" v-if="role === 'TENANT_ADMIN'">
+      <div>
+        <template v-for="item in helpDoc" :key="item.title">
+          <AnchorLink v-bind="item" />
+        </template>
+      </div>
+      <Card
+        v-if="role === 'TENANT_ADMIN'"
+        :tab-list="tabListTitle"
+        v-bind="$attrs"
+        :active-tab-key="activeKey"
+        :bordered="false"
+        @tabChange="onTabChange"
+        :bodyStyle="{ padding: 0 }"
+      >
+        <div v-if="activeKey === 'tab1'">
+          <List item-layout="horizontal" :dataSource="dataSource">
+            <template #renderItem="{ item }">
+              <ListItem>
+                <ListItemMeta>
+                  <template #avatar>
+                    <Avatar
+                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                    />
+                  </template>
+                  <template #description>
+                    <span
+                      class="cursor-pointer noticeTitle"
+                      @click="go('/stationnotification/mynotification')"
+                      >{{ item.sysNotice.title }}
+                    </span>
+                  </template>
+                  <template #title>
+                    <span>{{ item.user.realName }}</span>
+                  </template>
+                </ListItemMeta>
+                <template #extra>
+                  <Time :value="item.sysNotice.senderDate" />
                 </template>
-              </ListItemMeta>
-              <template #extra>
-                <Time :value="item.sysNotice.senderDate" />
-              </template>
-            </ListItem>
-          </template>
-        </List>
-        <Card hoverable title="联系我们" :bordered="false">
-          <template #cover>
-            <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
-          </template>
-          <CardMeta>
-            <template #description>
-              <p>联系人: {{ getContacts }}</p>
-              <p>联系电话: {{ getTel }}</p>
-              <p>联系地址: {{ getAddress }} </p>
+              </ListItem>
             </template>
-          </CardMeta>
-        </Card>
-      </div>
+          </List>
+          <Card hoverable title="联系我们" :bordered="false">
+            <template #cover>
+              <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
+            </template>
+            <CardMeta>
+              <template #description>
+                <p>联系人: {{ getContacts }}</p>
+                <p>联系电话: {{ getTel }}</p>
+                <p>联系地址: {{ getAddress }} </p>
+              </template>
+            </CardMeta>
+          </Card>
+        </div>
+      </Card>
     </Card>
-  </Card>
+
+    <Card v-if="role !== 'TENANT_ADMIN'">
+      <Descriptions title="租户消息量TOP10" :column="1">
+        <template v-for="(item, index) in 10" :key="index">
+          <DescriptionsItem>
+            <span
+              class="mr-2"
+              style="
+                width: 1.25rem;
+                height: 1.25rem;
+                border: 1px solid;
+                color: #0b55f1;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+              :style="{
+                color:
+                  index === 0
+                    ? '#f0a16e'
+                    : index === 1
+                    ? '#868585'
+                    : index === 2
+                    ? '#e78739'
+                    : '#4e84f5',
+                backgroundColor:
+                  index === 0 ? '#fed36a' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
+                borderColor:
+                  index === 0
+                    ? '#fdee7d'
+                    : index === 1
+                    ? '#e6e6e5'
+                    : index === 2
+                    ? '#f8c296'
+                    : '#0b55f1;',
+              }"
+              >{{ index + 1 }}</span
+            >兰州天兆猪业</DescriptionsItem
+          >
+        </template>
+      </Descriptions>
+    </Card>
+    <BasicTable @register="registerTable" v-if="role !== 'TENANT_ADMIN'" />
+  </div>
 </template>
 
 <script lang="ts">
   import { defineComponent, ref, computed, onMounted } from 'vue';
-  import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
+  import {
+    Card,
+    AnchorLink,
+    List,
+    ListItem,
+    ListItemMeta,
+    Avatar,
+    CardMeta,
+    Descriptions,
+    DescriptionsItem,
+  } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
   import { Time } from '/@/components/Time';
   import { useGo } from '/@/hooks/web/usePage';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { columns } from './props';
   export default defineComponent({
     components: {
       Card,
@@ -73,12 +134,18 @@
       Avatar,
       Time,
       CardMeta,
+      BasicTable,
+      Descriptions,
+      DescriptionsItem,
     },
-    setup() {
-      onMounted(async () => {
-        const res = await getEnterPriseDetail();
-        userStore.setEnterPriseInfo(res);
-      });
+    props: {
+      role: String,
+    },
+    setup(props) {
+      // 通知数据
+      const dataSource = ref([]);
+      const go = useGo();
+
       const helpDoc = ref([
         {
           title: '如何接入设备?',
@@ -108,6 +175,12 @@
       const onTabChange = (key) => {
         activeKey.value = key;
       };
+      const [registerTable] = useTable({
+        title: '本月即将过期租户',
+        showIndexColumn: false,
+        useSearchForm: false,
+        columns,
+      });
 
       const userStore = useUserStore();
       const getContacts = computed(() => {
@@ -122,13 +195,12 @@
       const getQrCode = computed(() => {
         return userStore.enterPriseInfo?.qrCode;
       });
-
-      // 通知数据
-      const dataSource = ref([]);
-      const go = useGo();
       onMounted(async () => {
-        const res = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
-        dataSource.value = res.items;
+        if (props.role !== 'TENANT_ADMIN') return;
+        const res = await getEnterPriseDetail();
+        const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
+        userStore.setEnterPriseInfo(res);
+        dataSource.value = notice.items;
       });
 
       return {
@@ -142,6 +214,7 @@
         getTel,
         dataSource,
         go,
+        registerTable,
       };
     },
   });

@@ -5,7 +5,7 @@
     :active-tab-key="activeKey"
     @tabChange="onTabChange"
   >
-    <template #tabBarExtraContent>
+    <template #tabBarExtraContent v-if="role === 'TENANT_ADMIN'">
       <div class="extra-date">
         <template v-for="(item, index) in dateList" :key="item">
           <span @click="changeDate(index)" :class="{ active: index === activeIndex }">{{
@@ -16,8 +16,9 @@
       </div>
     </template>
     <div v-if="activeKey === 'tab1'">
-      <p class="center">告警数</p>
-      <VisitAnalysis />
+      <p class="center">{{ role === 'TENANT_ADMIN' ? '告警数' : '租户趋势' }}</p>
+      <VisitAnalysis v-if="role === 'TENANT_ADMIN'" />
+      <VisitAnalysisBar v-else />
     </div>
     <div v-else>
       <p class="center">消息数</p>
@@ -30,19 +31,33 @@
   import { Card, DatePicker } from 'ant-design-vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
+  import { defineProps } from 'vue';
 
+  const props = defineProps<{
+    role: string;
+  }>();
   const activeKey = ref('tab1');
 
-  const tabListTitle = [
-    {
-      key: 'tab1',
-      tab: '告警数统计',
-    },
-    {
-      key: 'tab2',
-      tab: '消息量统计',
-    },
-  ];
+  // 动态根据登录角色来判断
+  const tabListTitle =
+    props.role === 'TENANT_ADMIN'
+      ? [
+          {
+            key: 'tab1',
+            tab: '告警数统计',
+          },
+          {
+            key: 'tab2',
+            tab: '消息量统计',
+          },
+        ]
+      : [
+          {
+            key: 'tab1',
+            tab: '租户',
+          },
+        ];
+
   const dateList = ref(['1小时', '1天', '7天', '30天']);
   const activeIndex = ref(0);
   function onTabChange(key) {

 import { PropType } from 'vue';
-
+import type { BasicColumn } from '/@/components/Table';
 export interface BasicProps {
   width: string;
   height: string;
@@ -14,3 +14,16 @@ export const basicProps = {
     default: '280px',
   },
 };
+
+export const columns: BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'tenantName',
+    width: 120,
+  },
+  {
+    title: '过期时间',
+    dataIndex: 'createdTime',
+    width: 120,
+  },
+];

-export interface GrowCardItem {
-  imgUrl: string;
-  title: string;
-  value: string;
-  onLine?: number;
-  offLine?: number;
-  inactive?: number;
-  newDay: string;
-}
-
-export const growCardList: GrowCardItem[] = [
-  {
-    imgUrl: '/src/assets/images/device-count.png',
-    title: '设备数（个）',
-    value: '10,000',
-    onLine: 2000,
-    offLine: 3000,
-    inactive: 4000,
-    newDay: '123,45',
-  },
-  {
-    imgUrl: '/src/assets/images/alarm-count.png',
-    title: '11月告警数（条）',
-    value: '11,000',
-    newDay: '167,45',
-  },
-  {
-    imgUrl: '/src/assets/images/msg-count.png',
-    title: '11月消息量（条）',
-    value: '12,000',
-    newDay: '198,45',
-  },
-];

 <template>
   <div class="p-4 md:flex">
     <div class="md:w-7/10 w-full !mr-4 enter-y">
-      <GrowCard :loading="loading" class="enter-y" />
-      <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
-      <div class="md:flex enter-y">
+      <GrowCard :loading="loading" class="enter-y" :role="role" />
+      <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
+      <div class="md:flex enter-y" v-if="role === 'TENANT_ADMIN'">
         <Card title="核心流程指南" style="width: 100%">
           <img alt="核心流程指南" src="../../../assets/images/flow.png" />
         </Card>
       </div>
     </div>
     <div class="md:w-3/10 w-full enter-y">
-      <HelpDoc />
+      <HelpDoc :role="role" />
     </div>
   </div>
 </template>
@@ -20,7 +20,11 @@
   import SiteAnalysis from './components/SiteAnalysis.vue';
   import { Card } from 'ant-design-vue';
   import HelpDoc from './components/HelpDoc.vue';
-
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  const userInfo: any = getAuthCache(USER_INFO_KEY);
+  const role = userInfo.roles[0];
+  console.log(role);
   const loading = ref(true);
   setTimeout(() => {
     loading.value = false;

 import { formatToDateTime } from '/@/utils/dateUtil';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
+
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 
 export const columns: BasicColumn[] = [
@@ -8,25 +9,20 @@ export const columns: BasicColumn[] = [
     title: '设备名称',
     dataIndex: 'name',
     width: 120,
-    key: 'name',
   },
   {
     title: '设备标签',
     dataIndex: 'label',
     width: 100,
-    key: 'label',
   },
   {
     title: '设备配置',
     dataIndex: 'deviceProfile.name',
     width: 160,
-    key: 'deviceProfile.name',
   },
-
   {
     title: '设备类型',
     dataIndex: 'deviceType',
-    key: 'deviceType',
     customRender({ text }) {
       return text === DeviceTypeEnum.GATEWAY
         ? '网关设备'
@@ -39,7 +35,6 @@ export const columns: BasicColumn[] = [
     title: '描述',
     dataIndex: 'description',
     width: 180,
-    key: 'description',
   },
 ];
 // 实时数据表格

+import { formatToDate } from '/@/utils/dateUtil';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
@@ -19,6 +20,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'deviceProfile.name',
     width: 160,
     slots: { customRender: 'deviceProfile' },
+    ellipsis: true,
   },
 
   {
@@ -36,10 +38,16 @@ export const columns: BasicColumn[] = [
     width: 120,
     slots: { customRender: 'deviceState' },
   },
-
   {
     title: '最后连接时间',
-    dataIndex: 'lastConnectTime',
+    dataIndex: 'lastOnlineTime',
+    format: (text) => formatToDate(text, 'YYYY-MM-DD HH:mm:ss'),
+    width: 180,
+  },
+  {
+    title: '最后断开时间',
+    dataIndex: 'lastOfflineTime',
+    format: (text) => formatToDate(text, 'YYYY-MM-DD HH:mm:ss'),
     width: 180,
   },
 ];

@@ -6,7 +6,7 @@
     :destroyOnClose="true"
     @close="closeDrawer"
     :title="deviceDetail.name"
-    width="78%"
+    width="70%"
   >
     <Tabs v-model:activeKey="activeKey" :size="size" type="card">
       <TabPane key="1" tab="详情"

@@ -10,8 +10,8 @@
         bordered
         :columns="columns"
         :data-source="[deviceDetail]"
+        :rowKey="(_, index) => index"
         :pagination="false"
-        rowKey="tbDeviceId"
         style="width: 800px"
       />
     </div>
@@ -23,7 +23,7 @@
     </div>
     <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
       <p>设备位置</p>
-      <div ref="wrapRef" style="height: 400px; width: 90%"></div>
+      <div ref="wrapRef" style="height: 400px; width: 100%"></div>
     </div>
   </div>
 </template>