浏览代码

wip:pc画像导出提交

wangkaiyue 3 年之前
父节点
当前提交
aa791b0c68

+ 43 - 0
src/api/modules/dataExport.js

@@ -0,0 +1,43 @@
+import request from '@/api'
+import qs from 'qs'
+
+// 通用选择导出
+// param
+// selectIds:多个加密三级页id【,】分割
+// from:来源页面
+// return:id
+export function getDataExportOrderId (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '/publicapply',
+    url: '/dataexpoet/bySelects',
+    method: 'post',
+    data
+  })
+}
+
+// 画像动态导出
+// isMember bool 是否是大会员
+// isWinner bool false 采购单位画像;true 中标企业画像
+export function getPortrayalSearchExportId (isMember, isWinner, data) {
+  let url = ''
+  if (isMember) {
+    if (isWinner) {
+      url = '/portrait/winner/winnerNewMsgExport'
+    } else {
+      url = '/portrait/buyer/getNewMsgExport'
+    }
+  } else {
+    if (isWinner) {
+      url = '/portrait/subVipPortrait/winnerNewMsgExport'
+    } else {
+      url = '/subVipPortrait/buyer/getNewMsgExport'
+    }
+  }
+  data = qs.stringify(data)
+  return request({
+    url: url,
+    method: 'post',
+    data
+  })
+}

+ 1 - 0
src/api/modules/index.js

@@ -11,3 +11,4 @@ export * from './coupon'
 export * from './svip'
 export * from './svip'
 export * from './file'
 export * from './file'
 export * from './customer'
 export * from './customer'
+export * from './dataExport'

二进制
src/assets/images/icon/collect.png


二进制
src/assets/images/icon/collected.png


二进制
src/assets/images/icon/export.png


二进制
src/assets/images/icon/tab-list.png


二进制
src/assets/images/icon/tab-table.png


+ 1 - 0
src/main.js

@@ -18,6 +18,7 @@ Vue.use(Toast)
 Vue.prototype.$message = Message
 Vue.prototype.$message = Message
 Vue.prototype.$echarts = echarts
 Vue.prototype.$echarts = echarts
 Vue.prototype.$alert = MessageBox.alert
 Vue.prototype.$alert = MessageBox.alert
+Vue.prototype.$confirm = MessageBox.confirm
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 
 // 正式环境下屏蔽console.log
 // 正式环境下屏蔽console.log

+ 82 - 54
src/views/portrayal/UnitPortrayal.vue

@@ -28,12 +28,13 @@
           <div class="unlock-btn" @click="goUnlock('去解锁')">去解锁>></div>
           <div class="unlock-btn" @click="goUnlock('去解锁')">去解锁>></div>
         </div>
         </div>
         <div class="supervip-bg" v-if="vipStatusNoMember">
         <div class="supervip-bg" v-if="vipStatusNoMember">
-          <div class="vip-balance">当月采购单位画像余额:<em class="highlight-text">{{usageInfo.surplus}}</em></div>
-          <div class="update-btn" @click.stop="goUpdate">{{vipStatusBtn}}</div>
+          <div class="vip-balance">当月采购单位画像余额:<em class="highlight-text">{{ usageInfo.surplus }}</em></div>
+          <div class="update-btn" @click.stop="goUpdate">{{ vipStatusBtn }}</div>
         </div>
         </div>
       </div>
       </div>
-      <div >
-        <div class="free-bg" :class="showFreeOpen ? 'fixedBanner' : ''" v-if="userInfo.isFree && userInfo.freeBuyerPort != 0">
+      <div>
+        <div class="free-bg" :class="showFreeOpen ? 'fixedBanner' : ''"
+             v-if="userInfo.isFree && userInfo.freeBuyerPort != 0">
           <div class="free-text">如需查看更多【采购单位全景分析】,请开通超级订阅</div>
           <div class="free-text">如需查看更多【采购单位全景分析】,请开通超级订阅</div>
           <div class="unlock-btn" @click="goUnlock('去开通')">去开通>></div>
           <div class="unlock-btn" @click="goUnlock('去开通')">去开通>></div>
         </div>
         </div>
@@ -41,11 +42,14 @@
       <!-- 采购单位通讯录 -->
       <!-- 采购单位通讯录 -->
       <ContactList name="buyer" titlename="采购单位通讯录" style="padding:32px 40px 32px;" v-if="!noBuyerAuth"></ContactList>
       <ContactList name="buyer" titlename="采购单位通讯录" style="padding:32px 40px 32px;" v-if="!noBuyerAuth"></ContactList>
       <div class="mask-bg-group" v-else>
       <div class="mask-bg-group" v-else>
-        <MaskCard @click="openBigPage('采购单位通讯录', getEntContactMap)" k="采购单位通讯录 " :key="'采购单位通讯录' + getEntContactMap.button + getEntContactMap.title" :item="getEntContactMap"></MaskCard>
+        <MaskCard @click="openBigPage('采购单位通讯录', getEntContactMap)" k="采购单位通讯录 "
+                  :key="'采购单位通讯录' + getEntContactMap.button + getEntContactMap.title"
+                  :item="getEntContactMap"></MaskCard>
       </div>
       </div>
       <div class="unit-info">
       <div class="unit-info">
         <div class="bidcomp">
         <div class="bidcomp">
