添加权限信息、企业画像

src/App.vue

@@ -6,12 +6,36 @@
 
 <script>
 // @ is an alias to /src
+import { getUserPower } from '@/api/modules'
+import { mapState, mapMutations } from 'vuex'
 export default {
   components: {},
   data () {
     return {
       cashViews: []
     }
+  },
+  created () {
+    this.getUserRoot()
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user.info
+    })
+  },
+  methods: {
+    ...mapMutations('user', [
+      'setUserInfo',
+      'setUserPower'
+    ]),
+    getUserRoot () {
+      getUserPower().then(res => {
+        if (res.error_code === 0) {
+          this.setUserInfo(res.data)
+          this.setUserPower(res.data.power)
+        }
+      })
+    }
   }
 }
 </script>

src/api/modules/chart.js

@@ -60,3 +60,33 @@ export function getEntChangeList (data) {
     data
   })
 }
+
+// 采购单位画像-中标动态
+export function getNewMsg (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/portrait/winner/getNewMsg',
+    method: 'post',
+    data
+  })
+}
+
+// 添加关注的企业*
+export function setFollowEnt (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/follow/ent/addFollow',
+    method: 'post',
+    data
+  })
+}
+
+// 取消关注的企业*
+export function setCancelEnt (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/follow/ent/delFollow',
+    method: 'post',
+    data
+  })
+}

src/store/user.js

@@ -1,9 +1,17 @@
 export default {
   namespaced: true,
   state: () => ({
-    power: []
+    power: [],
+    info: {}
   }),
-  mutations: {},
+  mutations: {
+    setUserInfo (state, info) {
+      state.info = info
+    },
+    setUserPower (state, power) {
+      state.power = power
+    }
+  },
   actions: {},
   getters: {}
 }

src/views/portrayal/EntPortrayal.vue

@@ -2,7 +2,10 @@
   <div class="ent-portrayal">
     <div class="ent-header">
       <div class="name">讯飞智元信息科技有限公司</div>
-      <div></div>
+      <div class="ent_follow" @click="setFollow()">
+        <span :class="follow.classActive"></span>
+        <span class="follow_text">关注</span>
+      </div>
     </div>
     <div class="ent-content">
       <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -11,6 +14,16 @@
           <EntHistoryForm></EntHistoryForm>
         </el-tab-pane>
         <el-tab-pane label="中标信息" name="2">
+          <div class="pro_info">
+            <ul class="pro_info_ul">
+              <li class="pro_list" v-for="(item, index) in proData" :key="index">
+                <div class="pro_li_con">{{item.count}}</div>
+                <div class="pro_li_label">{{item.label}}</div>
+              </li>
+            </ul>
+            <div class="pro_info_tip">数据统计范围：{{dateRange.start}}-{{dateRange.end}}</div>
+          </div>
+          <ProActive></ProActive>
           <ent-chart :active="activeName" v-on:entInfo="getEntInfo"></ent-chart>
         </el-tab-pane>
       </el-tabs>
@@ -21,7 +34,10 @@
 import EntChart from './components/EntChart'
 import EntForm from './components/EntForm'
 import EntHistoryForm from './components/EntHistoryForm'
+import ProActive from './components/ProActive'
 import { Tabs, TabPane } from 'element-ui'
