From 399355bd63d6923be9657525dad4af8db1fb615f Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Fri, 4 Nov 2022 18:29:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue  | 299 ++++----
 .../views/home/components/KnowledgeBase.vue   | 647 ++++++++++++------
 .../views/home/components/dataResource.vue    | 248 +++++++
 3 files changed, 878 insertions(+), 316 deletions(-)
 create mode 100644 front/src/views/home/components/dataResource.vue

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 41751eed..18ec9663 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -8,7 +8,183 @@
     <div class="details-pageconetent-left" v-else>
       <detailsPageInfrastructureTree v-show="flag != '6'" />
     </div>
-    <div class="top" v-if="Cardsname != '云网资源' && Cardsname != '视频资源'">
+  
+   
+    <div class="top" v-if="Cardsname === '数据资源'">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources2"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全文检索
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+      <dataResource
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></dataResource>
+    </div>
+    <div class="top" v-else-if="Cardsname === '云网资源'">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources2"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全文检索
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
+    </div>
+    <div class="top" v-else-if="Cardsname === '视频资源'">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources2"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全文检索
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+      <div class="top-content-father">
+        <infrastructurePage
+          ref="camera"
+          @add="handleAdd"
+          :searchValue="searchValue"
+        />
+      </div>
+    </div>
+    <div class="top" v-else>
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
@@ -153,123 +329,6 @@
         <a-empty />
       </div>
     </div>
-    <div class="top" v-else-if="Cardsname === '视频资源'">
-      <div class="resultListSearchInput-father">
-        <div class="resultListSearchInput-son">
-          模糊搜索
-          <a-input-search
-            v-model:value="searchValue"
-            placeholder="请输入关键词"
-            enter-button="搜索"
-            size="large"
-            @search="getAppResources2"
-            @change="onSearch"
-            class="resultListSearchInput"
-          />
-          <button class="button-reset" @click="chongzhi()">重置</button>
-          <button
-            class="button-reset"
-            style="margin-left: 0.1rem"
-            @click="globalSearch()"
-          >
-            全文检索
-          </button>
-          <div class="hengxian" style="background: transparent"></div>
-        </div>
-      </div>
-      <div class="top-title">
-        <div
-          v-for="item in titleName"
-          :key="item.name"
-          :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)"
-        >
-          <span
-            class="photo"
-            :style="{
-              backgroundImage: `url(${item.photo}) `,
-              backgroundSize: 'cover',
-            }"
-          ></span>
-          <span v-if="globalData.data.length > 0">
-            {{
-              item.name +
-              '(' +
-              (globalData.data.filter((val) => val.type === item.name)[0]
-                .count || '0') +
-              ')'
-            }}
-          </span>
-          <span v-else>
-            {{ item.name }}
-          </span>
-        </div>
-      </div>
-      <div class="top-content-father">
-        <infrastructurePage
-          ref="camera"
-          @add="handleAdd"
-          :searchValue="searchValue"
-        />
-      </div>
-    </div>
-    <div class="top" v-else>
-      <div class="resultListSearchInput-father">
-        <div class="resultListSearchInput-son">
-          模糊搜索
-          <a-input-search
-            v-model:value="searchValue"
-            placeholder="请输入关键词"
-            enter-button="搜索"
-            size="large"
-            @search="getAppResources2"
-            @change="onSearch"
-            class="resultListSearchInput"
-          />
-          <button class="button-reset" @click="chongzhi()">重置</button>
-          <button
-            class="button-reset"
-            style="margin-left: 0.1rem"
-            @click="globalSearch()"
-          >
-            全文检索
-          </button>
-          <div class="hengxian" style="background: transparent"></div>
-        </div>
-      </div>
-      <div class="top-title">
-        <div
-          v-for="item in titleName"
-          :key="item.name"
-          :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)"
-        >
-          <span
-            class="photo"
-            :style="{
-              backgroundImage: `url(${item.photo}) `,
-              backgroundSize: 'cover',
-            }"
-          ></span>
-          <span v-if="globalData.data.length > 0">
-            {{
-              item.name +
-              '(' +
-              (globalData.data.filter((val) => val.type === item.name)[0]
-                .count || '0') +
-              ')'
-            }}
-          </span>
-          <span v-else>
-            {{ item.name }}
-          </span>
-        </div>
-      </div>
-      <KnowledgeBase
-        :resourceList="resourceList"
-        :resourceTotal="resourceTotal"
-      ></KnowledgeBase>
-    </div>
     <div class="talk-monitor" @click="openMonitor">
       <a-tooltip>
         <template #title>问答机器人</template>
@@ -501,7 +560,7 @@
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
-    <div class="top" v-if="Cardsname != '云网资源' && Cardsname != '数据资源'">
+    <div class="top" v-if="Cardsname != '云网资源' && Cardsname != '视频资源'" >
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -732,6 +791,7 @@
   import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
   import searchResultList from '@/views/home/components/searchResultList.vue'
   import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
+  import dataResource from '@/views/home/components/dataResource.vue'
   // 数据资源引用
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
   // 视频资源引用
@@ -1848,6 +1908,7 @@
       searchResultList,
       UpOutlined,
       DownOutlined,
+      dataResource,
       KnowledgeBase,
       DetailsPageResource,
       infrastructurePage,
diff --git a/front/src/views/home/components/KnowledgeBase.vue b/front/src/views/home/components/KnowledgeBase.vue
index 74842d04..89514996 100644
--- a/front/src/views/home/components/KnowledgeBase.vue
+++ b/front/src/views/home/components/KnowledgeBase.vue
@@ -1,213 +1,466 @@
 <template>
-  <div class="knowledge-base">
-    <div class="zskTag">
-      <span class="type">文件类型</span>
-      <a-checkable-tag
-        :checked="zskState.szkSelectedTags.indexOf(tag) > -1"
-        v-for="tag in zskState.zskTags"
-        :key="tag"
-        @change="(checked) => zskHandleChange(tag, checked)"
+  <div>
+    <div class="second-title">
+      <div
+        style="margin-right: 30px"
+        :class="[choose === 1 ? 'departmentStyle' : 'departmentStyle1']"
+        @click="handleChose(1)"
       >
-        {{ tag }}
-      </a-checkable-tag>
-    </div>
-    <div class="top">
-      <!-- <div class="left">昨日新增 {{ yNo }}条，本月新增 {{ mNo }}条</div> -->
-      <div class="left">
-        检索结果
-        <span>{{ props.resourceTotal }}</span>
-        条
+        云资源
+      </div>
+      <div
+        :class="[choose === 2 ? 'departmentStyle' : 'departmentStyle1']"
+        @click="handleChose(2)"
+      >
+        网络资源
       </div>
-      <div class="right">发布时间</div>
     </div>
-    <div class="bottom">
-      <a-list size="large" :data-source="props.resourceList.data">
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <div class="left">
-              <div class="text" @click="openHref(item)">
-                {{ item.name }}
-              </div>
-            </div>
-            <div class="right">
-              <div class="time">{{ item.createDate }}</div>
-            </div>
-          </a-list-item>
-        </template>
-        <template #footer>
-          <a-pagination
+    <div v-if="choose === 1" class="mod-ability__bsabilityai">
+     
+      <el-table
+        :data="dataList1"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%"
+        height="650px"
+      >
+        <el-table-column
+          prop="a"
+          label="项目名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="b"
+          label="主机名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="c"
+          label="用途"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="d"
+          label="网络区域"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="e"
+          label="配置"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="f"
+          label="系统盘"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="g"
+          label="数据盘"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+      
+      </el-table>
+      <a-pagination
             v-model:current="current"
-            :pageSize="5"
-            :total="props.resourceTotal"
-            show-less-items
-            @change="handleCurrentChange"
-            :showSizeChanger="false"
+            :pageSize="10"
+            :total="10"
+            
+          />
+    </div>
+    <div v-if="choose === 2" class="mod-ability__bsabilityai">
+      
+      <el-table
+        :data="dataList2"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%"
+        height="650px"
+      >
+        <el-table-column
+          prop="a"
+          label="项目名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="b"
+          label="网络名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="c"
+          label="用途"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="d"
+          label="网络区域"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="e"
+          label="网络类型"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="f"
+          label="宽带峰值"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="g"
+          label="IP"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        
+      </el-table>
+      <a-pagination
+            v-model:current="current"
+            :pageSize="10"
+            :total="10"
+            
           />
-        </template>
-      </a-list>
     </div>
   </div>
 </template>