-          <BidInfoActive whichPor="unitpor" @onPageChange="onLimitChange" :canselect="canSelect" title="采购单位分析"></BidInfoActive>
+          <BidInfoActive whichPor="unitpor" @onPageChange="onLimitChange" :canselect="canSelect"
+                         title="采购单位分析"></BidInfoActive>
         </div>
         </div>
         <div class="u-i-box" v-if="baseShow">
         <div class="u-i-box" v-if="baseShow">
           <div class="b-item">
           <div class="b-item">
@@ -72,10 +76,16 @@
         <div class="u-i-tip" v-if="baseShow">数据统计范围:{{ info.start }}-{{ info.end }}</div>
         <div class="u-i-tip" v-if="baseShow">数据统计范围:{{ info.start }}-{{ info.end }}</div>
       </div>
       </div>
       <!-- 招标动态 -->
       <!-- 招标动态 -->
-      <unit-list :noauth="noBuyerAuth" :usage="usageInfo" :bidparams="bidInfoParams" v-if="unitlistshow" @list="getList" @click="openCheckPop" @onClickUnlock="goEmitClick"></unit-list>
-      <unit-chart @isTrial="getIsTrail" @baseInfoBool="baseInfoBool" @showEmpty="showEmpty" :params="bidInfoParams" v-on:baseInfo="getBaseInfo"></unit-chart>
+      <Dynamic-list :key="dynamicKey"
+                    :config="{baseParam:{buyer: decodeURIComponent(this.$route.params.entName)},isWinner:false}"
+                    :filters="bidInfoParams" ref="pushList" :showMore="false"
+                    style="padding: 32px 40px 0;width: 936px"></Dynamic-list>
+      <!-- <unit-list :noauth="noBuyerAuth" :usage="usageInfo" :bidparams="bidInfoParams" v-if="unitlistshow" @list="getList" @click="openCheckPop" @onClickUnlock="goEmitClick"></unit-list>-->
+      <unit-chart @isTrial="getIsTrail" @baseInfoBool="baseInfoBool" @showEmpty="showEmpty" :params="bidInfoParams"
+                  v-on:baseInfo="getBaseInfo"></unit-chart>
       <div class="unit-big-upgrade-group" v-if="noBuyerAuth && !emptyShow">
       <div class="unit-big-upgrade-group" v-if="noBuyerAuth && !emptyShow">
-        <MaskCard @click="openBigPage(k, item)" v-for="(item, k) in getBigUpgradeMap" :key="k + item.button + item.title"
+        <MaskCard @click="openBigPage(k, item)" v-for="(item, k) in getBigUpgradeMap"
+                  :key="k + item.button + item.title"
                   :k="k" :item="item"></MaskCard>
                   :k="k" :item="item"></MaskCard>
       </div>
       </div>
       <Empty v-show="emptyShow" :images="require('@/assets/images/empty/jy-chagrin.png')">
       <Empty v-show="emptyShow" :images="require('@/assets/images/empty/jy-chagrin.png')">
@@ -99,19 +109,28 @@
 import Layout from '@/components/common/ContentLayout'
 import Layout from '@/components/common/ContentLayout'
 import UnitChart from './components/UnitChart'
 import UnitChart from './components/UnitChart'
 import UnitList from './components/UnitList'
 import UnitList from './components/UnitList'
+import DynamicList from './components/DynamicList'
 import BidInfoActive from './components/BidInfoActive'
 import BidInfoActive from './components/BidInfoActive'
 import ContactList from '@/components/contact-info/ContactInfo'
 import ContactList from '@/components/contact-info/ContactInfo'
 import MaskCard from '@/components/mask-card/MaskCard.vue'
 import MaskCard from '@/components/mask-card/MaskCard.vue'
 import CollectInfo from '@/components/collect-info/CollectInfo.vue'
 import CollectInfo from '@/components/collect-info/CollectInfo.vue'
 import Empty from '@/components/common/Empty'
 import Empty from '@/components/common/Empty'
 import { Dialog } from 'element-ui'
 import { Dialog } from 'element-ui'
-import { setLogs, getStatusCustomer, setStatusCustomer, getBuyerSelect, getVipBuyerSelect, getUsage } from '@/api/modules'
+import {
+  getBuyerSelect,
+  getStatusCustomer,
+  getUsage,
+  getVipBuyerSelect,
+  setLogs,
+  setStatusCustomer
+} from '@/api/modules'
 import { mapState } from 'vuex'
 import { mapState } from 'vuex'
 
 
 function getImgForBigUpgrade (name, bg = false, suffix = '.png') {
 function getImgForBigUpgrade (name, bg = false, suffix = '.png') {
   const temp = (bg ? 'bg/' : '') + name + suffix
   const temp = (bg ? 'bg/' : '') + name + suffix
   return require('@/assets/images/big/' + temp)
   return require('@/assets/images/big/' + temp)
 }
 }
