[update] 一阶段首页

src/views/dashboard/Analysis.vue

@@ -1,46 +1,95 @@
 <template>
-  <!--<div>敬请期待</div>-->
+  <div class="all-wrapper">
-  <div class="analysis-box">
+    <!--  检索和预警  -->
-    <img class="analysis-empty-img" alt="" src="../../assets/image/stayTuned.png" />
+    <search-and-warning-card class="flex-item search-warning-wrapper"></search-and-warning-card>
-    <div class="analysis-empty-title">敬请期待</div>
+    <!--  友情链接  -->
-    <!--<a-button @click="toSearchWindow">跳转一般检索</a-button>-->
+    <friend-link-card class="flex-item friend-link-wrapper"></friend-link-card>
+    <!--  快捷入口  -->
+    <quick-enter-card class="flex-item quick-enter-wrapper"></quick-enter-card>
+    <!--  待办任务  -->
+    <to-do-task-card class="flex-item to-do-task-wrapper"></to-do-task-card>
   </div>
 </template>
 
 <script>
+import SearchAndWarningCard from './modules/SearchAndWarningCard'
+import QuickEnterCard from './modules/QuickEnterCard'
+import FriendLinkCard from './modules/FriendLinkCard'
+import ToDoTaskCard from './modules/ToDoTaskCard'
+
 export default {
   name: 'Analysis',
-  methods: {
+  components: { ToDoTaskCard, FriendLinkCard, QuickEnterCard, SearchAndWarningCard },
-    // 点击跳转到检索页
+  methods: {}
-    toSearchWindow () {
-      const { href } = this.$router.resolve({
-        path: '/generalSearch'
-      })
-      window.open(href, '_blank')
-    }
-  }
 }
 </script>
 
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-.analysis-box {
+.all-wrapper {
-  height: @page-content-h;
-  background-color: #FFFFFF;
   display: flex;
   flex-direction: column;
+  height: calc(100vh - 116px);
+  flex-wrap: wrap;
+}
+.flex-item {
+  margin: 10px;
+}
+// 检索和预警
+.search-warning-wrapper {
+  width: calc(70% - 20px);
+  height: calc(80% - 20px);
+}
+// 快捷入口
+.quick-enter-wrapper {
+  width: calc(30% - 20px);
+  height: 306px;
+}
+// 友情链接
+.friend-link-wrapper {
+  width: calc(70% - 20px);
+  height: calc(20% - 20px);
+}
+// 待办任务
+.to-do-task-wrapper {
+  //grid-area: ToDoTask;
+  width: calc(30% - 20px);
+  height: calc(100% - 346px);
+}
+
+/deep/ .top-wrapper {
+  display: flex;
   align-items: center;
-  justify-content: center;
+  .left-p {
+    margin-bottom: 0;
+    font-size: 20px;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #1D2129;
+    //line-height: 28px;
+    .left-icon {
+      margin-right: 5px;
+      color: @primary-color;
+      font-size: 20px;
+    }
+    .anticon {
+      margin-right: 5px;
+      color: @primary-color;
+      font-size: 20px;
+    }
+  }
+  .right-p {
+    margin-bottom: 0;
+    font-size: 16px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #86909C;
+    line-height: 19px;
+    display: inline-block;
+    margin-left: auto;
+    cursor: pointer;
+  }
 }
 
-.analysis-empty-img {
+</style>
-  width: 200px;
-}
-
-.analysis-empty-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #1D2129;
-}
-</style>