-<script setup>
-  import { ref, reactive, defineProps } from 'vue'
-  import mybus from '@/myplugins/mybus'
-  import { updateVisits, browsingInsert } from '@/api/home'
-  const props = defineProps({
-    resourceList: { type: Array, default: null },
-    resourceTotal: { type: String, default: '' },
-  })
-  console.log('props==========>', props)
-  // 知识库
-  const zskState = reactive({
-    zskTags: ['全部', '政策文件', '政策解读', '新闻发布会', '政府公报'],
-    szkSelectedTags: ['全部'],
-  })
-  const current = ref(1)
-  const openHref = (item) => {
-    console.log(item.id, 'wowowo')
-    console.log(item.visits, 'wowowo')
-    browsingInsert({ resourceId: item.id }).then((res) => {
-      // console.log(res)
-    })
-    const arrList = ref([])
-    arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-    if (arrList.value.indexOf(item.id) === -1) {
-      arrList.value.push(item.id)
-      updateVisits({
-        id: item.id,
-        visits: item.visits || '0',
-      }).then(() => {
-        window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
-      })
-    }
-    window.open(item.link)
-    // window.open(
-    //   window.SITE_CONFIG.previewUrl +
-    //     'hisense_office/onlinePreview?url=' +
-    //     btoa(encodeURI(item.fileHref))
-    // )
-  }
-  const zskHandleChange = (tag, checked) => {
-    console.log(tag, checked)
-    current.value = 1
-    if (tag !== '全部') {
-      mybus.emit('changeInfo', { attrType: '文件类型', attrValue: tag })
-    } else {
-      mybus.emit('changeInfo')
-    }
-    zskState.szkSelectedTags = [tag]
-  }
+<script>
+  export default {
 
-  const handleCurrentChange = (val) => {
-    current.value = val
-    mybus.emit('changePage', val)
-  }
+  data() {
+    return {
+      current:1,
+      yunaddForm: {
+        a: "",
+        b: "",
+        c: "",
+        d: "",
+        e: "",
+        f: "",
+        g:"",
+      },
+      wangaddForm:{
+        a: "",
+        b: "",
+        c: "",
+        d: "",
+        e: "",
+        f: "",
+        g: "",
+      },
+      total: 10,
+      choose: 1,
+      yunshow: false,
+      wangshow:false,
+      dataList1: [
+      {
+            "a": "数字底座",
+            "b": "数字底座数据库服务器",
+            "c": "数据库服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:8核；内存:15G",
+            "f": "50G",
+            "g": "150G"
+        },
+        {
+            "a": "数字底座",
+            "b": "数字底座应用服务器",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:8核；内存:16G",
+            "f": "30G",
+            "g": "100G"
+        },
+        {
+            "a": "数字底座",
+            "b": "算法仓01服务器",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:8核；内存:15G",
+            "f": "40G",
+            "g": "170G"
+        },
+        {
+            "a": "数字底座",
+            "b": "算法仓02服务器",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:16核；内存:32G",
+            "f": "80G",
+            "g": "600G"
+        },
+        {
+            "a": "数字底座",
+            "b": "算法仓03服务器",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:32核；内存:64G",
+            "f": "120G",
+            "g": "1024G"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "一体化api服务器2",
+            "c": "应用服务器",
+            "d": "金宏网",
+            "e": "CPU:2核；内存:4G",
+            "f": "150G",
+            "g": "400G"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "一体化api服务器1",
+            "c": "应用服务器",
+            "d": "金宏网",
+            "e": "CPU:1核；内存:2G",
+            "f": "130G",
+            "g": "200G"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "一体化管理节点服务器1",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:8核；内存:16G",
+            "f": "200G",
+            "g": "600G"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "一体化管理节点服务器2",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:4核；内存:8G",
+            "f": "50G",
+            "g": "500G"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "一体化管理节点服务器3",
+            "c": "应用服务器",
+            "d": "政务外网公共服务域",
+            "e": "CPU:16核；内存:32G",
+            "f": "160G",
+            "g": "500G"
+        }
+      ],
+      dataList2: [
+      {
+            "a": "数字底座",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1600MB/s",
+            "g": "15.72.183.90"
+        },
+        {
+            "a": "数字底座",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "2100MB/s",
+            "g": "15.72.183.91"
+        },
+        {
+            "a": "填报系统",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "800MB/s",
+            "g": "15.72.184.9"
+        },
+        {
+            "a": "领导驾驶舱",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1600MB/s",
+            "g": "15.72.184.10"
+        },
+        {
+            "a": "区市指挥室",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1200MB/s",
+            "g": "15.72.184.11"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1200MB/s",
+            "g": "15.72.184.12"
+        },
+        {
+            "a": "消防一览",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1064MB/s",
+            "g": "15.72.182.107"
+        },
+        {
+            "a": "政务云系统",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1200MB/s",
+            "g": "15.72.182.108"
+        },
+        {
+            "a": "数字监控平台",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "1064MB/s",
+            "g": "15.72.182.109"
+        },
+        {
+            "a": "应急一体化综合指挥平台",
+            "b": "金宏网",
+            "c": "",
+            "d": "内网",
+            "e": "专线",
+            "f": "800MB/s",
+            "g": "15.72.182.110"
+        }
+      ],
+      dataForm: {
+        name: "",
+      },
+    };
+  },
+  watch: {},
+  components: {},
+  created() {},
+  mounted() {},
+  methods: {
+    handleChose(index) {
+      this.choose = index;
+    },
+    reset() {},
+    query() {},
+    //云资源新增
+    yunadd(type,row) {
+      if(type=='add'){
+        this.yunaddForm.a="" 
+        this.yunaddForm.b=""
+        this.yunaddForm.c=""
+        this.yunaddForm.d=""
+        this.yunaddForm.e=""
+        this.yunaddForm.f=""
+        this.yunaddForm.g=""
+      }else{
+        this.yunaddForm.a=row.a
+        this.yunaddForm.b=row.b
+        this.yunaddForm.c=row.c
+        this.yunaddForm.d=row.d
+        this.yunaddForm.e=row.e
+        this.yunaddForm.f=row.f
+        this.yunaddForm.g=row.g
+      }
+      this.yunshow = true;
+    },
+    //网资源新增
+    wangadd(type,row) {
+      if(type=='add'){
+        this.wangaddForm.a="" 
+        this.wangaddForm.b=""
+        this.wangaddForm.c=""
+        this.wangaddForm.d=""
+        this.wangaddForm.e=""
+        this.wangaddForm.f=""
+        this.wangaddForm.g=""
+      }else{
+        this.wangaddForm.a=row.a
+        this.wangaddForm.b=row.b
+        this.wangaddForm.c=row.c
+        this.wangaddForm.d=row.d
+        this.wangaddForm.e=row.e
+        this.wangaddForm.f=row.f
+        this.wangaddForm.g=row.g
+      }
+      this.wangshow = true;
+    },
+ 
+  
+
+  },
+};
 </script>
 <style lang="less" scoped>
