概览页面

src/views/OverviewMallResources/PopularResources.vue

@@ -6,19 +6,19 @@
       </div>
       <div>
         <Select
-          v-model:value="optionValue"
+          v-model:value="optionValue1"
           show-search
-          placeholder="请选择版本"
+          placeholder="请选择"
           style="width: 100px;margin-right: 10px"
-          :options="options"
+          :options="options1"
           @change="handleChange"
         ></Select>
         <Select
-          v-model:value="optionValue"
+          v-model:value="optionValue2"
           show-search
-          placeholder="请选择版本"
-          style="width: 100px;margin-right: 10px"
-          :options="options"
+          placeholder="请选择"
+          style="width: 150px;margin-right: 10px"
+          :options="options2"
           @change="handleChange"
         ></Select>
         <span style="margin-right: 10px">今日</span>
@@ -42,6 +42,7 @@
   </Card>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { Tag, Card,Select } from 'ant-design-vue';
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import {tableData} from "@/views/realTimeSync/eventCenter/eventCenterData";
@@ -71,6 +72,22 @@ const [registerTable] = useTable({
   bordered: true,
   scroll: { y: 500 },
 });
+const optionValue1 = ref('全部类型')
+const optionValue2 = ref('基础架构产品部')
+const options1 = ref([
+  {
+    label:'全部类型',
+    value:'全部类型'
+  },
+])
+const options2 = ref([
+  {
+    label:'基础架构产品部',
+    value:'基础架构产品部'
+  },
+])
+
+
 </script>
 <style lang="less" scoped>
 .centent1{

src/views/OverviewMallResources/VisitSource.vue

@@ -6,19 +6,19 @@
       </div>
       <div>
         <Select
-          v-model:value="optionValue"
+          v-model:value="optionValue1"
           show-search
           placeholder="请选择版本"
           style="width: 100px;margin-right: 10px"
-          :options="options"
+          :options="options1"
           @change="handleChange"
         ></Select>
         <Select
-          v-model:value="optionValue"
+          v-model:value="optionValue2"
           show-search
           placeholder="请选择版本"
-          style="width: 100px;margin-right: 10px"
-          :options="options"
+          style="width: 150px;margin-right: 10px"
+          :options="options2"
           @change="handleChange"
         ></Select>
       </div>
@@ -39,6 +39,7 @@ import {columns} from "@/views/realTimeSync/eventCenter/eventCenter.data";
 import {TableData2} from "./overviewMallResourceData";
 import {columns2} from "./overviewMallResource.data";
 import Icon from '@/components/Icon/Icon.vue';
+import {ref} from "vue";
 const [registerTable] = useTable({
   title: '',
   api: async (params) => {
@@ -61,4 +62,19 @@ const [registerTable] = useTable({
   bordered: true,
   scroll: { y: 500 },
 });
+const optionValue1 = ref('全部类型')
+const optionValue2 = ref('全部权属机构')
+const options1 = ref([
+  {
+    label:'全部类型',
+    value:'全部类型'
+  },
+])
+const options2 = ref([
+  {
+    label:'全部权属机构',
+    value:'全部权属机构'
+  },
+])
+
 </script>

src/views/OverviewMallResources/index.vue

 <template>
   <div class="p-4">
-    <div style="display: flex;justify-content: center;margin-bottom: 20px">
+    <div class="centent1">
       <a-input-search
         v-model:value="value"
         placeholder=""
-        style="width: 800px;"
+        style="width: 700px;"
         @search="onSearch"
       />
-      <Icon icon="mdi:funnel" style="font-size: 20px;color: rgb(27, 148, 243);margin-left: 5px;margin-right: 5px"/>
-      <Icon icon="ant-design:folder-open-outlined" style="font-size: 20px"/>
+      <Icon class="iconClass1" icon="mdi:funnel"/>
+      <Icon class="iconClass2" icon="ant-design:folder-open-outlined"/>
+    </div>
+    <div class="centent2">
+      <Dropdown :trigger="['click']">
+        <span class="centent2-1" @click.prevent>
+          所有资源类型<Icon icon="ant-design:caret-down-filled" class="iconClass3"/>
+        </span>
+        <template #overlay>
+          <Menu>
+            <template v-for="(item, index) in List" :key="item.title">
+              <SubMenu :title="item.name" v-if="item.children">
+                <template  v-for="(item1,index) in item.children">
+                  <MenuItem @click="handleTaskModel(item1)">
+                    <span>{{item1.name}}</span>
+                  </MenuItem>
+                </template>
+              </SubMenu>
+              <MenuItem @click="handleTaskModel(item)" v-else>
+                <span>{{item.name}}</span>
+              </MenuItem>
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <span @click.prevent style="margin-right: 20px;color: rgb(146, 153, 167);font-size: 13px">
+          所有编目<Icon icon="ant-design:caret-down-filled" style="font-size: 12px;margin-left: 2px"/>
+        </span>
+        <template #overlay>
+          <Menu>
+            <template v-for="(item, index) in List" :key="item.title">
+              <SubMenu :title="item.name" v-if="item.children">
+                <template  v-for="(item1,index) in item.children">
+                  <MenuItem @click="handleTaskModel(item1)">
+                    <span>{{item1.name}}</span>
+                  </MenuItem>
+                </template>
+              </SubMenu>
+              <MenuItem @click="handleTaskModel(item)" v-else>
+                <span>{{item.name}}</span>
+              </MenuItem>
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <span @click.prevent style="margin-right: 20px;color: rgb(146, 153, 167);font-size: 13px">
+          所有机构<Icon icon="ant-design:caret-down-filled" style="font-size: 12px;margin-left: 2px"/>
+        </span>
+        <template #overlay>
+          <Menu>
+            <template v-for="(item, index) in List" :key="item.title">
+              <SubMenu :title="item.name" v-if="item.children">
+                <template  v-for="(item1,index) in item.children">
+                  <MenuItem @click="handleTaskModel(item1)">
+                    <span>{{item1.name}}</span>
+                  </MenuItem>
+                </template>
+              </SubMenu>
+              <MenuItem @click="handleTaskModel(item)" v-else>
+                <span>{{item.name}}</span>
+              </MenuItem>
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <span @click.prevent style="margin-right: 20px;color: rgb(146, 153, 167);font-size: 13px">
+          所有标签<Icon icon="ant-design:caret-down-filled" style="font-size: 12px;margin-left: 2px"/>
+        </span>
+        <template #overlay>
+          <Menu>
+            <template v-for="(item, index) in List" :key="item.title">
+              <SubMenu :title="item.name" v-if="item.children">
+                <template  v-for="(item1,index) in item.children">
+                  <MenuItem @click="handleTaskModel(item1)">
+                    <span>{{item1.name}}</span>
+                  </MenuItem>
+                </template>
+              </SubMenu>
+              <MenuItem @click="handleTaskModel(item)" v-else>
+                <span>{{item.name}}</span>
+              </MenuItem>
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <span @click.prevent style="color: rgb(146, 153, 167);font-size: 13px">
+          所有发布时间<Icon icon="ant-design:caret-down-filled" style="font-size: 12px;margin-left: 2px"/>
+        </span>
+        <template #overlay>
+          <Menu>
+            <template v-for="(item, index) in List" :key="item.title">
+              <SubMenu :title="item.name" v-if="item.children">
+                <template  v-for="(item1,index) in item.children">
+                  <MenuItem @click="handleTaskModel(item1)">
+                    <span>{{item1.name}}</span>
+                  </MenuItem>
+                </template>
+              </SubMenu>
+              <MenuItem @click="handleTaskModel(item)" v-else>
+                <span>{{item.name}}</span>
+              </MenuItem>
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
     </div>
     <ResourceStatistics :loading="loading" class="enter-y" />
     <div class="!my-4 md:flex enter-y">
@@ -27,13 +134,79 @@ import ResourceStatistics from './ResourceStatistics.vue';
 import VisitSource from './VisitSource.vue';
 import PopularResources from './PopularResources.vue';
 import MyProcess from './MyProcess.vue';
-import { Tag, Card } from 'ant-design-vue';
+import { Tag, Card,Dropdown,Menu, MenuItem,SubMenu } from 'ant-design-vue';
 import StatisticalChart from './StatisticalChart.vue'
 import Icon from "@/components/Icon/Icon.vue";
+import { DownOutlined } from '@ant-design/icons-vue';
 
 const loading = ref(false);
+const List = ref([
+  {
+    name: '新建任务1',
+    title: '新建任务1',
+    children: [
+      {
+        name: '11111',
+        title: '新建任务',
+      },
+      {
+        name: '22222',
+        title: '新建任务',
+      },
+    ]
+  },
+  {
+    name: '新建任务2',
+    title: '新建任务2',
+  },
+  {
+    name: '新建任务3',
+    title: '新建任务3',
+  },
+  {
+    name: '新建任务4',
+    title: '新建任务4',
+  },
+  {
+    name: '新建任务5',
+    title: '新建任务5',
+  },
+  {
+    name: '新建任务6',
+  }
+])
 
 setTimeout(() => {
   loading.value = false;
 }, 1500);
 </script>
+<style lang="less" scoped>
+.centent1{
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  .iconClass1{
+    font-size: 20px;
+    color: rgb(27, 148, 243);
+    margin-left: 5px;
+    margin-right: 5px
+  }
+  .iconClass2{
+    font-size: 20px
+  }
+}
+.centent2{
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  .centent2-1{
+    margin-right: 20px;
+    color: rgb(146, 153, 167);
+    font-size: 13px
+  }
+}
+.iconClass3{
+  font-size: 12px;margin-left: 2px
+}
+</style>