更新科技数据

src/components/shuju/shujudetail.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="shuju">
+    <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="16" class="leftcont">
+            <el-col :span="5" class="fenlei"> <fenlei :liebiaoList="liebiaoList"></fenlei></el-col>
+            <el-col :span="19" class="between"><zhanshi :imageList="imageList"></zhanshi></el-col>
+            <el-col :span="24" class="gonggao">
+              <gonggao :gonggaoList="gonggaoList"></gonggao>
+            </el-col>
+          </el-col>
+          <el-col class="rightCont">
+            <el-col :span="24" class="tongzhi">
+              <tongzhi :tongzhiList="tongzhiList"></tongzhi>
+            </el-col>
+            <el-col :span="24" class="shangbao">
+              <shangbao :shangbaoList="shangbaoList"></shangbao>
+            </el-col>
+          </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 fenlei from '@/layout/shuju/fenlei.vue';
+import zhanshi from '@/layout/shuju/zhanshi.vue';
+import gonggao from '@/layout/shuju/gonggao.vue';
+import shangbao from '@/layout/shuju/shangbao.vue';
+import tongzhi from '@/layout/shuju/tongzhi.vue';
+
+export default {
+  name: 'shuju',
+  props: {
+    info: null, //站点信息
+    liebiaoList: null, //分类导航
+    imageList: null, //数据展示
+    gonggaoList: null, //底部通知公告
+    shangbaoList: null, //上报通知
+    tongzhiList: null, //右侧通知公告
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    fenlei, //左侧分类
+    zhanshi, //数据展示
+    gonggao, //底部通知公告
+    shangbao, //上报通知
+    tongzhi, //右侧通知公告
+  },
+  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 {
+  height: 700px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.leftcont {
+  height: 700px;
+  overflow: hidden;
+  margin: 0 10px 0 0;
+}
+.leftcont .rightcont {
+  width: 390px;
+  height: 350px;
+  overflow: hidden;
+  background: #fff;
+}
+.leftcont .fenlei {
+  width: 240px;
+  height: 420px;
+  margin: 0 10px 10px 0;
+  background-color: #fff;
+}
+.leftcont .between {
+  width: 550px;
+  background-color: #fff;
+  height: 420px;
+}
+.leftcont .gonggao {
+  width: 800px;
+  height: 270px;
+  background-color: #fff;
+}
+.rightCont {
+  width: 390px;
+  height: 700px;
+  overflow: hidden;
+}
+.rightCont .tongzhi {
+  height: 350px;
+  overflow: hidden;
+  background-color: #fff;
+  margin: 0 0 10px 0;
+}
+.rightCont .shangbao {
+  height: 350px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/components/shuju/shujulist.vue

@@ -17,7 +17,12 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="5" class="fenlei">
-            <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
+            <el-col :span="24" class="leftTop">
+              <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
+            </el-col>
+            <el-col :span="24" class="leftDiao">
+              <examine></examine>
+            </el-col>
           </el-col>
           <el-col :span="19" class="rightcont">
             <rightcont v-on="$listeners" :columnName="columnName" :contentList="contentList" :total="total" v-if="display === 'list'"></rightcont>
@@ -42,6 +47,7 @@ import foot from '@/layout/index/foot.vue';
 import fenlei from '@/layout/shujulist/fenlei.vue';
 import rightcont from '@/layout/shujulist/rightcont.vue';
 import policyrightcont from '@/layout/shujulist/policyrightcont.vue';
+import examine from '@/layout/personCenter/question.vue';
 export default {
   name: 'policy',
   props: {
@@ -62,6 +68,7 @@ export default {
     fenlei, //左边分类
     rightcont, //右边栏
     policyrightcont,
+    examine,
   },
   data: () => ({}),
   created() {},
@@ -75,6 +82,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.leftDiao {
+  background: #fff;
+  min-height: 120px;
+  overflow: hidden;
+  padding: 10px 0 0 0;
+}
+
+.leftTop {
+  background: #fff;
+  height: 420px;
+  overflow: hidden;
+  margin: 0 0 20px 0;
+}
 .w_1200 {
   width: 1200px;
   margin: 0 auto;
@@ -101,15 +121,14 @@ export default {
 .main .fenlei {
   float: left;
   width: 240px;
-  min-height: 420px;
+  min-height: 800px;
   margin: 0 10px 0 0;
   overflow: hidden;
-  background-color: #ffffff;
 }
 .main .rightcont {
   float: left;
   width: 950px;
-  min-height: 600px;
+  min-height: 800px;
   overflow: hidden;
   background-color: #fff;
 }

src/router/index.js

@@ -97,6 +97,16 @@ const routes = [
     name: 'shujulist',
     component: () => import('../views/shuju/shujulist.vue'),
   },
+  {
+    path: '/shuju/shujulist',
+    name: 'shujulist',
+    component: () => import('../views/shuju/shujulist.vue'),
+  },
+  {
+    path: '/shuju/shujudetail',
+    name: 'shujudetail',
+    component: () => import('../views/shuju/shujudetail.vue'),
+  },
 
   //科技服务
   {

src/views/shuju/shujudetail.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="shujudetail">
+    <shujudetail-detail
+      :info="info"
+      :liebiaoList="liebiaoList"
+      :imageList="imageList"
+      :gonggaoList="tzggList"
+      :shangbaoList="shangbaoList"
+      :tongzhiList="tzggList"
+    ></shujudetail-detail>
+  </div>
+</template>
+
+<script>
+import shujudetailDetail from '@/components/shuju/shujudetail.vue';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+import _ from 'loadsh';
+const { mapActions: mapSite } = createNamespacedHelpers('site');
+const { mapActions: mappolicyColumn } = createNamespacedHelpers('recordColumn');
+const { mapActions: mappolicyNews } = createNamespacedHelpers('recordNews');
+
+export default {
+  name: 'shujudetail',
+  props: {},
+  components: { shujudetailDetail },
+  data: () => ({
+    info: {},
+    liebiaoList: [],
+    display: 'list',
+    columnName: '',
+    contentList: [],
+    total: 1,
+    leftId: '',
+    columnTitle: '',
+    policyInfo: {},
+  }),
+  async created() {
+    this.searchSite();
+    await this.policyColumn();
+    await this.defaultColumn();
+  },
+  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);
+      }
+    },
+    submit({ id }) {
+      this.$set(this, `leftId`, id);
+      this.display = 'list';
+      this.searchRight();
+    },
+    async searchRight({ skip = 0, limit = 10, column_id } = {}) {
+      const res = await this.policyNew({ skip, limit, column_id: this.leftId });
+      for (const val of res.data) {
+        const result = await this.policyfetch(val.column_id);
+        val.column_name = result.data.name;
+      }
+      this.$set(this, `contentList`, res.data);
+      this.$set(this, `total`, res.data.length);
+      for (const val of res.data) {
+        this.$set(this, `columnName`, val.column_name);
+      }
+    },
+    async defaultColumn() {
+      if (!(this.liebiaoList.length > 0)) return;
+      let id = _.get(this.liebiaoList[0], 'id', false);
+      if (!id) return;
+      this.submit({ id });
+    },
+    async fetchInfo(id) {
+      this.display = 'detail';
+      const res = await this.newsFetch(id);
+      const result = await this.policyfetch(res.data.column_id);
+      this.$set(this, `columnTitle`, result.data.name);
+      this.$set(this, `policyInfo`, res.data);
+      // 查询详情，赋值
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>