-  .knowledge-base {
-    .resultListSearchInput {
-      :deep(.ant-input) {
-        width: 400px;
-        height: 36px;
-        background: #f5f5f5;
-        border-radius: 4px;
-      }
-      :deep(.ant-input-search-button) {
-        width: 80px;
-        height: 36px;
-        background: #0087ff;
-        border-radius: 4px !important;
-        font-size: 14px;
-        font-weight: 400;
-        color: #fff;
-        line-height: 34px;
-        margin-left: 10px;
-      }
-      :deep(.ant-input-group-addon) {
-        left: 0 !important;
-      }
-    }
-    .button-reset {
-      border: 0;
-      outline: none;
-      width: 80px;
-      height: 36px;
-      background: #e1edfa;
-      border-radius: 4px;
-      font-size: 14px;
-      font-weight: 400;
-      color: #0087ff;
-      line-height: 34px;
-      margin-left: 250px;
-      cursor: pointer;
-    }
-    .zskTag {
-      margin: 20px 10px;
-      // display: flex;
-      // justify-content: center;
-      border-top: 1px solid #eee;
-      padding-top: 20px;
-      .type {
-        padding: 0 10px 0 0;
-        font-size: 18px;
-        font-weight: 600;
-        border-right: 1px solid #eee;
-      }
-      .ant-tag {
-        font-size: 18px;
-        padding: 5px;
-        margin-left: 10px;
-      }
-      .ant-tag-checkable-checked {
-        background: #e5eefc;
-        color: #3971e5;
-      }
-    }
-    .top {
-      display: flex;
-      justify-content: space-between;
-      border-top: 1px solid #eee;
-      margin: 10px 0;
-      padding: 30px 10px 0;
-      span {
-        color: #0058e1;
-        font-weight: 600;
-      }
-    }
-    :deep(.ant-list-bordered) {
-      border: none;
-      .ant-list-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: #eee;
-        border: 1px solid #ddd;
-        border-bottom: none;
-        .left {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          svg {
-            margin-right: 5px;
-          }
-          .text {
-            font-size: 16px;
-            cursor: pointer;
-            &:hover {
-              color: #0087ff;
-            }
-          }
-        }
-      }
-      .ant-list-footer {
-        border-top: 1px solid #ddd;
-      }
+ .status_change {
+  ::v-deep  .el-dialog__header{
+    background-color:#0058e1;
+    padding: 10px 10px 10px;
+    .el-dialog__title,.el-dialog__headerbtn i{
+      color: white;
     }
+    
   }
-  :deep(.ant-list-item:nth-child(odd)) {
-    background: #f7f7f7 !important;
-  }
-  :deep(.ant-list-item:nth-child(even)) {
-    background: #fff !important;
+  .dialog-footer{
+    text-align: center;
   }
+}
+.form-minwidth-style {
+  width: 600px;
+}
+.second-title {
+  border-radius: 2px;
+  margin-top: 10px;
+  margin-bottom: 22px;
+  font-size: 18px;
+  cursor: pointer;
+  text-align: center;
+  background: #ebe5e5;
+  width: 200px;
+  height: 30px;
+  line-height: 30px;
+  display: table;
+}
+
+.departmentStyle {
+  display: table-cell;
+  width: 50%;
+  color: #fff;
+  background-color: #0058e1;
+  font-weight: bolder;
+}
+.departmentStyle1 {
+  display: table-cell;
+  width: 50%;
+}
+.el-tooltip__popper {
+  max-width: 50%;
+}
+// ::v-deep .el-table .cell {
+//   width: 200px;
+// }
+::v-deep .el-upload-list__item-name {
+  width: 400px;
+}
 </style>
diff --git a/front/src/views/home/components/dataResource.vue b/front/src/views/home/components/dataResource.vue
new file mode 100644
index 00000000..b5b861e8
--- /dev/null
+++ b/front/src/views/home/components/dataResource.vue
@@ -0,0 +1,248 @@
+<!-- 数据资源目录编制      /bscatalogue/dataResources -->
+<template>
+    <div>
+     <div  class="mod-ability__bsabilityai">
+       
+       <el-table
+         :data="dataList1"
+         border
+         @selection-change="dataListSelectionChangeHandle"
+         style="width: 100%"
+         height="650px"
+       >
+         <el-table-column
+           prop="a"
+           label="数据名称"
+           header-align="center"
+           align="center"
+         ></el-table-column>
+         <el-table-column
+           prop="b"
+           label="数据代码"
+           header-align="center"
+           align="center"
+         ></el-table-column>
+         <el-table-column
+           prop="c"
+           label="能力描述"
+           header-align="center"
+           align="center"
+         ></el-table-column>
+         <el-table-column
+           prop="d"
+           label="归属部门"
+           header-align="center"
+           align="center"
+         ></el-table-column>
+         <el-table-column
+           prop="e"
+           label="注册者"
+           header-align="center"
+           align="center"
+         ></el-table-column>
+         
+       
+       </el-table>
+       <a-pagination
+             v-model:current="current"
+             :pageSize="10"
+             :total="10"
+             
+           />
+     </div>
+  </div>
+  </template>
+  
+  <script>
+  
+  
+  
+  export default {
+   
+   data () {
+     return {
+       current:1,
+       yunaddForm: {
+         a: "",
+         b: "",
+         c: "",
+         d: "",
+         e: "",
+         f: "",
+         g:"",
+         h:"",
+         i:"",
+         j:"",
+       },
+      
+       total: 10,
+       choose: 1,
+       yunshow: false,
+       wangshow:false,
+       dataList1: [
+         {
+             "a": "供水营业网点信息",
+             "b": "307013109015000204",
+             "c": "供水营业网点信息",
+             "d": "西海岸新区城市管理局（区水务局）",
+             "e": "张虎"
+         },
+         {
+             "a": "新建体育公园、笼式场地",
+             "b": "307013100673000036",
+             "c": "新建体育公园、笼式场地",
+             "d": "体育局",
+             "e": "张虎"
+         },
+         {
+             "a": "西海岸新区供水领域自然人欠费信息",
+             "b": "307013109015000211",
+             "c": "西海岸新区供水领域自然人欠费信息",
+             "d": "西海岸新区城市管理局（区水务局）",
+             "e": "李阳"
+         },
+         {
+             "a": "西海岸新区交通运输局",
+             "b": "307013109071000108",
+             "c": "公交站点查询",
+             "d": "西海岸新区交通运输局",
+             "e": "李阳"
+         },
+         {
+             "a": "全市主要经济指标",
+             "b": "307013107004000062",
+             "c": "胶州市国民经济分行业数据",
+             "d": "胶州市统计局",
+             "e": "李阳"
+         },
+         {
+             "a": "乡村之星信息",
+             "b": "307013100000000187",
+             "c": "乡村之星信息",
+             "d": "农业农村局",
+             "e": "李阳"
+         },
+         {
+             "a": "建设项目环境影响评价审批信息",
+             "b": "307013107777000033",
+             "c": "建设单位、建设项目、审批文号",
+             "d": "生态环境局胶州分局",
+             "e": "王二生"
+         },
+         {
+             "a": "新时代文明实践阵地信息表",
+             "b": "307013108760000022",
+             "c": "镇街、阵地名称、专管员、联系电话",
+             "d": "莱西市夏格庄镇人民政府",
+             "e": "王二生"
+         },
+         {
+             "a": "泊里镇非物质文化遗产信息",
+             "b": "307013109000000067",
+             "c": "泊里镇非物质文化遗产的名称、简介等信息",
+             "d": "黄岛区泊里镇人民政府",
+             "e": "王二生"
+         },
+         {
+             "a": "人才住房建设情况",
+             "b": "307013100482000025",
+             "c": "人才住房项目数量、人才住房房屋套数、人才住房面积、人才住房目标任务房屋套数、人才住房房屋总面积",
+             "d": "住房和城乡建设局",
+             "e": "王二生"
+         }
+     ],
+        
+       dataForm: {
+         name: "",
+       },
+     };
+   },
+   watch: {},
+   components: {},
+   created() {},
+   mounted() {},
+   methods: {
+     handleChose(index) {
+       this.choose = index;
+     },
+     reset() {},
+     query() {},
+     //云资源新增
+     yunadd(type,row) {
+       if(type=='add'){
+         this.yunaddForm.a="" 
+         this.yunaddForm.b=""
+         this.yunaddForm.c=""
+         this.yunaddForm.d=""
+         this.yunaddForm.e=""
+         this.yunaddForm.f=""
+         this.yunaddForm.g=""
+       }else{
+         this.yunaddForm.a=row.a
+         this.yunaddForm.b=row.b
+         this.yunaddForm.c=row.c
+         this.yunaddForm.d=row.d
+         this.yunaddForm.e=row.e
+         this.yunaddForm.f=row.f
+         this.yunaddForm.g=row.g
+       }
+       this.yunshow = true;
+     },
+    
+  
+  
+   },
+  };
+  </script>
+  <style lang="less" scoped>
+  .status_change {
+   ::v-deep  .el-dialog__header{
+     background-color:#0058e1;
+     padding: 10px 10px 10px;
+     .el-dialog__title,.el-dialog__headerbtn i{
+       color: white;
+     }
+     
+   }
+   .dialog-footer{
+     text-align: center;
+   }
+  }
+  .form-minwidth-style {
+   width: 660px;
+  }
+  .second-title {
+   border-radius: 2px;
+   margin-top: 10px;
+   margin-bottom: 22px;
+   font-size: 18px;
+   cursor: pointer;
+   text-align: center;
+   background: #ebe5e5;
+   width: 200px;
+   height: 30px;
+   line-height: 30px;
+   display: table;
+  }
+  
+  .departmentStyle {
+   display: table-cell;
+   width: 50%;
+   color: #fff;
+   background-color: #0058e1;
+   font-weight: bolder;
+  }
+  .departmentStyle1 {
+   display: table-cell;
+   width: 50%;
+  }
+  .el-tooltip__popper {
+   max-width: 50%;
+  }
+  // ::v-deep .el-table .cell {
+  //   width: 200px;
+  // }
+  ::v-deep .el-upload-list__item-name {
+   width: 400px;
+  }
+  </style>
\ No newline at end of file