房屋详情，单元变更

src/views/workbench/index2.vue

@@ -61,13 +61,19 @@
         <!-- tabs -->
         <el-col :span="6">
           <div class="flex flex-col h-full">
-            <div class="villageInfoBox">
-              <div class="iconbox">
-                <div :title="`${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power}  温度${weather_icon.temperature}°C`">
-                  {{ getWeatherIcon(weather_icon.iconvalue) }}
+            <div class="villageInfoBox flex">
+              <div class="flex-1 flex-items-center">
+                <div class="iconbox">
+                  <div :title="`${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power}  温度${weather_icon.temperature}°C`">
+                    {{ getWeatherIcon(weather_icon.iconvalue) }}
+                  </div>
+                </div>
+                <div class="tips">
+                  {{ `${weather_icon.title} ${weather_icon.wind_direction} ${weather_icon.wind_power}风` }}
+                  <span>温度{{ weather_icon.temperature }}°C</span>
                 </div>
               </div>
-              <div class="villageinfo">
+              <div class="villageinfo flex-1">
                 <div class="villagename">{{ villageinfo.villageName }}</div>
                 <div class="week">
                   <span style="padding-right: 10px">{{ new Date().toLocaleDateString().replaceAll('/', '-') }}</span>
@@ -109,14 +115,23 @@
                 <div class="body flex-1">
                   <div class="quicly_box" v-if="Sideactive === 1">
                     <div class="quickly_item" v-for="(item, index) in quickBox" :key="index" @click="handleRouter(item.url)">
-                      <div class="quickly_item_icon" v-if="item.img">
-                        <el-image :src="item.img"></el-image>
+                      <div class="quickly_item_icon" v-if="item.menuIcon">
+                        <svg-icon :icon-class="item.menuIcon" />
                       </div>
-                      <div class="quickly_item_icon" v-else-if="item.svg">
-                        <svg-icon :icon-class="item.svg" />
+                      <div class="quickly_item_content">{{ item.menuName }}</div>
+                      <!-- <div class="actionsbox">
+                        <div class="routeactions">
+                          <el-icon><Position /></el-icon>
+                          <span style="padding-left: 0.1rem">跳转</span>
+                        </div>
+                        <div class="deleteaction">
+                          <el-icon><Delete /></el-icon>
+                          <span style="padding-left: 0.1rem">删除</span>
+                        </div>
+                      </div> -->
+                      <div class="deleteaction" @click="delteRoute(item.id)">
+                        <el-icon class="icons"><Remove /></el-icon>
                       </div>
-
-                      <div class="quickly_item_content">{{ item.name }}</div>
                     </div>
                     <div @click="addQuieckDialog" class="quickly_item add">
                       <el-icon><Plus /></el-icon>
@@ -242,14 +257,17 @@
             @change="handleCascader"
             clearable
             :props="{ value: 'path', label: 'name', children: 'children' }"
-            v-model="form.path"
+            v-model="path"
             :options="quicklylist"
           />
         </el-form-item>
+        <el-form-item label="排序" prop="path">
+          <el-input-number v-model="form.sortOrder"></el-input-number>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary">确 定</el-button>
+          <el-button type="primary" @click="submitQuick">确 定</el-button>
           <el-button>取 消</el-button>
         </div>
       </template>
@@ -288,7 +306,14 @@ import { UploadUserFile } from 'element-plus';
 import { getVillageByIdAPI } from '@/api/system/community';
 import { getLast7Days, numToWeek2 } from '@/utils/time';
 import { EChartsOption } from 'echarts';
-import { workSpaceIncomeTrendListApi, workSpaceTotalListApi, workSpaceWeatherApi } from '@/api/workflow';
+import {
+  addQuicklyshortcut,
+  delQuicklyshortcut,
+  getQuicklyshortcut,
+  workSpaceIncomeTrendListApi,
+  workSpaceTotalListApi,
+  workSpaceWeatherApi
+} from '@/api/workflow';
 import { getWeatherIcon } from '@/utils/weather';
 import { MenuTreeOption } from '@/api/system/menu/types';
 
