update

src/api/api.ts

@@ -42,6 +42,11 @@ const jtjs = {
     const res = await axios.$get(`/jtjs/gsjs`)
     return res;
   },
+  /**公司介绍-单数据 */
+  gsjsDetail: async (channel_id: number) => {
+    const res = await axios.$get(`/jtjs/gsjs/${channel_id}`)
+    return res;
+  },
   /**三产风貌 */
   scfm: async () => {
     const res = await axios.$get(`/jtjs/scfm`)
@@ -182,8 +187,8 @@ const xxgk = {
 }
 /**民意征集模块 */
 const myzj = {
-  rdhy: async () => {
-    const res = await axios.$get(`/myzj/list/rdhy`)
+  rdhy: async (query: object = {}) => {
+    const res = await axios.$get(`/myzj/list/rdhy`, query)
     return res;
   },
   rdhyDetail: async (content_id: string) => {
@@ -217,8 +222,8 @@ const gsxx = {
    * 管网压力: gwylz;
    * 采购价格信息发布: cgjgxxgbz 
    */
-  query: async (type: string, skip = 0, limit = 4) => {
-    const res = await axios.$get(`/gsxx/list/${type}`, { skip, limit })
+  query: async (type: string, query: object) => {
+    const res = await axios.$get(`/gsxx/list/${type}`, query)
     return res;
   },
   /**详情查询 */

src/views/win/introduceDetail.vue

@@ -6,11 +6,16 @@
         <menusIndex />
       </el-col>
       <el-col :span="24" class="bottom">
-        <el-col :span="24" class="zero"> title </el-col>
-        <el-col :span="24" class="zero"> content </el-col>
-      </el-col>
-      <el-col :span="24" class="foot">
-        <foot-index />
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '集团介绍', enTitle: 'Water supply information' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <gsjs-detail v-if="type === 'gsjs'"></gsjs-detail>
+          <scfm-detail v-else-if="type === 'scfm'"></scfm-detail>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
       </el-col>
     </el-col>
   </el-row>
@@ -21,24 +26,15 @@
 import menusIndex from '../../components/windows/menusIndex.vue'
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
-import { common } from '@/api/api'
+import gsjsDetail from './introduceParts/gsjsDetail.vue'
+import scfmDetail from './introduceParts/scfmDetail.vue'
 import { get } from 'lodash-es'
-import { ref, onMounted, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
-const data = ref()
-onMounted(() => {
-  init()
-})
-const channel_id = computed(() => {
-  return get(route, 'query.channel_id')
+const type = computed(() => {
+  return get(route, 'query.type')
 })
-const init = async () => {
-  const result = await common.channel(channel_id.value)
-  if (result.errcode == 0) {
-    data.value = get(result, 'data')
-  }
-}
 </script>
 <style scoped lang="scss">
 .introduce {
@@ -47,7 +43,7 @@ const init = async () => {
   .bigImage {
     height: 480px;
     overflow: hidden;
-    background-image: url('/brief5.png');
+    background-image: url('/water1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
@@ -65,7 +61,7 @@ const init = async () => {
     }
 
     .bottom {
-      height: calc(100vh - 350px);
+      height: calc(100vh - 66px);
       overflow-y: auto;
       margin: 0 auto;
 

src/views/win/introduceParts/fengmaoIndex.vue

@@ -25,22 +25,22 @@ const list = ref([
   {
     url: 'fengmao1.png',
     title: '长春市给水工程公司',
-    path: '/introduceDetail?channel_id=182',
+    path: '/introduceDetail?channel_id=182&type=scfm',
   },
   {
     url: 'fengmao2.png',
     title: '长春自来水公司水表厂',
-    path: '/introduceDetail?channel_id=183',
+    path: '/introduceDetail?channel_id=183&type=scfm',
   },
   {
     url: 'fengmao3.png',
     title: '长春市鸿浩建筑安装工程有限公司',
-    path: '/introduceDetail?channel_id=184',
+    path: '/introduceDetail?channel_id=184&type=scfm',
   },
   {
     url: 'fengmao4.png',
     title: '长春市鸿源机电设备安装有限公司',
-    path: '/introduceDetail?channel_id=185',
+    path: '/introduceDetail?channel_id=185&type=scfm',
   },
 ])
 const toOpen = (path: string) => {

src/views/win/introduceParts/gsjsDetail.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="tabs">
+        <el-col
+          :span="6"
+          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="tabChange(item)"
+        >
+          {{ item.title }}
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="infoList">
+        <p>{{ viewData.title }}</p>
+        <span v-html="viewData.txt"></span>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { get } from 'lodash-es'
+const tabList = ref([
+  {
+    id: '1',
+    title: '长春水务集团自来水有限公司',
+    channel_id: 177,
+  },
+  {
+    id: '2',
+    title: '长春水务集团源水有限责任公司',
+    channel_id: 178,
+  },
+  {
+    id: '3',
+    title: '长春水务集团城市排水有限责任公司',
+    channel_id: 179,
+  },
+  {
+    id: '4',
+    title: '长春市二次供水有限责任公司',
+    channel_id: 180,
+  },
+])
+const viewChannel = ref(197)
+const tabActive = ref('1')
+/* 选择 */
+const tabChange = (event: { id: string }) => {
+  tabActive.value = event.id
+  dealNowTag(event.id)
+}
+/**根据标签页id,处理显示内容 */
+const dealNowTag = (id: string) => {
+  const tab = tabList.value.find((f) => f.id == id)
+  if (!tab) return
+  const channel_id = get(tab, 'channel_id')
+  if (!channel_id) return
+  viewChannel.value = channel_id
+  toSearch()
+}
+import { jtjs } from '@/api/api'
+const viewData = ref({
+  channel_id: '',
+  title: '长春水务集团自来水有限公司',
+  txt: `<p>长春市自来水公司成立于1932年，1985年重新注册，2021年5月公司制改革更名为长春水务集团自来水有限公司,注册资金23亿元。公司设有11个机关部室，下辖17家单位。主营业务为自来水生产与供应，企业收入来源为水费收入，水价由政府制定。
+
+常规取水的水源地为石头口门水库、新立城水库。水库至水厂有3座取水和加压泵站、5座净水厂、12座市政管网中途加压站，源水管线8条共206公里，日输水能力154万立方米，日供水能力123万立方米，2022年，日均供水量101.7万立方米，供水面积约425平方公里，用水户数216.3万户,市政供水管网2541公里。
+
+机关部室：(1)综合办公室；(2)党群工作部；(3)人力资源部；(4)计划财务部；(5)生产管理部；(6)营销管理部；(7)用户发展办；(8)安全保卫部；(9)工程管理部；(10)技术质量部；(11)信息管理部。
+
+制水系统：(1)第一净水厂；(2)第二净水厂；(3)第三净水厂；(4)第四净水厂；(5)净水剂分公司。
+
+供水营销系统 ：(1)管网中心；(2)计量中心；(3)一汽分公司；(4)南关分公司；(5)朝阳分公司;(6)二道分公司；(7)宽城分公司；(8)绿园分公司；(9)经开分公司；（10）新区分公司；（11）净月分公司;(12)稽查大队。</p>`,
+})
+/* 查询 */
+const toSearch = async () => {
+  const result = await jtjs.gsjsDetail(viewChannel.value)
+  if (result.errcode == 0) {
+    const data = get(result, 'data.data', {})
+    if (Object.keys(data).length > 1) {
+      // 因为默认会带上channel_id,所以只有key大于2的时候才是有数据
+      viewData.value = data
+    }
+  }
+}
+import { useRoute } from 'vue-router'
+const route = useRoute()
+/* 初始化 */
+onMounted(() => {
+  const id: any = get(route, 'query.channel_id')
+  if (id) dealNowTag(id)
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  padding: 0 17%;
+
+  .info {
+    .tabs {
+      display: flex;
+      margin: 0 0 50px 0;
+
+      .tabList {
+        text-align: center;
+        color: rgb(102, 102, 102);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        letter-spacing: 0px;
+        border-bottom: 4px solid transparent;
+      }
+
+      .tabList:hover {
+        cursor: pointer;
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+
+      .tabActiveList {
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+    }
+
+    .infoList {
+      .list {
+        display: flex;
+        border-bottom: 1px solid rgb(217, 217, 217);
+        padding: 30px 0;
+
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+
+        .date {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
+
+      .list:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/views/win/popularwillParts/respondIndex.vue

@@ -1,145 +1,153 @@
 <template>
-      <el-col :span="24" class="info">
-            <el-col :span="24" class="infoList">
-                  <el-row :gutter="40" class="list" v-for="(item, index) in list" :key="index">
-                        <el-col :span="8" class="imgs">
-                              <el-image class="images" :src="item.url" />
-                        </el-col>
-                        <el-col :span="16" class="mess">
-                              <el-col :span="24" class="title">
-                                    {{ item.title }}
-                              </el-col>
-                              <el-col :span="24" class="brief">
-                                    {{ item.brief }}
-                              </el-col>
-                              <el-col :span="24" class="other">
-                                    <span>发布时间：<span>{{ item.pubilcDate }}</span></span>
-                                    <span>作者：<span>{{ item.person }}</span></span>
-                                    <span>来源：<span>{{ item.orgin }}</span></span>
-                                    <span>浏览次数：<span>{{ item.showNum }}</span></span>
-                              </el-col>
-                        </el-col>
-                  </el-row>
-            </el-col>
-            <el-col :span="24" class="foot">
-                  <pages-index :total="total" @search="toSearch" />
-
-            </el-col>
-      </el-col>
+  <el-col :span="24" class="info">
+    <el-col :span="24" class="infoList">
+      <el-row :gutter="40" class="list" v-for="(item, index) in list" :key="index">
+        <el-col :span="8" class="imgs">
+          <el-image class="images" :src="item.url" />
+        </el-col>
+        <el-col :span="16" class="mess">
+          <el-col :span="24" class="title">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="24" class="brief">
+            {{ item.brief }}
+          </el-col>
+          <el-col :span="24" class="other">
+            <span
+              >发布时间：<span>{{ item.pubilcDate }}</span></span
+            >
+            <span
+              >作者：<span>{{ item.person }}</span></span
+            >
+            <span
+              >来源：<span>{{ item.orgin }}</span></span
+            >
+            <span
+              >浏览次数：<span>{{ item.showNum }}</span></span
+            >
+          </el-col>
+        </el-col>
+      </el-row>
+    </el-col>
+    <el-col :span="24" class="foot">
+      <pages-index :total="total" @search="toSearch" />
+    </el-col>
+  </el-col>
 </template>
 
 <script setup lang="ts">
-
-import { ref } from "vue";
+import { ref } from 'vue'
 /* 分页 */
 import pagesIndex from '../../../components/windows/pagesIndex.vue'
 
-
 /* 列表 */
 const list = ref([
-      {
-            id: '1',
-            title: '为什么停水？',
-            brief: '停水会影响用户正常的生产生活，是广大用户十分关切的问题。那么哪些原因会造成停水呢？ 水从水源地到用户终端，除了要经过取水泵站、水厂净化处理、区域加压站加压、 二次供水泵站加压等过程，还要经过源水管线、 市政供水管网、二次供水管网等不同尺寸的管道长距离',
-            pubilcDate: '2024-12-12 12:12:12',
-            person: '作者',
-            orgin: '本站编辑',
-            showNum: '2',
-            url: 'poll1.png'
-      },
-      {
-            id: '1',
-            title: '为什么停水？',
-            brief: '停水会影响用户正常的生产生活，是广大用户十分关切的问题。那么哪些原因会造成停水呢？ 水从水源地到用户终端，除了要经过取水泵站、水厂净化处理、区域加压站加压、 二次供水泵站加压等过程，还要经过源水管线、 市政供水管网、二次供水管网等不同尺寸的管道长距离',
-            pubilcDate: '2024-12-12 12:12:12',
-            person: '作者',
-            orgin: '本站编辑',
-            showNum: '2',
-            url: 'poll1.png'
-
-      }
+  {
+    id: '1',
+    title: '为什么停水？',
+    brief:
+      '停水会影响用户正常的生产生活，是广大用户十分关切的问题。那么哪些原因会造成停水呢？ 水从水源地到用户终端，除了要经过取水泵站、水厂净化处理、区域加压站加压、 二次供水泵站加压等过程，还要经过源水管线、 市政供水管网、二次供水管网等不同尺寸的管道长距离',
+    pubilcDate: '2024-12-12 12:12:12',
+    person: '作者',
+    orgin: '本站编辑',
+    showNum: '2',
+    url: 'poll1.png',
+  },
+  {
+    id: '1',
+    title: '为什么停水？',
+    brief:
+      '停水会影响用户正常的生产生活，是广大用户十分关切的问题。那么哪些原因会造成停水呢？ 水从水源地到用户终端，除了要经过取水泵站、水厂净化处理、区域加压站加压、 二次供水泵站加压等过程，还要经过源水管线、 市政供水管网、二次供水管网等不同尺寸的管道长距离',
+    pubilcDate: '2024-12-12 12:12:12',
+    person: '作者',
+    orgin: '本站编辑',
+    showNum: '2',
+    url: 'poll1.png',
+  },
 ])
 const total = ref(0)
-
-
+import { myzj } from '@/api/api'
+import { get } from 'lodash-es';
 /* 查询列表 */
-const toSearch = ({ skip = 0, limit = 10, ...info } = {}) => {
-      console.log(skip, limit);
-      console.log(info);
+const toSearch = async ({ skip = 0, limit = 10, ...info } = {}) => {
+  console.log(skip, limit)
+  console.log(info)
+  const result = await myzj.rdhy({ skip, limit, ...info })
+  if (result.errcode == 0) {
+    const resultList = get(result, 'data.data', [])
+    const resultTotal = get(result, 'data.total', 0)
+    if (resultList.length > 0) {
+      list.value = resultList
+      total.value = resultTotal
+    }
+  }
 }
-
 </script>
 <style scoped lang="scss">
 .info {
-      .infoList {
-            .list {
-                  margin: 0 0 20px 0;
-
-                  .imgs {
-                        height: 230px;
-                        border-radius: 5px;
-
-                        .images {
-                              width: 100%;
-                              height: 230px;
-                              border-radius: 5px;
-
-                        }
-                  }
-
-                  .mess {
-
-                        .title {
-                              color: rgb(25, 25, 26);
-                              font-family: '黑体';
-                              font-size: 24px;
-                              font-weight: 500;
-                              line-height: 35px;
-                              letter-spacing: 0px;
-                              margin: 0 0 30px 0;
-                        }
-
-                        .brief {
-                              color: rgb(102, 102, 102);
-                              font-family: '黑体';
-                              font-size: 18px;
-                              font-weight: 400;
-                              line-height: 32px;
-                              letter-spacing: 0px;
-
-                              margin: 0 0 30px 0;
-
-
-                              overflow: hidden;
-                              text-overflow: ellipsis;
-                              -webkit-line-clamp: 3;
-                              word-break: break-all;
-                              display: -webkit-box;
-                              -webkit-box-orient: vertical;
-                        }
-
-                        .other {
-
-
-                              span {
-                                    display: inline-block;
-                                    margin: 0 10px 0 0;
-
-                                    font-family: '黑体';
-                                    font-size: 18px;
-                                    font-weight: 400;
-                                    line-height: 32px;
-                                    letter-spacing: 0px;
-                                    color: #666666;
-
-                                    span {
-                                          color: #000000;
+  .infoList {
+    .list {
+      margin: 0 0 20px 0;
+
+      .imgs {
+        height: 230px;
+        border-radius: 5px;
+
+        .images {
+          width: 100%;
+          height: 230px;
+          border-radius: 5px;
+        }
+      }
 
-                                    }
-                              }
-                        }
-                  }
+      .mess {
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          margin: 0 0 30px 0;
+        }
+
+        .brief {
+          color: rgb(102, 102, 102);
+          font-family: '黑体';
+          font-size: 18px;
+          font-weight: 400;
+          line-height: 32px;
+          letter-spacing: 0px;
+
+          margin: 0 0 30px 0;
+
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 3;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+
+        .other {
+          span {
+            display: inline-block;
+            margin: 0 10px 0 0;
+
+            font-family: '黑体';
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 32px;
+            letter-spacing: 0px;
+            color: #666666;
+
+            span {
+              color: #000000;
             }
+          }
+        }
       }
+    }
+  }
 }
 </style>

src/views/win/watersupplyIndex.vue

@@ -1,24 +1,23 @@
 <template>
-      <el-row class="watersupply">
-            <el-col :span="24" class="bigImage"></el-col>
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="menus">
-                        <menusIndex />
-                  </el-col>
-                  <el-col :span="24" class="bottom">
-                        <el-col :span="24" class="zero top">
-                              <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
-                        </el-col>
-                        <el-col :span="24" class="zero">
-                              <list-index />
-                        </el-col>
-                        <el-col :span="24" class="foot">
-                              <foot-index />
-                        </el-col>
-                  </el-col>
-            </el-col>
-      </el-row>
-
+  <el-row class="watersupply">
+    <el-col :span="24" class="bigImage"></el-col>
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="menus">
+        <menusIndex />
+      </el-col>
+      <el-col :span="24" class="bottom">
+        <el-col :span="24" class="zero top">
+          <top-index :info="{ title: '供水信息', enTitle: 'Water supply information' }" />
+        </el-col>
+        <el-col :span="24" class="zero">
+          <list-index />
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot-index />
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
@@ -32,52 +31,46 @@ import topIndex from '../../components/windows/topIndex.vue'
 /* 新闻 */
 import listIndex from './watersupplyParts/listIndex.vue'
 
-
-
 /* 底部信息 */
 import footIndex from '../../components/windows/footIndex.vue'
 </script>
 <style scoped lang="scss">
 .watersupply {
-      position: relative;
-
-      .bigImage {
-            height: 480px;
-            overflow: hidden;
-            background-image: url('/water1.png');
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
+  position: relative;
+
+  .bigImage {
+    height: 480px;
+    overflow: hidden;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .info {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    .menus {
+      height: 66px;
+      overflow: hidden;
+    }
+
+    .bottom {
+      height: calc(100vh - 66px);
+      overflow-y: auto;
+      margin: 0 auto;
+
+      .zero {
+        margin: 0 0 40px 0;
       }
 
-      .info {
-            position: absolute;
-            top: 0;
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-
-            .menus {
-                  height: 66px;
-                  overflow: hidden;
-            }
-
-            .bottom {
-                  height: calc(100vh - 66px);
-                  overflow-y: auto;
-                  margin: 0 auto;
-
-
-                  .zero {
-                        margin: 0 0 40px 0;
-
-                  }
-
-                  .top {
-                        padding: 0 17%;
-                  }
-
-            }
+      .top {
+        padding: 0 17%;
       }
-
+    }
+  }
 }
 </style>

src/views/win/watersupplyParts/listIndex.vue

@@ -1,182 +1,228 @@
 <template>
-      <el-row class="main animate__animated animate__backInLeft">
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="tabs">
-                        <el-col :span="3" :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
-                              v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">
-                              {{ item.title }}
-                        </el-col>
-                  </el-col>
-                  <el-col :span="24" class="infoList">
-                        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
-                              <el-col :span="20" class="title textOver">
-                                    {{ item.title }}
-                              </el-col>
-                              <el-col :span="4" class="date">
-                                    {{ item.date }}
-                              </el-col>
-                        </el-col>
-                  </el-col>
-                  <el-col :span="24" class="pages">
-                        <pages-index :total="total" @search="toSearch" />
-                  </el-col>
+  <el-row class="main animate__animated animate__backInLeft">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="tabs">
+        <el-col
+          :span="3"
+          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="tabChange(item)"
+        >
+          {{ item.title }}
+        </el-col>
+      </el-col>
+      <el-col :span="24" v-if="tabActive == '6'">
+        <!-- TODO:网上缴费组件 -->
+        <online-pay></online-pay>
+      </el-col>
+      <el-col :span="24" v-else-if="tabActive == '7'">
+        <!-- 网上办事大厅是跳转走的.不需要显示内容 -->
+      </el-col>
+      <template v-else>
+        <el-col :span="24" class="infoList">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="20" class="title textOver">
+              {{ item.title }}
             </el-col>
-      </el-row>
+            <el-col :span="4" class="date">
+              {{ item.date }}
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="pages">
+          <pages-index :total="total" @search="toSearch" />
+        </el-col>
+      </template>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
-
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-
 /* 分页 */
 import pagesIndex from '../../../components/windows/pagesIndex.vue'
+import onlinePay from './onlinePay.vue'
+import { get } from 'lodash-es'
 
 const tabList = ref([
-      {
-            id: '1',
-            title: '水务情况'
-      },
-      {
-            id: '2',
-            title: '水质报告'
-      },
-      {
-            id: '3',
-            title: '停水信息'
-      },
-      {
-            id: '4',
-            title: '管网压力'
-      },
-      {
-            id: '5',
-            title: '长水e办'
-      },
-      {
-            id: '6',
-            title: '网上缴费'
-      },
-      {
-            id: '7',
-            title: '网上办事大厅'
-      },
-      {
-            id: '8',
-            title: '采购价格信息公布'
-      }
+  {
+    id: '1',
+    title: '水务情况',
+    type: 'swggz',
+  },
+  {
+    id: '2',
+    title: '水质报告',
+    type: 'szbgz',
+  },
+  {
+    id: '3',
+    title: '停水信息',
+    type: 'tsxxz',
+  },
+  {
+    id: '4',
+    title: '管网压力',
+    type: 'gwylz',
+  },
+  {
+    id: '5',
+    title: '长水e办',
+    type: 'toLogin',
+  },
+  {
+    id: '6',
+    title: '网上缴费',
+    type: 'showView',
+  },
+  {
+    id: '7',
+    title: '网上办事大厅',
+    type: 'gov',
+  },
+  {
+    id: '8',
+    title: '采购价格信息公布',
+    type: 'cgjgxxgbz',
+  },
 ])
 const tabActive = ref('1')
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const list = ref<any[]>([
-      {
-            id: '1',
-            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
-            date: '2024-12-24',
-      },
-      {
-            id: '2',
-            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
-            date: '2024-12-24',
-      },
-      {
-            id: '3',
-            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
-            date: '2024-12-24',
-      },
-      {
-            id: '4',
-            title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
-            date: '2024-12-24',
-      }
+  {
+    id: '1',
+    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+    date: '2024-12-24',
+  },
+  {
+    id: '2',
+    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+    date: '2024-12-24',
+  },
+  {
+    id: '3',
+    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+    date: '2024-12-24',
+  },
+  {
+    id: '4',
+    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
+    date: '2024-12-24',
+  },
 ])
 const total = ref(40)
 
-
 /* 选择 */
 const tabChange = (event: { id: string }) => {
-      tabActive.value = event.id
+  tabActive.value = event.id
+  dealNowTag(event.id)
 }
-
+/**根据标签页id,处理显示内容 */
+const dealNowTag = (id: string) => {
+  const tab = tabList.value.find((f) => f.id == id)
+  if (!tab) return
+  const type = get(tab, 'type')
+  if (!type) return
+  if (type == 'toLogin') {
+    // TODO:跳转至登录
+  } else if (type == 'gov') {
+    // 跳转到吉林省政府平台
+    window.location.href = 'https://zwfw.jl.gov.cn/jlszwfw/'
+  } else if (type == 'showView') {
+    // 切换到网上办事大厅组件,不用做什么
+  } else {
+    // 剩下的都是列表查询
+    viewType.value = type
+    toSearch()
+  }
+}
+const viewType = ref('swggz')
+import { gsxx } from '@/api/api'
 /* 查询 */
 const toSearch = async ({ skip = 0, limit = 10, ...info } = {}) => {
-      console.log(skip, limit);
-      console.log(info);
+  const result = await gsxx.query(viewType.value, { skip, limit, ...info })
+  if (result.errcode == 0) {
+    const resultList = get(result, 'data.data', [])
+    const resultTotal = get(result, 'data.total', 0)
+    if (resultList.length > 0) {
+      list.value = resultList
+      total.value = resultTotal
+    }
+  }
 }
+import { useRoute } from 'vue-router'
+const route = useRoute()
 /* 初始化 */
 onMounted(() => {
-      toSearch()
+  const id: any = get(route, 'query.tag')
+  if (id) dealNowTag(id)
 })
 </script>
 <style scoped lang="scss">
 .main {
-      padding: 0 17%;
-
-      .info {
-            .tabs {
-                  display: flex;
-                  margin: 0 0 50px 0;
-
-                  .tabList {
-                        text-align: center;
-                        color: rgb(102, 102, 102);
-                        font-family: '黑体';
-                        font-size: 18px;
-                        font-weight: 500;
-                        line-height: 26px;
-                        letter-spacing: 0px;
-                        border-bottom: 4px solid transparent;
-                  }
-
-                  .tabList:hover {
-                        cursor: pointer;
-                        color: rgb(25, 25, 26);
-                        border-bottom: 4px solid rgb(21, 134, 255);
-                  }
-
-                  .tabActiveList {
-                        color: rgb(25, 25, 26);
-                        border-bottom: 4px solid rgb(21, 134, 255);
-
-                  }
-            }
-
-            .infoList {
-
-                  .list {
-                        display: flex;
-                        border-bottom: 1px solid rgb(217, 217, 217);
-                        padding: 30px 0;
-
-                        .title {
-                              color: rgb(25, 25, 26);
-                              font-family: '黑体';
-                              font-size: 24px;
-                              font-weight: 500;
-                              line-height: 35px;
-                              letter-spacing: 0px;
-                              text-align: left;
-                        }
-
-                        .date {
-                              color: rgb(25, 25, 26);
-                              font-family: '黑体';
-                              font-size: 24px;
-                              font-weight: 500;
-                              line-height: 32px;
-                              letter-spacing: 0px;
-                              text-align: left;
-                        }
-
+  padding: 0 17%;
+
+  .info {
+    .tabs {
+      display: flex;
+      margin: 0 0 50px 0;
+
+      .tabList {
+        text-align: center;
+        color: rgb(102, 102, 102);
+        font-family: '黑体';
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        letter-spacing: 0px;
+        border-bottom: 4px solid transparent;
+      }
 
-                  }
+      .tabList:hover {
+        cursor: pointer;
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
 
-                  .list:last-child {
-                        border-bottom: none;
-                  }
+      .tabActiveList {
+        color: rgb(25, 25, 26);
+        border-bottom: 4px solid rgb(21, 134, 255);
+      }
+    }
+
+    .infoList {
+      .list {
+        display: flex;
+        border-bottom: 1px solid rgb(217, 217, 217);
+        padding: 30px 0;
+
+        .title {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 35px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+
+        .date {
+          color: rgb(25, 25, 26);
+          font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
 
-            }
+      .list:last-child {
+        border-bottom: none;
       }
+    }
+  }
 }
 </style>

src/views/win/watersupplyParts/onlinePay.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="onlinePay">
+    <p>onlinePay</p>
+  </div>
+</template>
+
+<script setup></script>
+<style scoped></style>