|
|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div class="progess-chart">
|
|
|
+ <div class="client-list" v-for="(c,i) in datas" :key="i">
|
|
|
+ <div class="c-thead" v-if="type == 'unit'">
|
|
|
+ <strong class="c-name">{{c.class}}</strong>
|
|
|
+ <span class="c-count">项目数量</span>
|
|
|
+ <span class="c-time">最近合作日期</span>
|
|
|
+ </div>
|
|
|
+ <div class="c-thead" v-if="type == 'ent'">
|
|
|
+ <strong class="c-name" >{{c.buyerclass}}</strong>
|
|
|
+ <span class="c-count">中标数量</span>
|
|
|
+ <span class="c-count">平均折扣率</span>
|
|
|
+ <span class="c-time">最近合作日期</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar-container">
|
|
|
+ <div class="progress-bar-item" v-for="(item,index) in c.topData" :key="index">
|
|
|
+ <div class="item-label" v-if="type == 'unit'">
|
|
|
+ <span :class="!ishref ? 'no-href' : ''" class="ellipsis-2 item-name" @click="goEnt(item.entId)">{{item.winnerName}}</span>
|
|
|
+ <span class="item-count">{{item.countProject}}个</span>
|
|
|
+ <span class="item-time">{{item.lastTime}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-label" v-if="type == 'ent'">
|
|
|
+ <span @click="goEntInfo(item.name)" class="ellipsis-2 item-name">{{item.name}}</span>
|
|
|
+ <span class="item-count">{{item.count ? item.count + '个' : item.count}}</span>
|
|
|
+ <span class="item-count">{{(item.rate != null) ? item.rate + '%' : '--'}}</span>
|
|
|
+ <span class="item-time">{{item.time}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-progress">
|
|
|
+ <span class="item-money" v-if="item.countMoney">{{moneyFormat(item.countMoney)}}</span>
|
|
|
+ <span class="item-money" v-if="item.money">{{moneyFormat(item.money)}}</span>
|
|
|
+ <span class="item-progress-count active-progress" :style="{width: item.parent}"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { moneyUnit } from '@/utils/'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+export default {
|
|
|
+ name: 'progess-chart',
|
|
|
+ props: {
|
|
|
+ type: String,
|
|
|
+ // 传入的数据
|
|
|
+ datas: Array,
|
|
|
+ ishref: {
|
|
|
+ type: Boolean,
|
|
|
+ default () {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ info: state => state.user.info
|
|
|
+ }),
|
|
|
+ computedClientList () {
|
|
|
+ return this.datas.map((v) => {
|
|
|
+ v.topData = v.topData.filter((s) => {
|
|
|
+ return s.winnerName && s.winnerName.trim().length
|
|
|
+ })
|
|
|
+ return v
|
|
|
+ }).filter(function (v, i) {
|
|
|
+ return v.topData.length
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ mounted () {},
|
|
|
+ methods: {
|
|
|
+ moneyFormat (money) {
|
|
|
+ return moneyUnit(money)
|
|
|
+ },
|
|
|
+ goEntInfo (name) {
|
|
|
+ window.open('/swordfish/page_big_pc/unit_portrayal/' + encodeURIComponent(name))
|
|
|
+ },
|
|
|
+ goEnt (id) {
|
|
|
+ if (!this.ishref) return
|
|
|
+ if (this.info.power.indexOf(5) > -1) {
|
|
|
+ window.open('/swordfish/page_big_pc/ent_portrait/' + id)
|
|
|
+ } else {
|
|
|
+ window.open('/swordfish/page_big_pc/svip/ent_ser_portrait/' + id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.client-list{
|
|
|
+ margin-top: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+ .c-thead{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .c-name,.item-name{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ flex: 7;
|
|
|
+ }
|
|
|
+ .item-name{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .no-href {
|
|
|
+ text-decoration: none!important;
|
|
|
+ cursor: auto;
|
|
|
+ }
|
|
|
+ .c-count,.item-count,.c-time,.item-time{
|
|
|
+ flex: 1;
|
|
|
+ min-width: 100px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .c-rate,.item-rate{
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .c-name{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
+ .c-count,.c-rate,.c-time{
|
|
|
+ color: #686868;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .progress-bar-container {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .progress-bar-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .item-label {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
+ .item-name {
|
|
|
+ color: #171826;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .item-count {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #171826;
|
|
|
+ }
|
|
|
+ .item-progress {
|
|
|
+ position: relative;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: #EDEFF2;
|
|
|
+ border-radius: 0 10px 10px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .item-money{
|
|
|
+ position: absolute;
|
|
|
+ left: 16px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: #8F5828;
|
|
|
+ font-size: 14px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .item-progress-count {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 0 10px 10px 0;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ .active-progress{
|
|
|
+ background: #FAE7CA;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangxiaogang