旗县一张图添加模块，路由配置，旗县系统页面绘制与接口数据接入

website/src/api/zbmxgl/jcyjsbApi.js

@@ -7,6 +7,7 @@ const jcyjsb = {
     ReportSubmit: '/apply/zbsb/reportSubmit', // 指标上传-成果上报
     DownloadExcel: '/apply/zbsb/downloadExcel', // 指标上传-下载Excel文件
     Delete: '/apply/zbsb/delete', // 指标上传-删除
+    GetDdxtList: '/system/ddxt/list',
 }
 
 /**
@@ -103,4 +104,20 @@ export function Delete(parameter) {
             'Content-Type': 'application/json;charset=UTF-8'
         }
     })
+}
+
+/**
+ * 指标上传-记录列表
+ * @param parameter 
+ * @returns {*}
+ */
+export function GetDdxtList(parameter) {
+    return request({
+        method: 'get',
+        url: jcyjsb.GetDdxtList,
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
 }

website/src/views/Home.vue

@@ -126,6 +126,8 @@ export default {
   }
 
   .item {
+    width: 280px;
+    height: 280px;
     transition: transform 0.4s, font-size 0.3s;
   }
 
@@ -179,14 +181,14 @@ export default {
   background-image: url("../assets/homeimg/8.png");
   background-size: 100% 100%;
 }
-
-.ghyzt {
-  background-image: url("../assets/homeimg/8.png");
-  background-size: 100% 100%;
-}
-
 .ghyzt {
   background-image: url("../assets/homeimg/1.png");
   background-size: 100% 100%;
 }
+.qxyzt {
+  background-image: url("../assets/homeimg/9.png");
+  background-size: 90% 90%;
+  background-repeat: no-repeat;
+  background-position: 14px 10px;
+}
 </style>

website/src/views/qxyzt/Index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tac flex-box nowrap max-box overflow-hidden">
+    <Right-Menu
+      :menulist="menulist"
+      class="minRightMenuWidth max-height posi-rel"
+      style="z-index: 9"
+    ></Right-Menu>
+    <router-view class="minRightMenuWidth-body max-height" />
+  </div>
+</template>
+
+<script>
+import RightMenu from "@/components/index/Rightmenu.vue";
+import { reactive, toRefs } from "@vue/reactivity";
+import { getTwolist } from "@/utils/routerrules";
+import { useRoute } from "vue-router";
+export default {
+  components: {
+    RightMenu,
+  },
+  setup() {
+    const route = useRoute();
+    const ghss = reactive({
+      menulist: getTwolist(route.path),
+    });
+    return { ...toRefs(ghss) };
+  },
+};
+</script>

website/src/views/qxyzt/Qxxt.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="max-box">
+    <div class="qxxt max-box flex-box column">
+      <div class="header flex-box align-center box-sizing">
+        <div class="header-left">
+          <el-input
+            v-model="formInline.xzqmc"
+            style="width: 240px"
+            placeholder="名称查询"
+            suffix-icon="Search"
+            @keyup.enter.prevent="searchHandle"
+          />
+        </div>
+        <div class="margin-right-20">
+          <div>
+            <span> 已贯通：{{ total }}</span>
+            <span>未贯通：0</span>
+          </div>
+        </div>
+      </div>
+      <div class="table-layout flex-box column height-100-50">
+        <div class="max-width height-100-40 imgCon">
+          <ul>
+            <li v-for="(item, i) in demoList" :key="i">
+              <div class="itemIcon">已贯通</div>
+              <div
+                class="imgCon"
+                :style="{ background: `url(${item.img})` }"
+              ></div>
+              <div class="textShow">
+                <div class="cityName">{{ item.xzqmc }}</div>
+                <div class="dre">{{ item.xtmc }}</div>
+              </div>
+              <div class="bottomBtn" @click="goSystem(item)">进入系统>></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="flex-box footer height-50 flex-box align-center box-sizing">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="formInline.pageSize"
+          background
+          :pager-count="5"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetDdxtList } from "@/api/zbmxgl/jcyjsbApi.js";
+import Cookies from "js-cookie";
+import { ElMessage } from "element-plus";
+export default {
+  components: {
+    // AddDialog,
+  },
+  setup(prop) {
+    const { proxy } = getCurrentInstance();
+    const qxxt = reactive({
+      formInline: {
+        pageNum: 1,
+        pageSize: 10,
+        xzqmc: "",
+      },
+      total: 0,
+      demoList: [],
+      handleSizeChange(val) {
+        qxxt.formInline.pageSize = val;
+        qxxt.getlist();
+      },
+      handleCurrentChange(val) {
+        qxxt.formInline.pageNum = val;
+        qxxt.getlist();
+      },
+      //回车查询（按下enter键）
+      searchHandle() {
+        qxxt.getlist();
+      },
+      // 获取上传列表
+      getlist() {
+        GetDdxtList(qxxt.formInline).then((res) => {
+          qxxt.demoList = res.rows;
+          qxxt.total = res.total;
+        });
+      },
+      goSystem(item) {
+        let token = Cookies.get("Admin-Token");
+        const url = `${item.url}?token=${token}`;
+        window.open(url, "_blank");
+      },
+    });
+    onMounted(() => {
+      qxxt.getlist();
+    });
+    return { ...toRefs(qxxt) };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.qxxt {
+  .header {
+    border-bottom: 1px solid rgb(230, 230, 230);
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    height: 50px;
+  }
+  .header-left {
+    margin-left: 10px;
+  }
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+  .el-form-item {
+    margin-right: 10px;
+  }
+  .btn {
+    line-height: 0;
+  }
+  .footer {
+    width: 100%;
+    padding: 10px;
+  }
+}
+.imgCon {
+  ul {
+    list-style: none;
+    display: flex;
+    justify-content: start;
+    flex-wrap: wrap;
+    li {
+      width: 304px;
+      height: 290px;
+      cursor: pointer;
+      margin: 12px 15px 10px 15px;
+      transition: transform 0.4s, font-size 0.3s;
+      position: relative;
+      .itemIcon {
+        background-color: rgb(56, 215, 146);
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        // background-color: rgb(211, 211, 211);
+        padding: 0.214286rem 0.857143rem 0.357143rem;
+        border-bottom-left-radius: 0.857143rem;
+        color: rgb(255, 255, 255);
+      }
+      .imgCon {
+        background-size: 100% 100% !important;
+        width: 100%;
+        height: 250px;
+      }
+      .bottomBtn {
+        width: 100%;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        font-size: 14px;
+        // color: aqua;
+        color: #44caff;
+        background: #f5f5f5;
+      }
+      .textShow {
+        width: 100%;
+        height: 190px;
+        // background: #44caff46;
+        position: absolute;
+        top: 20%;
+        right: 0px;
+        display: flex;
+        flex-direction: column;
+        .cityName {
+          width: 100%;
+          height: 40px;
+          text-align: center;
+          line-height: 40px;
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .dre {
+          width: 100%;
+          padding: 0 30px;
+          display: inline-block;
+          height: 150px;
+          white-space: normal;
+          display: -webkit-box; /* 必须设置，用于多行溢出 */
+          -webkit-box-orient: vertical; /* 设置盒子排列方向为垂直 */
+          -webkit-line-clamp: 6;
+          line-height: 24px; /* 限制显示的行数，例如显示 3 行 */
+          overflow: hidden; /* 隐藏超出的内容 */
+          // width: 200px; /* 设置容器宽度 */
+          color: #000;
+          text-align: center;
+        }
+      }
+    }
+    li:hover {
+      transform: scale(1.1);
+      // font-size: 25px;
+      .cityName {
+        font-size: 24px;
+      }
+    }
+  }
+}
+</style>