通知公告并修改富文本为v-html

src/api/home/notice.js

@@ -7,3 +7,30 @@ export function getDictListByStatus(params) {
     params
   });
 }
+// 通知公告标签
+export function getLabel(params) {
+  return request({
+    url: '/mPolicy/getLabel',
+    params
+  });
+}
+// 获取通知公告列表
+export function getPolicyList(data) {
+  const params = {
+    pageNum: data.pageNum,
+    pageSize: data.pageSize
+  };
+  return request({
+    url: '/mPolicy/getPolicyList',
+    method: 'post',
+    data,
+    params
+  });
+}
+// 初始化获取政策匹配
+export function getPolicyMatch(params) {
+  return request({
+    url: '/mobile/getPolicyMatch',
+    params
+  });
+}

src/router/index.js

@@ -121,6 +121,11 @@ export const constantRoutes = [
     component: resolve => require(['@/views/result'], resolve),
     name: 'result'
   },
+  {
+    path: '/portrait',
+    component: resolve => require(['@/views/portrait'], resolve),
+    name: 'portrait'
+  },
   {
     path: '/404',
     component: resolve => require(['@/views/error/404'], resolve),

src/utils/editor.js

@@ -1,12 +1,14 @@
 export function formatRichText(url) {
-  let src = document.querySelectorAll('#text .ql-editor img');
+  // let src = document.querySelectorAll('#text .ql-editor img');
+  let src = document.querySelectorAll('#text img');
   console.log(src);
   for (let i = 0; i < src.length; i++) {
     const string = src[i].getAttribute('src');
     const flag = string.includes('http://');
     if (!flag) src[i].setAttribute('src', url + string);
   }
-  let src2 = document.querySelectorAll('#text .ql-editor a');
+  // let src2 = document.querySelectorAll('#text .ql-editor a');
+  let src2 = document.querySelectorAll('#text a');
   for (let i = 0; i < src2.length; i++) {
     const string = src2[i].getAttribute('href');
     const flag = string.includes('http://');

src/views/home/notice.vue

@@ -4,8 +4,12 @@
     <div class="search">
       <div class="search_input" style="display:flex">
         <span>通知公告检索</span>
-        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
-        <el-button type="warning">搜索</el-button>
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入搜索关键字"
+          @keyup.enter.native="getList"
+        ></el-input>
+        <el-button type="warning" @click="getList">搜索</el-button>
       </div>
       <div class="tags">
         <span class="txt">热门搜索：</span>
@@ -24,7 +28,8 @@
         <div class="screen_l_t">
           <div class="screen_l_t_item">
             <span class="text_col">级别：</span>
-            <el-radio-group v-model="queryParams.radio1" size="medium">
+            <el-radio-group v-model="city" size="medium">
+              <el-radio-button label="">不限</el-radio-button>
               <el-radio-button
                 :label="item.label"
                 v-for="item in levelList"
@@ -34,11 +39,8 @@
               </el-radio-button>
             </el-radio-group>
           </div>
-          <div
-            class="screen_l_t_item"
-            v-if="queryParams.radio1 == 2 || queryParams.radio1 == 3"
-          >
-            <el-radio-group v-model="queryParams.radio1_1" size="medium">
+          <div class="screen_l_t_item" v-if="city == 2 || city == 3">
+            <el-radio-group v-model="queryParams.city" size="medium">
               <el-radio-button
                 :label="item.id"
                 v-for="item in levelList_2"
@@ -50,7 +52,7 @@
           </div>
           <div class="screen_l_t_item">
             <span class="text_col">归口：</span>
-            <el-radio-group v-model="queryParams.radio2" size="medium">
+            <el-radio-group v-model="queryParams.attribute" size="medium">
               <el-radio-button label="">不限</el-radio-button>
               <el-radio-button
                 :label="item.value"
@@ -61,34 +63,64 @@
               </el-radio-button>
             </el-radio-group>
           </div>
+          <div
+            class="screen_l_t_item"
+            v-for="(item, index) in labelList"
+            :key="item.id"
+          >
+            <span class="text_col">{{ item.name }}：</span>
+            <el-radio-group v-model="queryParams.labelIds[index]" size="medium">
+              <el-radio-button label="">不限</el-radio-button>
+              <el-radio-button
+                :label="i.id"
+                v-for="i in item.mapList"
+                :key="i.id"
+              >
+                {{ i.name }}
+              </el-radio-button>
+            </el-radio-group>
+          </div>
         </div>
         <!-- 检索列表 -->
-        <div class="screen_l_b" v-for="item in 10" :key="item">
+        <div class="screen_l_b" v-for="item in dataList" :key="item.id">
           <div class="l">
-            <div class="title text_hidden_one" style="width:500px">
-              安徽出台若干措施一安徽出台若干措施安徽出台若干措施一安徽出台若干措施安徽出台若干措施一安徽出台若干措施台若干措施安徽出台若干措施一安徽出台若干措施
+            <!-- <div class="title text_hidden_one pointer" style="width:700px">
+              {{ item.title }}
+            </div> -->
+            <div class="title text_hidden_one pointer" style="width:700px">
+              <router-link
+                target="_blank"
+                :to="{
+                  path: '/result',
+                  query: { key: 'policy', id: item.id }
+                }"
+              >
+                {{ item.title }}
+              </router-link>
             </div>
             <div class="info">
-              <span>来源：安徽省经济和信息化厅</span>
-              <span>发布：2021-06-04</span>
+              <span>来源：{{ item.source }}</span>
+              <span>发布：{{ item.listDate }}</span>
             </div>
           </div>
-          <div class="r" style="min-width:310px">
-            <el-tag type="warning" effect="dark">截至到2021-08-20</el-tag>
-            <span v-if="token">
+          <div class="r" style="min-width:120px">
+            <el-tag type="warning" effect="dark" v-if="item.cutOffTime"
+              >截至到{{ parseTime(item.cutOffTime, '{y}-{m}-{d}') }}</el-tag
+            >
+            <!-- <span v-if="token">
               <el-button type="primary" size="mini">
                 <i class="el-icon-star-on"></i><span>收藏</span>
               </el-button>
               <el-button type="info" size="mini">
                 <i class="el-icon-star-on"></i><span>取消收藏</span>
               </el-button>
-            </span>
+            </span> -->
           </div>
         </div>
         <!-- 分页 -->
         <pagination
-          v-show="10 > 0"
-          :total="100"
+          v-show="total > 0"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
@@ -99,21 +131,42 @@
         <div class="tabs">
           <div class="tabs_row">
             <span class="span">企业画像：</span>
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="制造业" name="1"></el-tab-pane>
-              <el-tab-pane label="大型企业" name="2"></el-tab-pane>
-              <el-tab-pane label="生产业" name="3"></el-tab-pane>
-              <el-tab-pane label="小型企业" name="4"></el-tab-pane>
+            <span class="span" v-if="!portraitList.length">无数据</span>
+            <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
+              <el-tab-pane
+                :label="item.name"
+                :name="item.id"
+                v-for="item in portraitList"
+                :key="item.id"
+              ></el-tab-pane>
             </el-tabs>
           </div>
-          <div class="tabs_item" v-for="item in 4" :key="item">
-            <div class="text_hidden_one">
-              安徽出台若干措施一步优化营商安徽出台若干措施一步优化营商安徽出台若干措施一步优化营商
+          <div class="tabs_item" v-for="item in portraitData" :key="item.id">
+            <!-- <div class="text_hidden_one pointer">{{ item.title }}</div> -->
+            <div class="text_hidden_one pointer">
+              <router-link
+                target="_blank"
+                :to="{
+                  path: '/result',
+                  query: { key: 'policy', id: item.id }
+                }"
+              >
+                {{ item.title }}
+              </router-link>
             </div>
-            <div>来源：安徽省经济和信息化厅</div>
+            <div>来源：{{ item.source }}</div>
           </div>
           <div class="more">
-            <el-button type="primary" size="mini">查看更多</el-button>
+            <!-- query: { key: 'policy', id: item.id } -->
+            <router-link target="_blank" :to="{ path: '/portrait' }">
+              <el-button
+                type="primary"
+                size="mini"
+                v-show="portraitData.length >= 4"
+              >
+                查看更多
+              </el-button>
+            </router-link>
           </div>
         </div>
       </div>
@@ -122,19 +175,29 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { getDictListByStatus } from '@/api/home/notice';
+import {
+  getDictListByStatus,
+  getLabel,
+  getPolicyList,
+  getPolicyMatch
+} from '@/api/home/notice';
+import { userInfo, getLabelSetting } from '@/api/home/info';
 export default {
   data() {
     return {
-      activeName: '1',
-      input: '',
+      activeName: '',
+      city: '', // 临时城市
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        radio1: '',
-        radio1_1: '1417717740679987200',
-        radio2: ''
+        city: '',
+        attribute: '',
+        labelId: [],
+        labelIds: [],
+        title: ''
       },
+      total: 0,
+      dataList: [],
       levelList: [
         {
           label: '1',
@@ -168,36 +231,87 @@ export default {
           value: 'OTHER',
           label: '其他'
         }
-      ]
+      ],
+      labelList: [],
+      portraitList: [], // 企业画像
+      portraitData: [], // 企业画像绑定的政策列表
+      portraitTotal: 0
     };
   },
   computed: {
     ...mapGetters(['token'])
   },
   watch: {
-    'queryParams.radio1'(a, b) {
-      console.log(a, b);
-      if (a == 2) {
+    city(a, b) {
+      if (a == '' || a == 1) {
+        this.queryParams.city = this.city;
+      } else if (a == 2) {
         getDictListByStatus({ type: 5 }).then(({ data }) => {
           this.levelList_2 = data;
-          this.queryParams.radio1_1 = '1417717740679987200';
+          this.queryParams.city = '1417717740679987200';
         });
       } else if (a == 3) {
         getDictListByStatus({ type: 6 }).then(({ data }) => {
           this.levelList_2 = data;
-          this.queryParams.radio1_1 = '1417719159088742400';
+          this.queryParams.city = '1417719159088742400';
         });
       }
     }
   },
   methods: {
-    getList() {},
-    handleClick() {}
+    getList() {
+      this.queryParams.labelId = this.queryParams.labelIds.filter(item => {
+        return item !== '';
+      });
+      getPolicyList(this.queryParams).then(({ data }) => {
+        this.dataList = data.list;
+        this.total = data.total;
+      });
+    },
+    // 获取企业画像数据列表
+    getPortraitList() {
+      const query = {
+        labelId: this.activeName,
+        pageNum: 1,
+        pageSize: 4
+      };
+      getPolicyMatch(query).then(({ data }) => {
+        this.portraitData = data.list;
+        this.portraitTotal = data.total;
+      });
+    },
+    handleClick() {
+      this.getPortraitList();
+    }
   },
   created() {
-    this.levelList.unshift({
-      label: '',
-      name: '不限'
+    // 企业画像
+    if (this.token) {
+      userInfo().then(({ data }) => {
+        if (data.companyId) {
+          getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
+            if (data.length) {
+              this.portraitList = data.map(item =>
+                item.labelList
+                  ? item.labelList.filter(v => v.isHas)[0]
+                    ? item.labelList.filter(v => v.isHas)[0]
+                    : ''
+                  : undefined
+              );
+              this.activeName = this.portraitList[0].id;
+              this.getPortraitList();
+            }
+          });
+        }
+      });
+    }
+    // 获取标签
+    getLabel().then(({ data }) => {
+      this.labelList = data;
+      for (let i = 0; i < this.labelList.length; i++) {
+        this.queryParams.labelIds.push('');
+      }
+      this.getList();
     });
   }
 };
@@ -287,6 +401,7 @@ export default {
             font-size: 18px;
             color: #333;
             margin-bottom: 16px;
+            text-align: left;
           }
           .info {
             font-size: 16px;
@@ -317,10 +432,11 @@ export default {
         border-radius: 6px 6px 0px 0px;
       }
       .tabs {
-        height: 551px;
+        max-height: 551px;
         background: #f8f8f8;
-        padding: 0px 14px;
+        padding: 0px 14px 14px;
         .tabs_row {
+          height: 60px;
           display: flex;
           align-items: center;
           .span {
@@ -330,6 +446,9 @@ export default {
           .el-tabs {
             // width: 240px;
             width: 70%;
+            /deep/.el-tabs__header {
+              margin: 0 0 8px;
+            }
             /deep/.el-tabs__nav-wrap::after {
               height: 0;
             }
@@ -356,6 +475,7 @@ export default {
           }
         }
         .more {
+          height: 40px;
           text-align: center;
           .el-button {
             margin-top: 12px;

src/views/portrait.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="portrait_page content">
+    <div class="header">
+      <span class="span">企业画像：</span>
+      <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
+        <el-tab-pane
+          :label="item.name"
+          :name="item.id"
+          v-for="item in portraitList"
+          :key="item.id"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="screen_l_b" v-for="item in portraitData" :key="item.id">
+      <div class="title text_hidden_one pointer">
+        <router-link
+          target="_blank"
+          :to="{
+            path: '/result',
+            query: { key: 'policy', id: item.id }
+          }"
+        >
+          {{ item.title }}
+        </router-link>
+      </div>
+      <div class="info">
+        <span>来源：{{ item.source }}</span>
+        <span>发布：{{ item.listDate }}</span>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getPortraitList"
+    />
+  </div>
+</template>
+
+<script>
+import { getPolicyMatch } from '@/api/home/notice';
+import { mapGetters } from 'vuex';
+import { userInfo, getLabelSetting } from '@/api/home/info';
+export default {
+  data() {
+    return {
+      activeName: '',
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        labelId: ''
+      },
+      total: 0,
+      portraitList: [], // 企业画像
+      portraitData: [], // 企业画像绑定的政策列表
+      portraitTotal: 0
+    };
+  },
+  computed: {
+    ...mapGetters(['token'])
+  },
+  methods: {
+    // 获取企业画像数据列表
+    getPortraitList() {
+      getPolicyMatch(this.queryParams).then(({ data }) => {
+        this.portraitData = data.list;
+        this.total = data.total;
+      });
+    },
+    handleClick() {
+      this.getPortraitList();
+    }
+  },
+  created() {
+    if (this.token) {
+      userInfo().then(({ data }) => {
+        if (data.companyId) {
+          getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
+            if (data.length) {
+              this.portraitList = data.map(item =>
+                item.labelList
+                  ? item.labelList.filter(v => v.isHas)[0]
+                    ? item.labelList.filter(v => v.isHas)[0]
+                    : ''
+                  : undefined
+              );
+              this.queryParams.labelId = this.portraitList[0].id;
+              this.getPortraitList();
+            }
+          });
+        }
+      });
+    } else {
+      this.msgSuccess('请先登录');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.portrait_page {
+  margin-top: 30px;
+  .header {
+    display: flex;
+    align-items: center;
+    height: 90px;
+    padding: 30px;
+    background-color: #f5f5f5;
+    .el-tabs {
+      margin-left: 20px;
+      /deep/.el-tabs__nav-wrap::after {
+        height: 0;
+      }
+    }
+  }
+  .screen_l_b {
+    height: 110px;
+    line-height: 45px;
+    margin-top: 20px;
+    padding: 0 20px;
+    border-bottom: 1px solid #e3e3e3;
+    .title {
+      font-size: 18px;
+      color: #333;
+      // text-align: left;
+    }
+    .info {
+      font-size: 16px;
+      color: #999;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/result.vue

@@ -40,7 +40,8 @@
     </div>
     <!-- <div v-html="formData.text"></div> -->
     <div id="text">
-      <editor v-model="formData.text" :min-height="192" />
+      <!-- <editor v-model="formData.text" :min-height="192" /> -->
+      <div v-html="formData.text" />
     </div>
   </div>
 </template>
@@ -67,6 +68,16 @@ export default {
       formData: {}
     };
   },
+  watch: {
+    formData: {
+      handler: function() {
+        this.$nextTick(() => {
+          this.formatRichText(this.formData.downloadUrl);
+        });
+      }
+    },
+    deep: true
+  },
   computed: {
     ...mapGetters(['token'])
   },