@@ -495,10 +520,12 @@ function handleSelect(val: number) {
 // ! 快捷入口
 const quickBox = ref<
   {
-    name: string;
-    url: string;
-    img: string;
-    svg?: string;
+    'id': string;
+    'menuId': null;
+    'menuName': string;
+    'menuPath': string;
+    'menuIcon': string;
+    'sortOrder': number;
   }[]
 >([
   {
@@ -543,28 +570,35 @@ const dialog = reactive<DialogOption>({
   visible: false,
   title: '添加快捷入口'
 });
-const menuOptions = ref<MenuTreeOption[]>([]);
 const form = ref({
-  name: '',
-  path: '',
-  icon: ''
+  menuName: '',
+  menuPath: '',
+  menuIcon: '',
+  sortOrder: 1
 });
+const path = ref([]);
 const rules = {
-  name: [{ required: true, trigger: 'blur', message: '请输入快捷入口名称' }],
-  path: [{ required: true, trigger: 'blur', message: '请选择快捷入口页面' }]
+  menuPath: [{ required: true, trigger: 'blur', message: '请选择快捷入口页面' }]
 };
 const quicklylist = ref([]);
 function addQuieckDialog() {
   form.value = {
-    name: '',
-    path: '',
-    icon: ''
+    menuName: '',
+    menuPath: '',
+    menuIcon: '',
+    sortOrder: 1
   };
   const permissionStore = usePermissionStore();
   const routes = permissionStore.getDefaultRoutes();
   handleroutestoshowlist(routes);
   dialog.visible = true;
 }
+function getquicklist() {
+  getQuicklyshortcut().then((res) => {
+    quickBox.value = res.data;
+  });
+}
+getquicklist();
 function handleroutestoshowlist(rotues) {
   // 1. 输入校验：确保 routes 是数组
   if (!Array.isArray(rotues)) {
@@ -623,16 +657,27 @@ function handleCascader(val) {
   if (find) {
     const find2 = find.children.find((item) => item.path === childrenpath);
     if (find2) {
-      console.log('>>> find2 <<<', find2);
-      quickBox.value.push({
-        name: find2.name,
-        img: null,
-        svg: find2.icon,
-        url: find2.path
-      });
+      form.value = {
+        ...form.value,
+        menuIcon: find2.icon,
+        menuName: find2.name,
+        menuPath: find2.path
+      };
     }
   }
 }
+function submitQuick() {
+  addQuicklyshortcut(form.value).then((res) => {
+    ElMessage.success(res.msg);
+    dialog.visible = false;
+    getquicklist();
+  });
+}
+function delteRoute(id: string) {
+  delQuicklyshortcut(id).then(() => {
+    getquicklist();
+  });
+}
 // ! 快捷入口
 
 // ! 创建办事记录
@@ -879,22 +924,35 @@ async function deleteFun(row) {
     margin-left: 20px;
     display: flex;
     align-items: center;
-    padding: 0 2rem;
+    justify-content: space-evenly;
     background: #036aff;
+    padding: 0 2rem;
     border-radius: 16px 16px 16px 16px;
     margin-bottom: 20px;
     position: relative;
     overflow: hidden;
+
+    gap: 30px;
+    .tips {
+      font-size: small;
+      color: #ffffff77;
+      margin-top: 10px;
+      font-size: 0.8rem;
+      text-align: center;
+      @media (max-width: 1400px) {
+        font-size: 0.9rem;
+      }
+    }
     .iconbox {
       width: 70px;
       height: 70px;
       text-align: center;
       margin-right: 20px;
       font-size: 60px;
-      line-height: 70px;
       position: relative;
       z-index: 2;
       cursor: default;
+      margin: 0 auto;
     }
     .villageinfo {
       margin-left: 20px;
@@ -909,7 +967,7 @@ async function deleteFun(row) {
         margin-top: 5px;
         height: 23px;
         font-weight: 400;
-        font-size: 1.1rem;
+        font-size: 1rem;
         color: #ffffff;
         line-height: 23px;
         display: flex;
@@ -1011,8 +1069,12 @@ async function deleteFun(row) {
         padding-top: 20px;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        @media (max-width: 1750px) {
+        @media (max-width: 1950px) {
           grid-template-columns: repeat(2, 1fr);
+          max-height: 410px;
+        }
+        @media (max-width: 1750px) {
+          max-height: 550px;
         }
         @media (max-width: 1600px) {
           max-height: 550px;
@@ -1035,19 +1097,149 @@ async function deleteFun(row) {
           justify-content: center;
           cursor: pointer;
 
+          position: relative;
+          overflow: hidden;
+
+          font-size: 0.685rem;
+          @media (max-width: 2000px) {
+            font-size: 0.65rem;
+          }
+          @media (max-width: 1500px) {
+            height: 46px;
+            font-size: 0.75rem;
+          }
+          @media (max-width: 1250px) {
+            height: 36px;
+            font-size: 0.75rem;
+          }
+
           &:hover {
             background-color: #0084ff09;
           }
           .quickly_item_icon {
-            width: 25px;
-            height: 25px;
             margin-right: 8px;
+            vertical-align: middle;
           }
           .quickly_item_content {
             font-weight: 500;
             color: #222222;
           }
 
+          // &:hover {
+          //   .actionsbox {
+          //     opacity: 1;
+          //     .routeactions {
+          //       transform: rotateY(0deg);
+          //     }
+          //     .deleteaction {
+          //       transform: rotateY(0deg);
+          //     }
+          //   }
+          // }
+          &:hover {
+            .deleteaction {
+              opacity: 1;
+            }
+          }
+
+          .deleteaction {
+            position: absolute;
+            transition: all 0.3s;
+            opacity: 0;
+            right: 0;
+            top: 0;
+            z-index: 1;
+            background-color: #bbbbbb42;
+            border: 1px solid #bbbbbb42;
+            text-align: center;
+            width: 1.2rem;
+            height: 1.2rem;
+            border-radius: 0 0 0 0.5rem;
+            line-height: 1.2rem;
+            font-size: 15px;
+            @media (max-width: 2000px) {
+              width: 1.4rem;
+              height: 1.4rem;
+              border-radius: 0 0 0 0.5rem;
+              line-height: 1.4rem;
+              font-size: 15px;
+            }
+            @media (max-width: 1700px) {
+              width: 1.7rem;
+              height: 1.7rem;
+              border-radius: 0 0 0 0.5rem;
+              line-height: 1.7rem;
+              font-size: 1.2rem;
+            }
+            @media (max-width: 1500px) {
+              width: 1.7rem;
+              height: 1.7rem;
+              border-radius: 0 0 0 0.5rem;
+              line-height: 1.7rem;
+              font-size: 1.2rem;
+            }
+            @media (max-width: 1250px) {
+              width: 1.6rem;
+              height: 1.6rem;
+              border-radius: 0 0 0 0.8rem;
+              line-height: 1.6rem;
+              font-size: 1rem;
+            }
+
+            &:hover {
+              color: red;
+              i.icons {
+                transform: rotateZ(360deg);
+              }
+            }
+            i.icons {
+              transition: all 0.3s;
+            }
+          }
+
+          .actionsbox {
+            opacity: 1;
+            transition: all 0.3s;
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .routeactions,
+            .deleteaction {
+              font-size: 15px;
+              color: #fff;
+              flex: 0.5;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              transition: all 0.3s;
+
+              @media (max-width: 1500px) {
+                font-size: 13px;
+              }
+              @media (max-width: 1250px) {
+                font-size: 11px;
+              }
+            }
+            .routeactions {
+              background-color: #0083ff;
+              transform-origin: left center;
+              transform: rotateY(90deg);
+            }
+            .deleteaction {
+              display: flex;
+              align-items: center;
+              background-color: red;
+              transform-origin: right center;
+              transform: rotateY(-90deg);
+            }
+          }
+
           &.add {
             text-align: center;
             color: #036aff;