首页更新

src/components/policy/lawDetail.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="lawDetail">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="fenlei">
+            <fenleis :liebiaoList="liebiaoList" v-on="$listeners"></fenleis>
+          </el-col>
+          <el-col :span="19" class="rightcont">
+            <lawDetail :columnTitle="columnTitle" :lawDetailInfo="lawDetailInfo"></lawDetail>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import logo from '@/layout/index/logo.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import foot from '@/layout/index/foot.vue';
+import fenleis from '@/layout/policy/fenleis.vue';
+import lawDetail from '@/layout/policy/lawDetail.vue';
+
+export default {
+  name: 'policy',
+  props: {
+    info: null, //站点信息
+    liebiaoList: null,
+    columnTitle: null, //栏目标题
+    lawDetailInfo: null, //详情
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    fenleis, //分类导航
+    lawDetail, //政策法规详情
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+.main {
+  min-height: 600px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .fenlei {
+  float: left;
+  width: 240px;
+  min-height: 600px;
+  margin: 0 10px 0 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.main .rightcont {
+  float: left;
+  width: 950px;
+  min-height: 660px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.main .link {
+  float: left;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/index/law.vue

@@ -10,10 +10,10 @@
         </el-col>
         <el-col :span="24" class="list">
           <ul>
-            <li class="zixunList" v-for="(item, index) in lawList" :key="index">
+            <li class="zixunList" v-for="(item, index) in lawList" :key="index" @click="$router.push({ path: '/policy/lawDetail', query: { id: item.id } })">
               <el-link :underline="false">
                 <span class="title textOver">{{ item.title }}</span>
-                <span class="date textOver">{{ item.date }}</span>
+                <span class="date textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
               </el-link>
             </li>
           </ul>

src/layout/index/notice.vue

@@ -10,10 +10,15 @@
         </el-col>
         <el-col :span="24" class="list">
           <ul>
-            <li class="zixunList" v-for="(item, index) in noticeList" :key="index">
+            <li
+              class="zixunList"
+              v-for="(item, index) in noticeList"
+              :key="index"
+              @click="$router.push({ path: '/government/governmentDetail', query: { id: item.id } })"
+            >
               <el-link :underline="false">
                 <span class="title textOver">{{ item.title }}</span>
-                <span class="date textOver">{{ item.date }}</span>
+                <span class="date textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
               </el-link>
             </li>
           </ul>

src/layout/index/zixun.vue

@@ -23,10 +23,15 @@
           </el-col>
           <el-col :span="24" class="list">
             <ul>
-              <li class="zixunList" v-for="(item, index) in zixunList" :key="index">
+              <li
+                class="zixunList"
+                v-for="(item, index) in zixunList"
+                :key="index"
+                @click="$router.push({ path: '/government/governmentDetail', query: { id: item.id } })"
+              >
                 <el-link :underline="false">
                   <span class="title textOver">{{ item.title }}</span>
-                  <span class="date textOver">{{ item.date }}</span>
+                  <span class="date textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
                 </el-link>
               </li>
             </ul>

src/layout/policy/fenleis.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="fenlei">
+    <el-col class="swfl">
+      <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
+      <span>政策分类</span>
+    </el-col>
+    <el-col>
+      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+        <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
+          ><span slot="title" @click="clickUrl()">{{ item.name }}</span></el-menu-item
+        >
+      </el-menu>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fenlei',
+  props: {
+    liebiaoList: null,
+  },
+  components: {},
+  data: () => ({
+    src: require('@/assets/swfl.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    clickUrl() {
+      this.$router.push({ path: '/policy/policy' });
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swfl {
+  height: 60px;
+  width: 240px;
+  line-height: 60px;
+  background-color: #22529a;
+  text-align: center;
+}
+.swfl span {
+  font-size: 22px;
+  color: #ffffff;
+}
+/deep/.el-menu-item {
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border-bottom: 1px dashed;
+  font-size: 22px;
+}
+/deep/.el-menu-item:last-child {
+  border-bottom: none;
+}
+</style>

src/layout/policy/lawDetail.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="policyrightcont">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <span>{{ columnTitle }}</span>
+        </el-col>
+        <el-col :span="24" class="infoMess">
+          <el-col :span="24" class="title">
+            {{ lawDetailInfo.title }}
+          </el-col>
+          <el-col :span="24" class="infoDate">
+            <p>
+              <span>发布人：{{ lawDetailInfo.publish }}</span>
+              <span>来源：{{ lawDetailInfo.orgin }}</span>
+              <span>
+                发布时间：{{ lawDetailInfo.meta && lawDetailInfo.meta.createdAt ? new Date(lawDetailInfo.meta.createdAt).toLocaleDateString() : '' || '' }}
+              </span>
+            </p>
+          </el-col>
+          <el-col v-if="lawDetailInfo.picture" class="image">
+            <el-image style="width:50%" :src="lawDetailInfo.picture"></el-image>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="lawDetailInfo.content"></p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'policyrightcont',
+  props: {
+    columnTitle: null,
+    lawDetailInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px;
+}
+.topInfo {
+  height: 60px;
+  line-height: 60px;
+  font-size: 22px;
+}
+.infoMess .title {
+  line-height: 30px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #000000;
+  margin: 0 0 20px 0;
+}
+.infoDate {
+  height: 36px;
+  line-height: 36px;
+}
+.infoDate p {
+  width: 700px;
+  background: #eeeeee;
+  margin: 0 105px;
+}
+.infoDate p span {
+  font-size: 14px;
+  color: #000;
+  padding: 0 0 0 80px;
+}
+.infoMess .image {
+  text-align: center;
+  margin: 20px 0 0 0;
+}
+.content {
+  padding: 0px 0 20px 0;
+}
+</style>

src/router/index.js

@@ -34,11 +34,12 @@ const routes = [
     name: 'policy',
     component: () => import('../views/policy/policy.vue'),
   },
-  // {
-  //   path: '/policy/detail',
-  //   name: 'detail',
-  //   component: () => import('../views/policy/detail.vue'),
-  // },
+  // 首页政策法规详情（所属科技政策，综合政策指导）
+  {
+    path: '/policy/lawDetail',
+    name: 'lawDetail',
+    component: () => import('../views/policy/lawDetail.vue'),
+  },
   // 科技超市
   {
     path: '/supermaket/supermarket',

src/views/index.vue

@@ -3,9 +3,9 @@
     <index-detail
       :info="info"
       :map="map"
-      :zixunList="zixunList"
-      :noticeList="noticeList"
-      :lawList="lawList"
+      :zixunList="gndtList"
+      :noticeList="tzggList"
+      :lawList="zhzczdList"
       :xinpinList="xinpinList"
       :chuangxinList="chuangxinList"
       :linkList="linkList"
@@ -18,6 +18,10 @@ import indexDetail from '@/components/index.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapSite } = createNamespacedHelpers('site');
 const { mapActions: mapLink } = createNamespacedHelpers('link');
+const { mapActions: mapAffairsColumn } = createNamespacedHelpers('affairsColumn');
+const { mapActions: mapAffairsNews } = createNamespacedHelpers('affairsNews');
+const { mapActions: mapPolicyColumn } = createNamespacedHelpers('policyColumn');
+const { mapActions: mapPolicyNews } = createNamespacedHelpers('policyNews');
 export default {
   name: 'index',
   props: {},
@@ -27,27 +31,9 @@ export default {
   data: () => ({
     info: {},
     map: require('@/assets/map.jpg'),
-    zixunList: [
-      {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
-        date: '2019-12-25',
-      },
-      {
-        title: '八条数据',
-        date: '2019-12-25',
-      },
-    ],
-    noticeList: [
-      {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
-        date: '2019-12-25',
-      },
-      {
-        title: '八条数据',
-        date: '2019-12-25',
-      },
-    ],
-    lawList: [
+    gndtList: [],
+    tzggList: [],
+    zhzczdList: [
       {
         title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
         date: '2019-12-25',
@@ -60,7 +46,7 @@ export default {
     linkList: [],
     xinpinList: [
       {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        title: '科技超市（产品）',
         date: '2019-12-25',
       },
       {
@@ -70,7 +56,7 @@ export default {
     ],
     chuangxinList: [
       {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        title: '科技超市（产品）',
         date: '2019-12-25',
       },
       {
@@ -82,11 +68,17 @@ export default {
   created() {
     this.searchSite();
     this.searchLink();
+    this.searchAffairs();
+    this.searchPolicy();
   },
   computed: {},
   methods: {
     ...mapSite(['showInfo']),
     ...mapLink(['query']),
+    ...mapAffairsColumn({ affairsColumnList: 'query', affairsColumnInfo: 'fetch' }),
+    ...mapAffairsNews({ affairsNews: 'query' }),
+    ...mapPolicyColumn({ policyColumnList: 'query', policyColumnInfo: 'fetch' }),
+    ...mapPolicyNews({ policyNews: 'query' }),
     // 查询站点信息
     async searchSite() {
       let res = await this.showInfo();
@@ -104,6 +96,47 @@ export default {
         this.$set(this, `linkList`, res.data);
       }
     },
+    // 最新資訊，通知公告（所属科技政务，国内动态，通知公告）
+    async searchAffairs({ ...info } = {}) {
+      const res = await this.affairsColumnList({ ...info });
+      for (const val of res.data) {
+        this.tpxwSearch({ column_id: val.id, site: val.site });
+      }
+    },
+    async tpxwSearch({ skip = 0, limit = 8, column_id, site } = {}) {
+      if (site === 'gndt') {
+        const res = await this.affairsNews({ skip, limit, column_id: column_id });
+        for (const val of res.data) {
+          const result = await this.affairsColumnInfo(val.column_id);
+          val.column_name = result.data.name;
+        }
+        this.$set(this, `${site}List`, res.data);
+      } else if (site === 'tzgg') {
+        const res = await this.affairsNews({ skip, limit, column_id: column_id });
+        for (const val of res.data) {
+          const result = await this.affairsColumnInfo(val.column_id);
+          val.column_name = result.data.name;
+        }
+        this.$set(this, `${site}List`, res.data);
+      }
+    },
+    // 政策法规（所属科技政策，综合政策指导）
+    async searchPolicy({ ...info } = {}) {
+      const res = await this.policyColumnList({ ...info });
+      for (const val of res.data) {
+        this.zhzcdPolicy({ column_id: val.id, site: val.site });
+      }
+    },
+    async zhzcdPolicy({ skip = 0, limit = 8, column_id, site } = {}) {
+      if (site === 'zhzczd') {
+        const res = await this.policyNews({ skip, limit, column_id: column_id });
+        for (const val of res.data) {
+          const result = await this.policyColumnInfo(val.column_id);
+          val.column_name = result.data.name;
+        }
+        this.$set(this, `${site}List`, res.data);
+      }
+    },
   },
 };
 </script>

src/views/policy/lawDetail.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="lawDetail">
+    <lawDetail-detail :info="info" :liebiaoList="liebiaoList" :columnTitle="columnTitle" :lawDetailInfo="lawDetailInfo"></lawDetail-detail>
+  </div>
+</template>
+
+<script>
+import lawDetailDetail from '@/components/policy/lawDetail.vue';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+import _ from 'loadsh';
+const { mapActions: mapSite } = createNamespacedHelpers('site');
+const { mapActions: mappolicyColumn } = createNamespacedHelpers('policyColumn');
+const { mapActions: mappolicyNews } = createNamespacedHelpers('policyNews');
+export default {
+  name: 'lawDetail',
+  props: {},
+  components: {
+    lawDetailDetail,
+  },
+  data: () => ({
+    info: {},
+    liebiaoList: [],
+    columnTitle: '',
+    lawDetailInfo: {},
+  }),
+  async created() {
+    this.searchSite();
+    await this.policyColumn();
+    await this.searchInfo();
+  },
+  computed: {},
+  methods: {
+    ...mapSite(['showInfo']),
+    ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
+    ...mappolicyNews({ policyNew: 'query', newsFetch: 'fetch' }),
+    // 查询站点信息
+    async searchSite() {
+      let res = await this.showInfo();
+      let object = JSON.parse(JSON.stringify(res.data));
+      if (object) {
+        this.$set(this, `info`, res.data);
+      } else {
+        this.$message.error(res.errmsg ? res.errmsg : 'error');
+      }
+    },
+    // 查询栏目
+    async policyColumn({ ...info } = {}) {
+      const res = await this.policyColumns({ ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `liebiaoList`, res.data);
+      }
+    },
+    async searchInfo() {
+      let detailId = this.$route.query.id;
+      const res = await this.newsFetch(detailId);
+      const result = await this.policyfetch(res.data.column_id);
+      this.$set(this, `columnTitle`, result.data.name);
+      this.$set(this, `lawDetailInfo`, res.data);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>