src/views/dashboard/modules/FriendLinkCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <a-card :bordered="false">
+    <a-spin :spinning="loading">
+      <div class="top-wrapper">
+        <span class="left-p"><i class="iconfont icon-link left-icon"></i>友情链接</span>
+        <span class="right-p" @click="moreLink">更多链接<i class="iconfont icon-right"></i></span>
+      </div>
+      <div class="content-wrapper">
+        <div class="content-div" v-for="item in dataSource" :key="item.id" @click="clickLink(item)">
+          {{ item.name }}
+        </div>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'FriendLinkCard',
+  data () {
+    return {
+      loading: true,
+      dataSource: [],
+      url: {
+        list: '/sys/lawsFriendlyLinks/list'
+      }
+    }
+  },
+  mounted () {
+    this.loadData()
+  },
+  methods: {
+    loadData () {
+      this.loading = true
+      getAction(this.url.list, {}).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 点击更多链接
+    moreLink () {
+      this.$router.push({
+        path: '/isystem/friendshipLink'
+      })
+    },
+    // 点击链接
+    clickLink (record) {
+      const href = record.link
+      window.open(href)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+.content-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 20px;
+  margin-top: 12px;
+}
+.content-div {
+  height: 62px;
+  line-height: 62px;
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: @primary-color;
+  text-align: center;
+  background-image: url('../../../assets/image/dashboardLinkBack.png');
+  cursor: pointer;
+  padding: 0 20px;
+}
+</style>

src/views/dashboard/modules/QuickEnterCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <a-card :bordered="false">
+    <a-spin :spinning="loading">
+      <div class="top-wrapper">
+        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>快捷入口</p>
+        <p class="right-p"><i class="iconfont icon-settings"></i>菜单管理</p>
+      </div>
+      <div class="analysis-box">
+        <img class="analysis-empty-img" alt="" src="../../../assets/image/stayTuned.png" />
+        <div class="analysis-empty-title">敬请期待</div>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'QuickEnterCard',
+  data () {
+    return {
+      loading: false,
+      dataSource: [
+        { iconName: 'shengchanliuchengguanli', name: '新建流程' },
+        { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
+        { iconName: 'shoucang', name: '我的收藏' },
+        { iconName: 'a-fagui1', name: '国内法规' },
+        { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
+        { iconName: 'jiaoseguanli', name: '角色管理' },
+        { iconName: 'wenda1', name: '我的问答' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+// 为了敬请期待居中显示
+/deep/ .ant-card-body {
+  height: 100%;
+  .ant-spin-nested-loading{
+    height: 100%;
+    .ant-spin-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.analysis-box {
+  flex: 1;
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .analysis-empty-img {
+    width: 200px;
+  }
+
+  .analysis-empty-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1D2129;
+  }
+}
+</style>

src/views/dashboard/modules/SearchAndWarningCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <a-card :bordered="false">
+    <!--  搜索区域  -->
+    <div class="search-wrapper">
+      <a-select class="resource-type-select" v-model="resourceType">
+        <a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
+        <a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value">
+          {{ item.title }}
+        </a-select-option>
+      </a-select>
+      <a-input v-model="searchValue" :placeholder="$t('pleaseEnter')"></a-input>
+      <a-button type="primary" @click="toSearchWindow('title')">一般检索（标题）</a-button>
+      <a-button type="primary" @click="toSearchWindow('fullText')">一般检索（全文）</a-button>
+      <a-button type="primary" ghost @click="toAdvancedSearch">高级检索</a-button>
+    </div>
+    <!--  预警区域  -->
+    <div class="analysis-box">
+      <img class="analysis-empty-img" alt="" src="../../../assets/image/stayTuned.png" />
+      <div class="analysis-empty-title">敬请期待</div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { ajaxGetDictItems } from '@/api/api'
+
+export default {
+  name: 'SearchAndWarningCard',
+  data () {
+    return {
+      resourceTypeOptions: [], // 资源类型下拉框数据
+      resourceType: 'all', // 资源类型
+      searchValue: '' // 检索内容
+    }
+  },
+  mounted () {
+    this.initResourceTypeOptions()
+  },
+  methods: {
+    // 获取资源类型下拉框数据
+    initResourceTypeOptions () {
+      ajaxGetDictItems('resource_type').then(res => {
+        if (res.success) {
+          this.resourceTypeOptions = res.result
+        }
+      })
+    },
+    // 点击跳转到一般检索页
+    toSearchWindow (type) {
+      const { href } = this.$router.resolve({
+        path: '/generalSearch',
+        query: {
+          type: type,
+          resourceType: this.resourceType,
+          searchValue: this.searchValue
+        }
+      })
+      window.open(href, '_blank')
+    },
+    // 点击跳转到高级检索页
+    toAdvancedSearch () {
+      const { href } = this.$router.resolve({
+        path: '/advancedSearch'
+      })
+      window.open(href, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+// 为了敬请期待居中显示
+/deep/ .ant-card-body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.search-wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: 96px 200px 135px 135px 88px;
+}
+.resource-type-select {
+  width: 96px;
+}
+
+// 敬请期待
+.analysis-box {
+  flex: 1;
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .analysis-empty-img {
+    width: 200px;
+  }
+
+  .analysis-empty-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1D2129;
+  }
+}
+</style>

src/views/dashboard/modules/ToDoTaskCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <a-card :bordered="false">
+    <a-spin :spinning="loading">
+      <div class="top-wrapper">
+        <p class="left-p"><a-icon type="calendar" />待办任务</p>
+        <span class="right-p">更多<i class="iconfont icon-right"></i></span>
+      </div>
+      <div class="analysis-box">
+        <img class="analysis-empty-img" alt="" src="../../../assets/image/stayTuned.png" />
+        <div class="analysis-empty-title">敬请期待</div>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ToDoTaskCard',
+  data () {
+    return {
+      loading: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+// 为了敬请期待居中显示
+/deep/ .ant-card-body {
+  height: 100%;
+  .ant-spin-nested-loading{
+    height: 100%;
+    .ant-spin-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.analysis-box {
+  flex: 1;
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .analysis-empty-img {
+    width: 200px;
+  }
+
+  .analysis-empty-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1D2129;
+  }
+}
+</style>