+import { moneyUnit, dateFormatter } from '@/utils'
+import { setFollowEnt, setCancelEnt } from '@/api/modules'
 export default {
   name: 'ent-portrayal',
   components: {
@@ -29,11 +45,21 @@ export default {
     [TabPane.name]: TabPane,
     EntChart,
     EntForm,
-    EntHistoryForm
+    EntHistoryForm,
+    ProActive
   },
   data () {
     return {
-      activeName: '1'
+      activeName: '1',
+      proData: [],
+      dateRange: { // 数据统计范围
+        start: 0,
+        end: 0
+      },
+      follow: {
+        classActive: 'icon_heart_gray',
+        text: '关注'
+      }
     }
   },
   computed: {},
@@ -45,6 +71,51 @@ export default {
     },
     getEntInfo (data) {
       console.log(data)
+      this.proData = [
+        {
+          label: '项目数量',
+          count: data.project_count + '个'
+        },
+        {
+          label: '项目金额',
+          count: moneyUnit(data.bidamount_count)
+        },
+        {
+          label: '项目省份',
+          count: data.area_count + '个'
+        },
+        {
+          label: '项目客户',
+          count: data.buyer_count + '个'
+        }
+      ]
+      this.dateRange.start = dateFormatter(data.timeRange.start * 1000, 'yyyy/MM/dd')
+      this.dateRange.end = dateFormatter(data.timeRange.end * 1000, 'yyyy/MM/dd')
+    },
+    // 关注
+    setFollow () {
+      if (this.follow.text === '关注') {
+        // entId: decodeURIComponent(getParam('eId'))
+        setFollowEnt({ entId: 'ABCZnZoYylYMywvGWBkcwc4CzMZQTRmYUJ9KCgwOS9FfFNwcjMoNwkwOGNmaHAoKFxTDRg%253D' }).then(res => {
+          console.log(res)
+          if (res.error_code === 0) {
+            if (res.data === 'success') {
+              this.follow.classActive = 'icon_heart_red'
+              this.follow.text = '已关注'
+            }
+          }
+        })
+      } else {
+        setCancelEnt({ entId: 'ABCZnZoYylYMywvGWBkcwc4CzMZQTRmYUJ9KCgwOS9FfFNwcjMoNwkwOGNmaHAoKFxTDRg%253D' }).then(res => {
+          console.log(res)
+          if (res.error_code === 0) {
+            if (res.data === 'success') {
+              this.follow.classActive = 'icon_heart_gray'
+              this.follow.text = '关注'
+            }
+          }
+        })
+      }
     }
   }
 }