+
 /* eslint-disable */
 /* eslint-disable */
 export default {
 export default {
   name: 'unit-portrayal',
   name: 'unit-portrayal',
@@ -123,6 +142,7 @@ export default {
     MaskCard,
     MaskCard,
     CollectInfo,
     CollectInfo,
     BidInfoActive,
     BidInfoActive,
+    DynamicList,
     [Dialog.name]: Dialog,
     [Dialog.name]: Dialog,
     Empty
     Empty
   },
   },
@@ -130,6 +150,7 @@ export default {
     return {
     return {
       isDialogShow: false,
       isDialogShow: false,
       loading: true,
       loading: true,
+      dynamicKey: new Date().getTime(),//筛选重新渲染动态数据
       info: {
       info: {
         buyerName: '',
         buyerName: '',
         province: '',
         province: '',
@@ -160,27 +181,6 @@ export default {
         bg: getImgForBigUpgrade('1-bg', true)
         bg: getImgForBigUpgrade('1-bg', true)
       },
       },
       bigUpgradeMap: {
       bigUpgradeMap: {
-        // 合作企业注册资本分布: {
-        //   title: '开通大会员',
-        //   subtitle: '通过分析合作企业注册资本、采购项目规模、利润率,全面洞察采购单位合作企业!',
-        //   img: getImgForBigUpgrade('9-big'),
-        //   bg: getImgForBigUpgrade('9-bg', true),
-        //   source: 'buyer_portrait_withCapitalData'
-        // },
-        // 合作企业年龄分布: {
-        //   title: '开通大会员',
-        //   subtitle: '通过分析合作企业年龄、数量、规模分布情况,全面洞察采购单位合作企业!',
-        //   img: getImgForBigUpgrade('10-big'),
-        //   bg: getImgForBigUpgrade('10-bg', true),
-        //   source: 'buyer_portrait_withEstablishData'
-        // },
-        // 合作企业注册地分布: {
-        //   title: '开通大会员',
-        //   subtitle: '通过分析合作企业的地址、数量、采购规模,了解采购单位营商环境,辅助投标决策!',
-        //   img: getImgForBigUpgrade('11-big'),
-        //   bg: getImgForBigUpgrade('11-bg', true),
-        //   source: 'buyer_portrait_withAreaData'
-        // },
         年度项目统计: {
         年度项目统计: {
           title: '开通大会员',
           title: '开通大会员',
           subtitle: '采购单位年度项目规模、增长趋势一目了然,快速分析市场!',
           subtitle: '采购单位年度项目规模、增长趋势一目了然,快速分析市场!',
@@ -304,7 +304,7 @@ export default {
       const freePort = info.isFree && info.freeBuyerPort > 0
       const freePort = info.isFree && info.freeBuyerPort > 0
       // 免费用户 体验过期 浏览过
       // 免费用户 体验过期 浏览过
       const freeTail = info.isFree && info.freeBuyerPort < 0
       const freeTail = info.isFree && info.freeBuyerPort < 0
-      return bigMember || svip  || svipTrial || freePort || freeTail
+      return bigMember || svip || svipTrial || freePort || freeTail
     },
     },
     // 可以查看画像权限,显示遮罩
     // 可以查看画像权限,显示遮罩
     noBuyerAuth () {
     noBuyerAuth () {
@@ -312,7 +312,7 @@ export default {
       const usage = this.usageInfo
       const usage = this.usageInfo
       const isFreeAuth = info.isFree && info.freeBuyerPort > 0
       const isFreeAuth = info.isFree && info.freeBuyerPort > 0
       const isVipAuth = info.vipStatus > 0 && info.viper && usage.surplus > 0
       const isVipAuth = info.vipStatus > 0 && info.viper && usage.surplus > 0
-      const isMember = info.power.indexOf(5)  !== -1
+      const isMember = info.power.indexOf(5) !== -1
       // 超级订阅用户是否访问过该画像
       // 超级订阅用户是否访问过该画像
       const vipTrial = info.vipStatus > 0 && info.viper && usage.surplus === 0 && usage.visited
       const vipTrial = info.vipStatus > 0 && info.viper && usage.surplus === 0 && usage.visited
       // 免费用户是否查看过该画像
       // 免费用户是否查看过该画像
@@ -359,7 +359,7 @@ export default {
         // console.log(this.shadeBottomBtnText)
         // console.log(this.shadeBottomBtnText)
         this.bigUpgradeMap[v].button = this.shadeBottomBtnText
         this.bigUpgradeMap[v].button = this.shadeBottomBtnText
       }
       }
-      return  this.bigUpgradeMap
+      return this.bigUpgradeMap
     },
     },
     // 遮罩按钮对应文案
     // 遮罩按钮对应文案
     shadeBottomBtnText () {
     shadeBottomBtnText () {
@@ -492,6 +492,7 @@ export default {
       this.unitlistshow = true
       this.unitlistshow = true
       this.loading = true
       this.loading = true
       this.bidInfoParams = JSON.parse(data)
       this.bidInfoParams = JSON.parse(data)
+      this.dynamicKey = new Date().getTime()
     },
     },
     showEmpty (data) {
     showEmpty (data) {
       this.chartShowArr = data
       this.chartShowArr = data
@@ -615,10 +616,11 @@ export default {
 /* eslint-enable */
 /* eslint-enable */
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-::v-deep{
-  .release_main{
-    position:relative;
-    .el-input__inner{
+::v-deep {
+  .release_main {
+    position: relative;
+
+    .el-input__inner {
       background: #fff;
       background: #fff;
       cursor: pointer;
       cursor: pointer;
       color: #1D1D1D;
       color: #1D1D1D;
@@ -626,6 +628,7 @@ export default {
     }
     }
   }
   }
 }
 }
+
 .icon_heart_gray,
 .icon_heart_gray,
 .icon_heart_red {
 .icon_heart_red {
   margin-right: 4px;
   margin-right: 4px;
@@ -633,11 +636,13 @@ export default {
   width: 18px;
   width: 18px;
   height: 18px;
   height: 18px;
 }
 }
-.icon_heart_gray{
+
+.icon_heart_gray {
   background: url('~@/assets/images/icon/icon-heart.png') no-repeat;
   background: url('~@/assets/images/icon/icon-heart.png') no-repeat;
   background-size: contain;
   background-size: contain;
 }
 }
-.icon_heart_red{
+
+.icon_heart_red {
   background: url('~@/assets/images/icon/icon-favorite.png') no-repeat;
   background: url('~@/assets/images/icon/icon-favorite.png') no-repeat;
   background-size: contain;
   background-size: contain;
 }
 }
@@ -648,12 +653,14 @@ export default {
     margin: 0 auto;
     margin: 0 auto;
     padding: 0 0 60px 0;
     padding: 0 0 60px 0;
   }
   }
+
   // width: 1200px;
   // width: 1200px;
   .mask-bg-group {
   .mask-bg-group {
     margin-top: 16px;
     margin-top: 16px;
     background: #fff;
     background: #fff;
     padding-top: 20px;
     padding-top: 20px;
   }
   }
+
   .unit-big-upgrade-group {
   .unit-big-upgrade-group {
     padding-top: 32px;
     padding-top: 32px;
     background: #fff;
     background: #fff;
@@ -666,11 +673,13 @@ export default {
         background: #ffffff;
         background: #ffffff;
         border-radius: 8px;
         border-radius: 8px;
       }
       }
+
       .el-dialog__header {
       .el-dialog__header {
         text-align: center;
         text-align: center;
         padding: 32px;
         padding: 32px;
         padding-bottom: 20px;
         padding-bottom: 20px;
       }
       }
+
       .el-dialog__body {
       .el-dialog__body {
         padding: 32px;
         padding: 32px;
         padding-top: 0;
         padding-top: 0;
@@ -681,6 +690,7 @@ export default {
         color: #686868;
         color: #686868;
         line-height: 22px;
         line-height: 22px;
       }
       }
+
       .el-dialog__title {
       .el-dialog__title {
         font-size: 18px;
         font-size: 18px;
         font-family: Microsoft YaHei, Microsoft YaHei-Regular;
         font-family: Microsoft YaHei, Microsoft YaHei-Regular;
@@ -688,10 +698,12 @@ export default {
         color: #1d1d1d;
         color: #1d1d1d;
         line-height: 28px;
         line-height: 28px;
       }
       }
+
       .el-dialog__footer {
       .el-dialog__footer {
         padding: 0;
         padding: 0;
       }
       }
     }
     }
+
     .unit-dialog-footer {
     .unit-dialog-footer {
       display: flex;
       display: flex;
       flex-direction: row;
       flex-direction: row;
@@ -699,12 +711,14 @@ export default {
       justify-content: space-between;
       justify-content: space-between;
       padding: 32px;
       padding: 32px;
       padding-top: 0;
       padding-top: 0;
+
       ::v-deep {
       ::v-deep {
         .el-button--default {
         .el-button--default {
           border: 1px solid #e0e0e0;
           border: 1px solid #e0e0e0;
           color: #686868;
           color: #686868;
           background: #fff;
           background: #fff;
         }
         }
+
         .el-button {
         .el-button {
           width: 132px;
           width: 132px;
           height: 36px;
           height: 36px;
@@ -719,6 +733,7 @@ export default {
           border-radius: 6px;
           border-radius: 6px;
 
 
         }
         }
+
         .el-button--primary {
         .el-button--primary {
           background: #2cb7ca;
           background: #2cb7ca;
           color: #ffffff;
           color: #ffffff;
@@ -751,6 +766,7 @@ export default {
       align-items: center;
       align-items: center;
       justify-content: space-between;
       justify-content: space-between;
       cursor: pointer;
       cursor: pointer;
+
       .follow-text {
       .follow-text {
         margin-left: 2px;
         margin-left: 2px;
         font-size: 14px;
         font-size: 14px;
@@ -837,25 +853,30 @@ export default {
     color: #999999;
     color: #999999;
     text-align: center;
     text-align: center;
   }
   }
+
   ::v-deep {
   ::v-deep {
-    .collect-dialog{
+    .collect-dialog {
       position: fixed;
       position: fixed;
       top: 50%;
       top: 50%;
       left: 50%;
       left: 50%;
       margin-top: 0;
       margin-top: 0;
       transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
     }
     }
-    .el-dialog{
+
+    .el-dialog {
       border-radius: 8px;
       border-radius: 8px;
     }
     }
-    .el-dialog__header{
+
+    .el-dialog__header {
       padding: 0;
       padding: 0;
     }
     }
-    .el-dialog__body{
+
+    .el-dialog__body {
       padding: 0;
       padding: 0;
     }
     }
   }
   }
-  .free-bg{
+
+  .free-bg {
     position: relative;
     position: relative;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
@@ -866,7 +887,8 @@ export default {
     background: url('~@/assets/images/free-bg.png') no-repeat center center;
     background: url('~@/assets/images/free-bg.png') no-repeat center center;
     background-size: 100% 100%;
     background-size: 100% 100%;
     border-radius: 8px;
     border-radius: 8px;
-    .give-tip{
+
+    .give-tip {
       position: absolute;
       position: absolute;
       top: 0;
       top: 0;
       left: 0;
       left: 0;
@@ -879,23 +901,26 @@ export default {
       color: #fff;
       color: #fff;
       text-align: center;
       text-align: center;
     }
     }
-    .free-text{
+
+    .free-text {
       margin-right: 32px;
       margin-right: 32px;
       font-size: 18px;
       font-size: 18px;
       color: #663600;
       color: #663600;
     }
     }
-    .unlock-btn{
+
+    .unlock-btn {
       width: 110px;
       width: 110px;
       height: 30px;
       height: 30px;
       line-height: 30px;
       line-height: 30px;
       text-align: center;
       text-align: center;
       background: linear-gradient(104deg, #D69C06 0%, #B16C05 100%);
       background: linear-gradient(104deg, #D69C06 0%, #B16C05 100%);
       border-radius: 20px;
       border-radius: 20px;
-      color:#fff;
+      color: #fff;
       cursor: pointer;
       cursor: pointer;
     }
     }
   }
   }
-  .supervip-bg{
+
+  .supervip-bg {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: space-between;
     justify-content: space-between;
@@ -906,23 +931,26 @@ export default {
     background: url('~@/assets/images/vip-bg.png') no-repeat center center;
     background: url('~@/assets/images/vip-bg.png') no-repeat center center;
     background-size: 100% 100%;
     background-size: 100% 100%;
     border-radius: 8px;
     border-radius: 8px;
-    .vip-balance{
+
+    .vip-balance {
       font-size: 14px;
       font-size: 14px;
       color: #686868;
       color: #686868;
     }
     }
-    .update-btn{
+
+    .update-btn {
       width: 90px;
       width: 90px;
       height: 30px;
       height: 30px;
       line-height: 30px;
       line-height: 30px;
       text-align: center;
       text-align: center;
       background: #2CB7CA;
       background: #2CB7CA;
       border-radius: 4px;
       border-radius: 4px;
-      color:#fff;
+      color: #fff;
       font-size: 14px;
       font-size: 14px;
       cursor: pointer;
       cursor: pointer;
     }
     }
   }
   }
-  .fixedBanner{
+
+  .fixedBanner {
     position: fixed;
     position: fixed;
     top: 63px;
     top: 63px;
     left: 50%;
     left: 50%;

文件差异内容过多而无法显示
+ 1201 - 0
src/views/portrayal/components/DynamicList.vue


+ 178 - 0
src/views/portrayal/components/DynamicListItem.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="article-item">
+    <input @click.stop class="custom-checkbox title-text-checkbox" name="bid-list" type="checkbox" :dataid="article.id">
+    <div class="item-right">
+      <div class="row-1">
+        <div class="a-i-left ellipsis" @click="onClick" v-html="calcTitle"></div>
+        <i class="icon-collect" @click.stop="collectChange(article, $event)" :class="{'checked': article.collection}"
+           :dataid="article.id"></i>
+      </div>
+      <div class="row-2">
+        <div class="tags">
+          <span class="tag" v-if="article.area">{{ article.area }}</span>
+          <span class="tag" v-if="article.bidstatus">{{ article.bidstatus }}</span>
+          <span class="tag" v-if="calcBudget">{{ calcBudget }}</span>
+        </div>
+        <span class="time-text">
+          <slot name="right-time">{{ dateFromNow(article.firsttime * 1000) }}</slot>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Tag } from 'element-ui'
+import { moneyUnit, dateFromNow, replaceKeyword } from '@/utils/'
+
+export default {
+  name: 'portrayal-article-item',
+  components: {
+    [Tag.name]: Tag
+  },
+  props: {
+    index: {
+      type: [String, Number],
+      default: '1'
+    },
+    article: {
+      type: Object,
+      default () {
+        return {
+          title: '', // 标题
+          area: '', // 区域
+          bidstatus: '', // 类型
+          firsttime: 0, // 时间
+          budget: 0, //预算金额
+          bidamount: 0,// 中标金额
+        }
+      }
+    }
+  },
+  computed: {
+    calcBudget () {
+      var cNum = 0
+      if (this.article.bidamount) {
+        cNum = this.article.bidamount
+      } else {
+        cNum = this.article.budget
+      }
+      if (cNum) {
+        return moneyUnit(cNum)
+      }
+      return ''
+    },
+    calcTitle () {
+      return `${this.index}. ${this.article.title}`
+    }
+  },
+  methods: {
+    dateFromNow,
+    onClick () {
+      this.$emit('onClick')
+    },
+    collectChange (item, event) {
+      this.$emit('onCollect', {
+        item: item,
+        event: event
+      })
+    }
+  }
+}
+</script>
+<style>
+.custom-toast .toast-container {
+  /* display: none; */
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  padding: 16px 32px;
+  font-size: 16px;
+  background: rgba(0, 0, 0, 0.65);
+  border-radius: 8px;
+  color: #fff;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 99;
+}
+</style>
+<style lang="scss" scoped>
+$border-color: #ECECEC;
+@include diy-icon('time', 20, 20);
+
+.article-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px 16px;
+  border-bottom: 1px solid $border-color;
+  cursor: pointer;
+
+  .item-right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .row-1, .row-2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    .row-2 {
+      padding-top: 8px;
+    }
+  }
+
+  &:first-of-type,
+  &:border-top {
+    border-top: 1px solid $border-color;
+  }
+
+  .icon-collect {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-left: 6px;
+    background: transparent url(https://cdn-ali.jianyu360.com/images/collect.png) center no-repeat;
+    background-size: contain;
+    cursor: pointer;
+    vertical-align: sub;
+  }
+
+  .icon-collect.checked {
+    background: transparent url(https://cdn-ali.jianyu360.com/images/collected.png) center no-repeat;
+    background-size: contain;
+  }
+
+  .a-i-left {
+    flex: 1;
+  }
+
+  .a-i-right,
+  .tags,
+  .time-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    padding: 1px 6px;
+    margin-right: 14px;
+    color: #2ABED1;
+    font-size: 13px;
+    line-height: 20px;
+    background: rgba(44, 183, 202, 0.08);
+    border-radius: 3px;
+  }
+
+  .time-text {
+    margin-left: 6px;
+    font-size: 14px;
+    color: #797a7e;
+    line-height: 24px;
+  }
+}
+</style>

+ 44 - 176
src/views/portrayal/components/UnitList.vue

@@ -1,34 +1,17 @@
 <template>
 <template>
   <div class="dynamic" v-show="domShow">
   <div class="dynamic" v-show="domShow">
-    <div class="ribbon">
-      <el-checkbox v-model="selectAll" class="d-title" @change="selectThisPage">
-        招标动态
-      </el-checkbox>
-      <div class="btns">
-        <el-button type="text" class="switch" icon="el-icon-jy-tab-list">列表</el-button>
-        <el-button type="text" class="switch active" icon="el-icon-jy-tab-table">表格</el-button>
-        <el-button type="text" class="line" disabled></el-button>
-        <el-button type="text" class="single" icon="el-icon-jy-export">数据导出</el-button>
-        <el-button type="text" class="line" disabled></el-button>
-        <el-button type="text" class="single" icon="el-icon-jy-collect">标讯收藏</el-button>
-      </div>
-    </div>
+    <div class="d-title">招标动态</div>
     <div class="d-content" v-if="showDt">
     <div class="d-content" v-if="showDt">
-      <div class="d-list" v-for="item in dt.list" :key="item.id">
-        <el-checkbox class="choice" @change="selectThisPage">
-          <div class="d-top">
-            <span class="d-title" @click="goDetail(item.id)"> {{ item.title }}</span>
-            <i class="el-icon-jy-collect"></i>
-          </div>
-          <div class="d-info">
-            <p class="i-main">
-              <span v-if="item.area" class="i-area">{{ item.area }}</span>
-              <span v-if="item.bidstatus" class="i-type">{{ item.bidstatus }}</span>
-              <span v-if="item.bidamount" class="i-type">{{ item.bidamount }}</span>
-            </p>
-            <p class="i-time">{{ item.firsttime }}</p>
-          </div>
-        </el-checkbox>
+      <div class="d-list" v-for="item in dt.list" :key="item.id" @click="goDetail(item.id)">
+        <div class="d-title">{{item.title}}</div>
+        <div class="d-info">
+          <p class="i-main">
+            <span v-if="item.area" class="i-area">{{item.area}}</span>
+            <span v-if="item.bidstatus" class="i-type">{{item.bidstatus}}</span>
+            <span v-if="item.bidamount" class="i-type">{{item.bidamount}}</span>
+          </p>
+          <p class="i-time">{{item.firsttime}}</p>
+        </div>
       </div>
       </div>
       <div class="pages" :key="isUpdatePageNum">
       <div class="pages" :key="isUpdatePageNum">
         <el-pagination
         <el-pagination
@@ -46,9 +29,9 @@
       :title="getDialogInfo.title"
       :title="getDialogInfo.title"
       :visible.sync="isDialogShow"
       :visible.sync="isDialogShow"
     >
     >
-      <div class="unit-dialog-content">{{ getDialogInfo.content }}</div>
+      <div class="unit-dialog-content">{{getDialogInfo.content}}</div>
       <span slot="footer" class="unit-dialog-footer">
       <span slot="footer" class="unit-dialog-footer">
-          <el-button type="primary" @click="openBigPage">{{ getButtonTip }}</el-button>
+          <el-button type="primary" @click="openBigPage">{{getButtonTip}}</el-button>
           <el-button @click="isDialogShow = false">取消</el-button>
           <el-button @click="isDialogShow = false">取消</el-button>
         </span>
         </span>
     </el-dialog>
     </el-dialog>
@@ -62,10 +45,10 @@
       <div>
       <div>
         每购买1个省,每月可查看<i>5个</i>采购单位画像,<i>上限为80个</i>,您当前订阅了
         每购买1个省,每月可查看<i>5个</i>采购单位画像,<i>上限为80个</i>,您当前订阅了
         <span v-if="usage.provin == -1">全国,查看机会已经消耗完毕,如需要更多服务,请前往联系客服。</span>
         <span v-if="usage.provin == -1">全国,查看机会已经消耗完毕,如需要更多服务,请前往联系客服。</span>
-        <span v-else>{{ usage.provin }}个省,如需查看更多,前往订阅更多省份。</span>
+        <span v-else>{{usage.provin}}个省,如需查看更多,前往订阅更多省份。</span>
       </div>
       </div>
       <div slot="footer" class="dialog-footer">
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click.stop="goHandle(dialogBtnText)">{{ dialogBtnText }}</el-button>
+        <el-button type="primary" @click.stop="goHandle(dialogBtnText)">{{dialogBtnText}}</el-button>
         <el-button @click="tipDialog = false">取 消</el-button>
         <el-button @click="tipDialog = false">取 消</el-button>
       </div>
       </div>
     </el-dialog>
     </el-dialog>
@@ -75,16 +58,14 @@
 import { getUnitDt, getVipUnitDt } from '@/api/modules/'
 import { getUnitDt, getVipUnitDt } from '@/api/modules/'
 import { moneyUnit } from '@/utils/'
 import { moneyUnit } from '@/utils/'
 import Empty from '@/components/common/Empty'
 import Empty from '@/components/common/Empty'
-import { Button, Checkbox, Dialog, Pagination } from 'element-ui'
+import { Pagination, Dialog, Button } from 'element-ui'
 import { mapState } from 'vuex'
 import { mapState } from 'vuex'
-
 export default {
 export default {
   name: 'dynamic',
   name: 'dynamic',
   components: {
   components: {
     [Pagination.name]: Pagination,
     [Pagination.name]: Pagination,
     [Dialog.name]: Dialog,
     [Dialog.name]: Dialog,
     [Button.name]: Button,
     [Button.name]: Button,
-    [Checkbox.name]: Checkbox,
     Empty
     Empty
   },
   },
   props: {
   props: {
@@ -118,8 +99,7 @@ export default {
       reqCount: 0,
       reqCount: 0,
       bidataparams: {},
       bidataparams: {},
       domShow: false,
       domShow: false,
-      tipDialog: false,
-      selectAll: false
+      tipDialog: false
     }
     }
   },
   },
   watch: {
   watch: {
@@ -198,8 +178,7 @@ export default {
   created () {
   created () {
     this.getUnitDtFn(this.bidparams)
     this.getUnitDtFn(this.bidparams)
   },
   },
-  mounted () {
-  },
+  mounted () {},
   methods: {
   methods: {
     openBigPage () {
     openBigPage () {
       this.isDialogShow = false
       this.isDialogShow = false
@@ -284,48 +263,33 @@ export default {
       } else {
       } else {
         this.$router.push('/free/svip/buy?type=upgrade')
         this.$router.push('/free/svip/buy?type=upgrade')
       }
       }
-    },
-    selectThisPage () {
-      // 全部选中
-
     }
     }
   }
   }
 }
 }
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-@include diy-icon('tab-list', 16, 14);
-@include diy-icon('tab-table', 16, 14);
-@include diy-icon('export', 18, 18);
-@include diy-icon('collect', 20, 20);
-@include diy-icon('collected', 20, 20);
-
-.dynamic {
+.dynamic{
   padding: 32px 40px 0;
   padding: 32px 40px 0;
   background: #fff;
   background: #fff;
-
   .empty-container.mtb60 {
   .empty-container.mtb60 {
     margin: 0 auto;
     margin: 0 auto;
   }
   }
-
   .unit-dialog-group {
   .unit-dialog-group {
     ::v-deep {
     ::v-deep {
       .el-dialog__header {
       .el-dialog__header {
         display: none;
         display: none;
       }
       }
-
       .el-dialog {
       .el-dialog {
         width: 380px;
         width: 380px;
         height: auto;
         height: auto;
         background: #ffffff;
         background: #ffffff;
         border-radius: 8px;
         border-radius: 8px;
       }
       }
-
       .el-dialog__header {
       .el-dialog__header {
         text-align: center;
         text-align: center;
         padding: 32px;
         padding: 32px;
         padding-bottom: 20px;
         padding-bottom: 20px;
       }
       }
-
       .el-dialog__body {
       .el-dialog__body {
         padding: 32px;
         padding: 32px;
         padding-top: 0;
         padding-top: 0;
@@ -336,7 +300,6 @@ export default {
         color: #686868;
         color: #686868;
         line-height: 22px;
         line-height: 22px;
       }
       }
-
       .el-dialog__title {
       .el-dialog__title {
         font-size: 18px;
         font-size: 18px;
         font-family: Microsoft YaHei, Microsoft YaHei-Regular;
         font-family: Microsoft YaHei, Microsoft YaHei-Regular;
@@ -344,12 +307,10 @@ export default {
         color: #1d1d1d;
         color: #1d1d1d;
         line-height: 28px;
         line-height: 28px;
       }
       }
-
       .el-dialog__footer {
       .el-dialog__footer {
         padding: 0;
         padding: 0;
       }
       }
     }
     }
-
     .unit-dialog-footer {
     .unit-dialog-footer {
       display: flex;
       display: flex;
       flex-direction: row;
       flex-direction: row;
@@ -357,14 +318,12 @@ export default {
       justify-content: space-between;
       justify-content: space-between;
       padding: 32px;
       padding: 32px;
       padding-top: 0;
       padding-top: 0;
-
       ::v-deep {
       ::v-deep {
         .el-button--default {
         .el-button--default {
           border: 1px solid #e0e0e0;
           border: 1px solid #e0e0e0;
           color: #686868;
           color: #686868;
           background: #fff;
           background: #fff;
         }
         }
-
         .el-button {
         .el-button {
           width: 132px;
           width: 132px;
           height: 36px;
           height: 36px;
@@ -379,7 +338,6 @@ export default {
           border-radius: 6px;
           border-radius: 6px;
 
 
         }
         }
-
         .el-button--primary {
         .el-button--primary {
           background: #2cb7ca;
           background: #2cb7ca;
           color: #ffffff;
           color: #ffffff;
@@ -388,12 +346,11 @@ export default {
       }
       }
     }
     }
   }
   }
-
-  .tip-dialog {
-    ::v-deep {
+  .tip-dialog{
+    ::v-deep{
       .el-button--primary,
       .el-button--primary,
       .el-button--primary:hover,
       .el-button--primary:hover,
-      .el-button--primary:focus {
+      .el-button--primary:focus{
         width: 132px;
         width: 132px;
         height: 36px;
         height: 36px;
         margin-right: 52px;
         margin-right: 52px;
@@ -404,26 +361,22 @@ export default {
         color: #fff;
         color: #fff;
         border: 0;
         border: 0;
       }
       }
-
-      .el-dialog__header {
+      .el-dialog__header{
         padding: 0;
         padding: 0;
       }
       }
-
-      .el-dialog__body {
+      .el-dialog__body{
         padding: 32px;
         padding: 32px;
         color: #686868;
         color: #686868;
         font-size: 14px;
         font-size: 14px;
         line-height: 22px;
         line-height: 22px;
         text-align: justify;
         text-align: justify;
       }
       }
-
-      .el-dialog__body i {
+      .el-dialog__body i{
         color: #2CB7CA;
         color: #2CB7CA;
       }
       }
-
       .el-button--default,
       .el-button--default,
       .el-button--default:hover,
       .el-button--default:hover,
-      .el-button--default:focus {
+      .el-button--default:focus{
         width: 132px;
         width: 132px;
         height: 36px;
         height: 36px;
         text-align: center;
         text-align: center;
@@ -433,138 +386,53 @@ export default {
         color: #686868;
         color: #686868;
         border: 1px solid #DCDFE6;
         border: 1px solid #DCDFE6;
       }
       }
-
-      .el-dialog__footer {
+      .el-dialog__footer{
         padding-bottom: 32px;
         padding-bottom: 32px;
       }
       }
     }
     }
   }
   }
-
-  .ribbon {
-    display: flex;
-    flex-direction: row;
-    height: 28px;
+  .d-title{
+    font-size: 18px;
+    color: #1d1d1d;
     line-height: 28px;
     line-height: 28px;
-    justify-content: space-between;
-
-    ::v-deep .el-checkbox {
-      .el-checkbox__input {
-        margin-bottom: 3px;
-      }
-
-      .el-checkbox__label {
-        font-size: 18px;
-        color: #1d1d1d;
-        line-height: 28px;
-        height: 28px;
-        font-weight: 400;
-      }
-    }
-
-    .btns {
-      display: flex;
-      align-items: center;
-
-      .el-button {
-        margin-left: 16px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        height: 24px;
-        font-weight: 400;
-        font-size: 14px;
-      }
-
-      .el-button.single {
-        color: #1d1d1d;
-      }
-
-      .el-button.switch {
-        color: #1d1d1d;
-
-        ::v-deep i {
-          filter: grayscale(1);
-        }
-      }
-
-      .el-button.switch.active {
-        color: #2CB7CA;
-
-        ::v-deep i {
-          filter: grayscale(0);
-        }
-      }
-
-      .line.el-button {
-        border-left: 1px solid #e0e0e0;
-        height: 20px;
-      }
-    }
   }
   }
-
-  .d-list {
+  .d-list{
     padding: 18px 0;
     padding: 18px 0;
     border-bottom: 1px solid #ECECEC;
     border-bottom: 1px solid #ECECEC;
-
-    .el-checkbox {
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      ::v-deep .el-checkbox__label {
-        width: 100%;
-      }
-
-      .d-top {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      .d-title {
-        font-size: 16px;
-        line-height: 24px;
-        color: #1D1D1D;
-        cursor: pointer;
-      }
-
-      i {
-        cursor: pointer;
-      }
+    cursor: pointer;
+    .d-title{
+      font-size: 16px;
+      line-height: 24px;
+      color: #1D1D1D;
     }
     }
-
-    .d-info {
+    .d-info{
       display: flex;
       display: flex;
+      align-items: center;
       justify-content: space-between;
       justify-content: space-between;
-      align-items: end;
     }
     }
-
-    .i-main {
+    .i-main{
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       margin-top: 8px;
       margin-top: 8px;
     }
     }
-
-    .i-area, .i-type {
+    .i-area,.i-type{
       display: inline-block;
       display: inline-block;
       padding: 0 8px;
       padding: 0 8px;
       margin-right: 8px;
       margin-right: 8px;
       color: #2CB7CA;
       color: #2CB7CA;
       font-size: 12px;
       font-size: 12px;
       line-height: 20px;
       line-height: 20px;
-      background: rgba(44, 183, 202, 0.08);
+      background: rgba(44,183,202,0.08);
       border-radius: 4px;
       border-radius: 4px;
-      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05);
+      box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05);
     }
     }
-
-    .i-time {
+    .i-time{
       color: #999999;
       color: #999999;
       font-size: 12px;
       font-size: 12px;
       line-height: 20px;
       line-height: 20px;
     }
     }
   }
   }
-
-  .pages {
+  .pages{
     margin-top: 16px;
     margin-top: 16px;
     text-align: center;
     text-align: center;
   }
   }

部分文件因为文件数量过多而无法显示