feat(zhdpgl): 添加电表监控系统功能

- 新增 ElectricityDetail 组件，用于显示电表监控系统详细信息
- 在 zhdg 目录下添加预览资源功能
- 修改相关 API 路径，使用 /screen/screenLamp 前缀

src/views/zhdpgl/yqzl/components/ElectricityDetail.vue

@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { clientGet } from '@/utils/request.ts'
+import { onMounted, ref, computed } from 'vue'
+import type { BaseResponse, PaginationResponse } from '@/utils/type.ts'
+import { ElMessage, ElPagination } from 'element-plus'
+import {
+  BellElectric,
+  LucideCloudLightning,
+  TrendingUp,
+  Zap,
+  Activity,
+  BarChart2,
+  RefreshCw
+} from 'lucide-vue-next'
+
+interface ElectricityMessage {
+  /** 主键 ID */
+  id: string;
+  /** 前导 */
+  leadingString: string;
+  /** 固定 1 */
+  fixed1: string;
+  /** 表号 */
+  tableNumber: string;
+  /** 固定 2 */
+  fixed2: string;
+  /** 命令码 */
+  commandCode: string;
+  /** 数据域长度 */
+  dataFieldLength: number;
+  /** 数据标识 */
+  dataIdentification: string;
+  /** 剩余金额 */
+  remainingAmount: string;
+  /** 透支金额 */
+  overdraftAmount: string;
+  /** A 相电压 */
+  avoltage: string;
+  /** B 相电压 */
+  bvoltage: string;
+  /** C 相电压 */
+  cvoltage: string;
+  /** A 相电流 */
+  acurrent: string;
+  /** B 相电流 */
+  bcurrent: string;
+  /** C 相电流 */
+  ccurrent: string;
+  /** 总有功功率 */
+  totalActivePower: string;
+  /** A 相有功功率 */
+  aactivePower: string;
+  /** B 相有功功率 */
+  bactivePower: string;
+  /** C 相有功功率 */
+  cactivePower: string;
+  /** 总功率因素 */
+  totalPower: string;
+  /** A 相功率因素 */
+  apower: string;
+  /** B 相功率因素 */
+  bpower: string;
+  /** C 相功率因素 */
+  cpower: string;
+  /** 总用电量 */
+  totalElectricity: string;
+  /** 尖有功电量 */
+  sharpActivePowerConsumption: string;
+  /** 峰有功电量 */
+  peakActivePowerConsumption: string;
+  /** 平有功电量 */
+  averageActivePowerConsumption: string;
+  /** 谷有功电 */
+  valleyActivePower: string;
+  /** 状态 */
+  state: string;
+  /** 创建时间 */
+  createTime: string;
+}
+
+interface ElectricityMessageResponse extends BaseResponse{
+  data: ElectricityMessage[];
+}
+
+interface ElectricityMessagePageResponse extends BaseResponse{
+  data: PaginationResponse<ElectricityMessage>;
+}
+
+const newEletrictyMessage = ref<ElectricityMessage>();
+const electricityMessageList = ref<ElectricityMessage[]>([]);
+const loading = ref(true);
+const refreshing = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+const props = defineProps<{tableNumber: string,negativeSensor:number}>();
+
+// 格式化数值，添加单位
+const formatValue = (value: string | undefined, unit: string) => {
+  if (!value) return '0 ' + unit;
+  return parseFloat(value).toFixed(3) + ' ' + unit;
+};
+
+// 计算电压平均值
+const averageVoltage = computed(() => {
+  if (!newEletrictyMessage.value) return '0 V';
+  const a = parseFloat(newEletrictyMessage.value.avoltage || '0');
+  const b = parseFloat(newEletrictyMessage.value.bvoltage || '0');
+  const c = parseFloat(newEletrictyMessage.value.cvoltage || '0');
+  return ((a + b + c) / 3).toFixed(3) + ' V';
+});
+
+// 计算电流平均值
+const averageCurrent = computed(() => {
+  if (!newEletrictyMessage.value) return '0 A';
+  const a = parseFloat(newEletrictyMessage.value.acurrent || '0');
+  const b = parseFloat(newEletrictyMessage.value.bcurrent || '0');
+  const c = parseFloat(newEletrictyMessage.value.ccurrent || '0');
+  return ((a + b + c) / 3).toFixed(3) + ' A';
+});
+
+// 计算功率百分比（用于仪表盘显示）
+const powerPercentage = computed(() => {
+  if (!newEletrictyMessage.value) return 0;
+  const power = parseFloat(newEletrictyMessage.value.totalPower || '0');
+  return Math.min(Math.max(power * 100, 0), 100);
+});
+
+// 获取最新的电量信息
+const getNewElectricityMessage = async () => {
+  refreshing.value = true;
+  const arr = [];
+  arr.push({
+    column: 'create_time',
+    type: 'orderByDesc'
+  });
+  arr.push({
+    column: 'table_number',
+    type: 'eq',
+    value: props.tableNumber
+  });
+  try {
+    const res = await clientGet<{ conditionJson: string }, ElectricityMessageResponse>('/electricity/messageParse/getAll', {
+      params: {
+        conditionJson: encodeURIComponent(JSON.stringify(arr))
+      }
+    });
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    newEletrictyMessage.value = res.data[0];
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('获取最新电力信息失败');
+  } finally {
+    loading.value = false;
+    refreshing.value = false;
+  }
+};
+
+// 分页获取电量信息
+const getElectricityMessage = async (page = 1) => {
+  loading.value = true;
+  currentPage.value = page;
+  const arr = [];
+  arr.push({
+    column: 'create_time',
+    type: 'orderByDesc'
+  });
+  arr.push({
+    column: 'table_number',
+    type: 'eq',
+    value: props.tableNumber
+  });
+  try {
+    const res = await clientGet<{ conditionJson: string }, ElectricityMessagePageResponse>('/electricity/messageParse/findByPage', {
+      params: {
+        conditionJson: encodeURIComponent(JSON.stringify(arr)),
+        pageNum: currentPage.value,
+        pageSize: pageSize.value
+      }
+    });
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    electricityMessageList.value = res.data.records;
+    total.value = res.data.total;
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('获取电力信息列表失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 刷新数据
+const refreshData = () => {
+  getNewElectricityMessage();
+  getElectricityMessage(currentPage.value);
+};
+
+// 处理页码变化
+const handleCurrentChange = (val: number) => {
+  getElectricityMessage(val);
+};
+
+// 格式化时间
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return date.toLocaleString();
+};
+
+onMounted(() => {
+  getNewElectricityMessage();
+  getElectricityMessage();
+});
+</script>
+
+<template>
+  <div class="electricity-dashboard bg-gray-50 min-h-screen p-4 md:p-6">
+    <!-- 头部 -->
+    <div class="dashboard-header mb-6">
+      <div class="flex justify-between items-center">
+        <h1 class="text-2xl font-bold text-gray-800 flex items-center">
+          <BellElectric class="mr-2 text-blue-500" />
+          电表监控系统
+        </h1>
+        <el-button type="primary" :icon="RefreshCw" :loading="refreshing" @click="refreshData">
+          刷新数据
+        </el-button>
+      </div>
+      <p class="text-gray-500 mt-2">实时监控电表运行状态，提供详细的电力数据分析</p>
+    </div>
+
+    <el-skeleton :loading="loading" animated>
+      <template #template>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          <el-skeleton-item variant="rect" style="height: 150px" />
+          <el-skeleton-item variant="rect" style="height: 150px" />
+          <el-skeleton-item variant="rect" style="height: 150px" />
+          <el-skeleton-item variant="rect" style="height: 150px" />
+        </div>
+        <el-skeleton-item variant="rect" style="height: 300px; margin-bottom: 20px" />
+        <el-skeleton-item variant="rect" style="height: 400px" />
+      </template>
+
+      <template #default>
+        <!-- 关键指标卡片 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          <!-- 负感器卡片 -->
+          <el-card class="h-full" shadow="hover">
+            <div class="flex items-center">
+              <div class="rounded-full bg-green-100 p-3 mr-4">
+                <Zap class="text-green-500" />
+              </div>
+              <div>
+                <div class="text-sm text-gray-500">电表编号</div>
+                <div class="text-2xl font-bold text-gray-800">
+                  {{ props.tableNumber || "未知" }}
+                </div>
+                <div class="text-xs text-gray-800 mt-1">
+                  负感器比值: {{ props.negativeSensor || '未知' }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+
+          <!-- 电压卡片 -->
+          <el-card class="h-full" shadow="hover">
+            <div class="flex items-center">
+              <div class="rounded-full bg-blue-100 p-3 mr-4">
+                <LucideCloudLightning class="text-blue-500" />
+              </div>
+              <div>
+                <div class="text-sm text-gray-500">平均电压</div>
+                <div class="text-2xl font-bold text-gray-800">{{ averageVoltage }}</div>
+                <div class="text-xs text-gray-500 mt-1">
+                  A: {{ formatValue(newEletrictyMessage?.avoltage, 'V') }} |
+                  B: {{ formatValue(newEletrictyMessage?.bvoltage, 'V') }} |
+                  C: {{ formatValue(newEletrictyMessage?.cvoltage, 'V') }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+
+          <!-- 电流卡片 -->
+          <el-card class="h-full" shadow="hover">
+            <div class="flex items-center">
+              <div class="rounded-full bg-yellow-100 p-3 mr-4">
+                <Activity class="text-yellow-500" />
+              </div>
+              <div>
+                <div class="text-sm text-gray-500">平均电流</div>
+                <div class="text-2xl font-bold text-gray-800">{{ averageCurrent }}</div>
+                <div class="text-xs text-gray-500 mt-1">
+                  A: {{ formatValue(newEletrictyMessage?.acurrent, 'A') }} |
+                  B: {{ formatValue(newEletrictyMessage?.bcurrent, 'A') }} |
+                  C: {{ formatValue(newEletrictyMessage?.ccurrent, 'A') }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+
+          <!-- 功率卡片 -->
+          <el-card class="h-full" shadow="hover">
+            <div class="flex items-center">
+              <div class="rounded-full bg-red-100 p-3 mr-4">
+                <TrendingUp class="text-red-500" />
+              </div>
+              <div>
+                <div class="text-sm text-gray-500">总有功功率</div>
+                <div class="text-2xl font-bold text-gray-800">
+                  {{ formatValue(newEletrictyMessage?.totalActivePower, 'kW') }}
+                </div>
+                <div class="text-xs text-gray-500 mt-1">
+                  功率因数: {{ newEletrictyMessage?.totalPower || '0' }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 详细数据卡片 -->
+        <el-card class="mb-6" shadow="hover">
+          <template #header>
+            <div class="flex justify-between items-center">
+              <div class="font-bold text-lg flex items-center">
+                <BarChart2 class="mr-2" />
+                电力详细数据
+              </div>
+              <div class="text-sm text-gray-500">
+                最后更新时间: {{ formatDate(newEletrictyMessage?.createTime || '') }}
+              </div>
+            </div>
+          </template>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- 电压仪表盘 -->
+            <div class="flex flex-col items-center">
+              <h3 class="text-gray-700 mb-2">三相电压 (V)</h3>
+              <el-progress type="dashboard" :percentage="100" :color="'#409EFF'" :stroke-width="10" :width="200">
+                <template #default>
+                  <div class="flex flex-col items-center">
+                    <span class="text-lg font-bold">A相: {{ formatValue(newEletrictyMessage?.avoltage, 'V') }}</span>
+                    <span class="text-sm text-gray-500">B相: {{ formatValue(newEletrictyMessage?.bvoltage, 'V') }}</span>
+                    <span class="text-sm text-gray-500">C相: {{ formatValue(newEletrictyMessage?.cvoltage, 'V') }}</span>
+                  </div>
+                </template>
+              </el-progress>
+            </div>
+
+            <!-- 电流仪表盘 -->
+            <div class="flex flex-col items-center">
+              <h3 class="text-gray-700 mb-2">三相电流 (A)</h3>
+              <el-progress type="dashboard" :percentage="100" :color="'#E6A23C'" :stroke-width="10" :width="200">
+                <template #default>
+                  <div class="flex flex-col items-center">
+                    <span class="text-lg font-bold">A相: {{ formatValue(newEletrictyMessage?.acurrent, 'A') }}</span>
+                    <span class="text-sm text-gray-500">B相: {{ formatValue(newEletrictyMessage?.bcurrent, 'A') }}</span>
+                    <span class="text-sm text-gray-500">C相: {{ formatValue(newEletrictyMessage?.ccurrent, 'A') }}</span>
+                  </div>
+                </template>
+              </el-progress>
+            </div>
+
+            <!-- 功率仪表盘 -->
+            <div class="flex flex-col items-center">
+              <h3 class="text-gray-700 mb-2">功率因数</h3>
+              <el-progress type="dashboard" :percentage="powerPercentage" :color="'#67C23A'" :stroke-width="10" :width="200">
+                <template #default>
+                  <div class="flex flex-col items-center">
+                    <span class="text-lg font-bold">总: {{ newEletrictyMessage?.totalPower || '0' }}</span>
+                    <span class="text-sm text-gray-500">A相: {{ newEletrictyMessage?.apower || '0' }}</span>
+                    <span class="text-sm text-gray-500">B相: {{ newEletrictyMessage?.bpower || '0' }}</span>
+                    <span class="text-sm text-gray-500">C相: {{ newEletrictyMessage?.cpower || '0' }}</span>
+                  </div>
+                </template>
+              </el-progress>
+            </div>
+
+            <!-- 用电量统计 -->
+            <div class="lg:col-span-3">
+              <h3 class="text-gray-700 mb-4">用电量统计</h3>
+              <el-card shadow="never" class="bg-gray-50">
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+                  <div class="text-center p-3 bg-white rounded-lg shadow-sm">
+                    <div class="text-gray-500 text-sm">总用电量</div>
+                    <div class="text-xl font-bold text-gray-800">
+                      {{ formatValue(newEletrictyMessage?.totalElectricity, 'kWh') }}
+                    </div>
+                  </div>
+                  <div class="text-center p-3 bg-white rounded-lg shadow-sm">
+                    <div class="text-gray-500 text-sm">尖峰用电</div>
+                    <div class="text-xl font-bold text-gray-800">
+                      {{ formatValue(newEletrictyMessage?.sharpActivePowerConsumption, 'kWh') }}
+                    </div>
+                  </div>
+                  <div class="text-center p-3 bg-white rounded-lg shadow-sm">
+                    <div class="text-gray-500 text-sm">峰时用电</div>
+                    <div class="text-xl font-bold text-gray-800">
+                      {{ formatValue(newEletrictyMessage?.peakActivePowerConsumption, 'kWh') }}
+                    </div>
+                  </div>
+                  <div class="text-center p-3 bg-white rounded-lg shadow-sm">
+                    <div class="text-gray-500 text-sm">平有供电量</div>
+                    <div class="text-xl font-bold text-gray-800">
+                      {{ formatValue(newEletrictyMessage?.averageActivePowerConsumption, 'kWh') }}
+                    </div>
+                  </div>
+                  <div class="text-center p-3 bg-white rounded-lg shadow-sm">
+                    <div class="text-gray-500 text-sm">谷时用电</div>
+                    <div class="text-xl font-bold text-gray-800">
+                      {{ formatValue(newEletrictyMessage?.valleyActivePower, 'kWh') }}
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </div>
+          </div>
+        </el-card>
+
+        <!-- 历史数据表格 -->
+        <el-card shadow="hover">
+          <template #header>
+            <div class="font-bold text-lg">历史电力数据记录</div>
+          </template>
+
+          <el-table :data="electricityMessageList" stripe style="width: 100%" border>
+            <el-table-column prop="tableNumber" label="表号" min-width="120" />
+            <el-table-column label="电压 (V)" min-width="200">
+              <template #default="scope">
+                <div class="flex flex-col">
+                  <span>A相: {{ formatValue(scope.row.avoltage, 'V') }}</span>
+                  <span>B相: {{ formatValue(scope.row.bvoltage, 'V') }}</span>
+                  <span>C相: {{ formatValue(scope.row.cvoltage, 'V') }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="电流 (A)" min-width="200">
+              <template #default="scope">
+                <div class="flex flex-col">
+                  <span>A相: {{ formatValue(scope.row.acurrent, 'A') }}</span>
+                  <span>B相: {{ formatValue(scope.row.bcurrent, 'A') }}</span>
+                  <span>C相: {{ formatValue(scope.row.ccurrent, 'A') }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="功率" min-width="200">
+              <template #default="scope">
+                <div class="flex flex-col">
+                  <span>总有功: {{ formatValue(scope.row.totalActivePower, 'kW') }}</span>
+                  <span>A相: {{ formatValue(scope.row.aactivePower, 'kW') }}</span>
+                  <span>B相: {{ formatValue(scope.row.bactivePower, 'kW') }}</span>
+                  <span>C相: {{ formatValue(scope.row.cactivePower, 'kW') }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="用电量" min-width="200">
+              <template #default="scope">
+                <div class="flex flex-col">
+                  <span>总用电: {{ formatValue(scope.row.totalElectricity, 'kWh') }}</span>
+                  <span>尖峰: {{ formatValue(scope.row.sharpActivePowerConsumption, 'kWh') }}</span>
+                  <span>峰时: {{ formatValue(scope.row.peakActivePowerConsumption, 'kWh') }}</span>
+                  <span>平时: {{ formatValue(scope.row.averageActivePowerConsumption, 'kWh') }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="创建时间" min-width="180">
+              <template #default="scope">
+                {{ formatDate(scope.row.createTime) }}
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <div class="flex justify-center mt-4">
+            <el-pagination
+              v-model:current-page="currentPage"
+              :page-size="pageSize"
+              :total="total"
+              layout="prev, pager, next, jumper"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<style scoped>
+.electricity-dashboard {
+  --el-color-primary: #409EFF;
+}
+
+.el-card {
+  transition: all 0.3s;
+}
+
+.el-card:hover {
+  transform: translateY(-2px);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .dashboard-header h1 {
+    font-size: 1.5rem;
+  }
+}
+</style>

src/views/zhdpgl/zhdg/dpfb.vue

@@ -41,6 +41,11 @@ interface IsOpenResponse extends BaseResponse{
 // 响应式数据
 const screenControls = ref<ScreenControl[]>([])
 const dialogVisible = ref(false)
+const previewDialog = ref(false)
+const currentPreview = ref({
+  url:'',
+  state:1
+})
 const BASE_API = import.meta.env.VITE_APP_BASE_API
 const currentItem = ref<ScreenControl>({
   id: '',
@@ -54,7 +59,7 @@ const previewUrl = ref<string>('') // 添加预览URL的响应式数据
 
 // 获取数据
 const getList = async () => {
-  const res = await clientGet<null, ScreenControlResponse>('/screen/test/getAllScreenControl')
+  const res = await clientGet<null, ScreenControlResponse>('/screen/screenLamp/getAllScreenControl')
   if (res.code !== 200) {
     ElMessage.error(res.msg)
     return
@@ -88,7 +93,7 @@ const openEditDialog = (row: ScreenControl) => {
 
 // 保存修改
 const saveEdit = async () => {
-  const res = await clientPut<ScreenControl, BaseResponse>('/screen/test/updateScreenControl', toRaw(currentItem.value))
+  const res = await clientPut<ScreenControl, BaseResponse>('/screen/screenLamp/updateScreenControl', toRaw(currentItem.value))
   if (res.code !== 200) {
     ElMessage.error(res.msg)
     return
@@ -122,7 +127,7 @@ const handleSuccess = (res: UploadResponse) => {
 }
 
 const checkIsOpen = async (deviceId:string) => {
-  const res = await clientPost<{deviceId:string},IsOpenResponse>("/screen/test/checkScreenState?deviceCode="+deviceId);
+  const res = await clientPost<{deviceId:string},IsOpenResponse>("/screen/screenLamp/checkScreenState?deviceCode="+deviceId);
   if(res.code !== 200){
     ElMessage.error(deviceId+"开启状态查询失败")
     return "未知";
@@ -137,7 +142,7 @@ const turnOrOffLight = async (screenControl: ScreenControl, cmd: number) => {
       deviceCode: screenControl.deviceId,
       cmd: cmd
     };
-    const res = await clientPost<null,IsOpenResponse>("/screen/test/turnOffOrLight", null, { params });
+    const res = await clientPost<null,IsOpenResponse>("/screen/screenLamp/turnOffOrLight", null, { params });
     if (res.code !== 200) {
       ElMessage.error(`设备 ${screenControl.deviceId} 操作失败: ${res.msg}`);
       return;
@@ -153,9 +158,9 @@ const turnOrOffLight = async (screenControl: ScreenControl, cmd: number) => {
 const applyResource = async (item:ScreenControl)=>{
   const params = {
     deviceCode: item.deviceId,
-    url: "http://172.16.102.52:83/?deviceId=y4a-b23-00845"
+    url: "http://172.16.102.52:83/?deviceId="+item.deviceId
   }
-  const res = await clientPost<null,BaseResponse>("/screen/test/getTopWebPage",null,{params})
+  const res = await clientPost<null,BaseResponse>("/screen/screenLamp/getTopWebPage",null,{params})
   if(res.code !== 200){
     ElMessage.error(res.msg)
   }else {
@@ -163,6 +168,12 @@ const applyResource = async (item:ScreenControl)=>{
   }
 }
 
+const previewResource = (item:ScreenControl)=>{
+  currentPreview.value.url = item.url
+  currentPreview.value.state = item.state
+  previewDialog.value = true
+}
+
 onMounted(() => {
   getList()
 })
@@ -207,7 +218,7 @@ onMounted(() => {
         <el-button type="primary" size="small" @click="openEditDialog(scope.row)">
           修改
         </el-button>
-        <el-button type="warning" size="small" @click="openEditDialog(scope.row)">
+        <el-button type="warning" size="small" @click="previewResource(scope.row)">
           预览
         </el-button>
         <el-button type="info" size="small" @click="turnOrOffLight(scope.row,1)">
@@ -219,7 +230,17 @@ onMounted(() => {
       </template>
     </el-table-column>
   </el-table>
-
+  <el-dialog v-model="previewDialog" title="预览资源" width="30%" close-on-press-escape close-on-click-modal>
+    <div v-if="currentPreview.state === 1">
+      <img :src="currentPreview.url" alt="预览图片" style="max-width: 100%; max-height: 100%;" />
+    </div>
+    <div v-else-if="currentPreview.state === 2">
+      <video :src="currentPreview.url" controls autoplay style="max-width: 100%; max-height: 100%;" />
+    </div>
+    <template #footer>
+      <el-button @click="previewDialog = false">关闭</el-button>
+    </template>
+  </el-dialog>
   <!-- 修改对话框 -->
   <el-dialog v-model="dialogVisible" title="修改信息" width="30%">
     <el-form :model="currentItem" label-width="80px">