@@ -54,8 +125,38 @@ export default {
   width: 920px;
   margin: 32px auto;
   .ent-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 32px 40px;
     background: #fff;
+    .ent_follow{
+      display: flex;
+      cursor: pointer;
+      .icon_heart_gray{
+        margin-right: 4px;
+        display: flex;
+        width: 18px;
+        height: 18px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAADSElEQVRYR+2X30sUURTHv2d2tnywnoW2MAoSIjKot6CihwqMknowcLZsd6YVg4IIetuWiHoI8qElnRnTZhc0MDQKqreCHoICEwQNlKK2fyCClJ2dE3dTWHXn16rgg/N6z4/P/Z57zr1DWGcfrTMebAD5VWRDoRUrpD+xjsDBJQBHwRQTAYkwBeZXkkQDiYTytTJJ78DALrIjKWJuAVEjM2QQFwC8ixB1JxLKuBeUa8my2Wz9pk1bH4PQ7hFgFoT7hR/TdzOZjN3b298kReQxAHVuPgwMFed+q11dXX+q2VQFEjDRzVteE+hw2WlejVLJnnGciCzL0l6H+ToRmsvrhOHCj+kLDQ2NMTkamQToI4jzpSLGJalkE0X3MHEbAWfL4YAPxbnfp6pBVQXSzdwgAW3M+ENw2lX14otquzGM/A0G3ycSZfkPBTTKmUzHbDV7XbdOgGiYCPUA8mpSUZbaLQPq68vtdxhfyjtx+KSmxd961Vzvy52Dg6FKKFE+Nx/DeHoGJI2W40t8VLscf19puwxIN61+Al1iYFRLKq1+XSHWK6HsIu/r7IxPePkZhvUSRC0MHtCS8Q5PINO0vjGoEUxtqtr+LAiQsDHN/HFmp0lV41k/H7EBYgwz+LuWjO/0VsjIFYX8QXbql9htXdf7m0mSx5hha6oS9QQyzNxf0bYlmw+lUvHPtSb18uvpsQ5GZPoUDMiwJkHUBOKkmoj3rQWQaeYvivMDYEJNKvu8FTKshyC6LiarmlSOrQWQbuTGxAxj4IGWVG56AmXN3O4oY7LcxsxXgxzSMNC6mbtGQDfAs06pdODKlY4pTyCxaBjWPRDdEjWGhDYtoTwPk9T1MC+eWbfVhJLxHYzCIJ1Oy7EduwfBOL9aUEEHqOvluppQQWGEGJ4PtNWACgPjC7TS8oWFCQRUK1QtMIGBFqC2xXaNkLgUfbpvEQzzm0Jh5rTXC8C37d3aNp3ur4vFIiMgOukGtRym1Or2PqqWJ/RfhxfUSmFClaxyN0uhCJxyiGRiPJqf8G8KhXDKLMQPrdCCYyXUIunLZ6Y2mJoVqoTatl2+A0aKiG0G5X/9tG+GOTOBro7VuLdqjVFzyWpN6Oe3AbShkJ8Cfuv/AMkozTS0zinfAAAAAElFTkSuQmCC) no-repeat;
+        background-size: contain;
+      }
+      .icon_heart_red{
+        margin-right: 4px;
+        display: flex;
+        width: 18px;
+        height: 18px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAACBElEQVRYR+3Xv0scQRTA8e+TC0TwTwiYkBQ2IvYBx1QJJIVgkUAE90QI2KQR0qmEkBSBpAlpEvcKwRSCTUC7G8E/QEFQKy/gnxA0kGMn7HLIJW7mx7q3WNw0V9zMm8+9fftmTrhmQ66Zhz7I9UT6Gbpyhszq5ARiZgGF4VYn4BHCdxJpyFzzuHsT03hwlyR5gfAYuI2hhnAKaBL5KHPNfRvqv4/MfFJDDPIZ4bklwC/gHS3eZHOGWQJeIdQsa75xxrws6J95c3JBHcwWwn1XirPvDRvZpzDtOX+Xcx7lofJBsVoHnnoFLzrJsCZ1PfPv8ksg83VyjAGzV3SfoHVGlNSbO91rLoNiFQNpEVcxGhLpyAU6yd6OakZLIn3HDlpVvx1vSXlUQ1vq+oYrQ+fAzfJ2tUTyBB0CIxWBDqSuR10Z+gC8rAQkvJdZvWgHfVH3GOCwgjpKu/y4RPrICsoab6zeZkdAb8eyRHrF2Rgz0JKqMcy691EQCk+Pmh88kxXd9gL1FGXBpPtaL2ilZ8qBcYJKzZQHxgtUCsoT4w3qQm12boIhZbxNiyd5BZwXJOiSb2KVHimbwENP0TYwJZFOe47XCAJ1epQvKhgT9Mi6f55HpgphCoMcmSqMuRLoAiW8JiH929NGWMOwGFIz3p3aqwJ7MCm4qHtg+CtkH+TKcD9Drgz9AS0gsyVs0KiWAAAAAElFTkSuQmCC) no-repeat;
+        background-size: contain;
+      }
+      .follow_text{
+        font-size: 14px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        color: #686868;
+        line-height: 22px;
+      }
+    }
   }
   .ent-content{
     margin-top: 16px;
@@ -81,6 +182,60 @@ export default {
     ::v-deep.el-tabs__content{
       padding: 0 40px 32px;
     }
+    .pro_info{
+      width: 100%;
+      height: 171px;
+      .pro_info_ul{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        background: #fff;
+        .pro_list{
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin-top: 32px;
+          width: 210px;
+          height: 78px;
+          .pro_li_con{
+            font-size: 20px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            color: #2cb7ca;
+            line-height: 32px;
+          }
+          .pro_li_label{
+            font-size: 14px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            color: #686868;
+            line-height: 22px;
+          }
+        }
+        .pro_list:after{
+          content: '';
+          position: absolute;
+          right: 0;
+          width: 0px;
+          height: 46px;
+          border: 0.5px solid #ececec;
+        }
+      }
+      .pro_info_tip{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 12px;
+        width: 840px;
+        height: 17px;
+        font-size: 12px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
   }
 }
 </style>

src/views/portrayal/components/EntHistoryForm.vue

@@ -44,10 +44,8 @@ export default {
     getDetail () {
       const that = this
       getEntChangeList({ entId: 'ABCZnEFZCkoLys6GXt6cHISMTA%2FDjdjAWByPB4WPy43YGlwcg47NF8oOHdmCXEEDlxTDFU%3D' }).then(res => {
-        console.log(Object.keys(res.data[0]))
         res.data.forEach(function (item, index) {
           let dataArr = {}
-          console.log(item[Object.keys(item)])
           dataArr = {
             times: Object.keys(item),
             timeData: item[Object.keys(item)]

src/views/portrayal/components/ProActive.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="proactive">
+    <div class="pro_active_head">
+      项目动态
+    </div>
+    <div class="pro_ul">
+      <div class="pro_list" v-for="(item, index) in listState.list" :key="index">
+        <div class="pro_li_title">{{item.title}}</div>
+        <div class="pro_li_info">
+          <div class="li_left">
+            <span class="tags">{{item.area}}</span>
+            <span class="tags">{{item.bidstatus}}</span>
+            <span class="tags">{{moneyUnit(item.bidamount)}}</span>
+          </div>
+          <div class="li_right">
+            {{dateFormatter(item.firsttime*1000, 'yyyy-MM-dd')}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="el-pagination-container">
+      <el-pagination
+        background
+        layout="prev, pager, next, ->"
+        :hide-on-single-page="true"
+        :current-page="listState.pageNum"
+        :page-size="listState.pageSize"
+        :total="listState.total"
+        @current-change="onPageChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Pagination } from 'element-ui'
+import { getNewMsg } from '@/api/modules'
+import { getParam, moneyUnit, dateFormatter } from '@/utils/'
+export default {
+  name: 'proactive',
+  components: {
+    [Pagination.name]: Pagination
+  },
+  data () {
+    return {
+      listState: {
+        loaded: true, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 0, // 一共多少条数据
+        list: [] // 查询请求返回的数据
+      }
+    }
+  },
+  created () {
+    this.getProActivcList()
+  },
+  methods: {
+    moneyUnit,
+    dateFormatter,
+    getProActivcList () {
+      // let paramas = {
+      // }
+      getNewMsg({ entId: decodeURIComponent(getParam('eId')), pageSize: 5 }).then(res => {
+        console.log(res)
+        if (res.error_code === 0) {
+          this.listState.list = res.data.list
+          this.listState.total = res.data.count
+        }
+      })
+    },
+    onPageChange (p) {
+      this.listState.pageNum = p
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.proactive{
+  margin-top: 64px;
+  .pro_active_head{
+    margin-bottom: 16px;
+    height: 28px;
+    font-size: 18px;
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    font-weight: 400;
+    text-align: LEFT;
+    color: #1d1d1d;
+    line-height: 28px;
+  }
+  .pro_ul{
+    width: 100%;
+    .pro_list{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      min-height: 90px;
+      box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+      .pro_li_title{
+        height: 24px;
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: LEFT;
+        color: #1d1d1d;
+        line-height: 24px;
+        text-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+      }
+      .pro_li_info{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+        .li_left{
+          display: flex;
+          align-items: center;
+          .tags{
+            display: flex;
+            padding: 1px 8px;
+            opacity: 1;
+            background: #EEF9FB;
+            border-radius: 4px;
+            box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+            font-size: 12px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            text-align: CENTER;
+            color: #2cb7ca;
+            line-height: 20px;
+          }
+        }
+        .li_right{
+          font-size: 12px;
+          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+          font-weight: 400;
+          color: #999999;
+          line-height: 20px;
+          text-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+        }
+      }
+    }
+  }
+  .el-pagination-container{
+    margin-right: 40px;
+  }
+}
+
+</style>