码迷,mamicode.com
首页 > 其他好文 > 详细

工作小记录-首页

时间:2021-07-01 17:00:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:direct   compute   baseline   localhost   账号   span   ase   lamp   rgb   

<div class="content" style="padding: 0px 0px 0 0px;min-height:850px;">
    <div id="home">
        <div class="home-top">
            <div class="left">
                <div class="left-left">
                    <div class="avatarBox">
                        <img src="@/assets/images/avatar.png"
                            :style="{width:‘100px‘,height:‘100px‘,display:‘inline-block‘}" />
                    </div>
                    <div style="color: #1890ff;">{{info.account}}</div>
                    <a-tooltip :title="roleName">
                        <div
                            style="text-align: center;padding-top:5px;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
                            用户角色:{{roleName}}</div>
                    </a-tooltip>

                </div>
                <div class="left-right">
                    <!-- <div>{{ceshi}}</div> -->
                    <div>{{monment(ceshi1)}}</div>
                    <!-- <div style="font-size: 14px;">{{date}}</div>
                    <div style="font-size: 14px;">{{week}}</div> -->
                </div>
            </div>
            <div class="right">
                <div class="top-right">
                    <a-icon type="schedule" theme="twoTone" twoToneColor="#1890ff" style="font-size: 24px;" />
                    <span style="font-weight: 700;margin-left: 8px;">待办事项</span>
                </div>
                <div class="bottom-right">
                    <a-button v-if="isSystem" type="primary" @click="clean" :loading="loading" class="mr8">全半角清洗
                    </a-button>
                    <a-button v-if="isSystem" type="primary" @click="getInfo" :loading="infoLoading" class="mr8">同步客户信息
                    </a-button>
                    <a-button v-if="isSystem" type="primary" @click="getuserInfo" :loading="userLoading" class="mr8">
                        同步法人、条线、产品信息</a-button>
                    <!-- <a-button v-if="isSystem" type="primary" @click="handle()" :loading="userLoading" class="mr8">关闭</a-button> -->
                </div>
            </div>
        </div>
    </div>
    <div class="center" v-if="isSuperisSystem">
        <!-- <h3>今日数据摘要
            <a-icon
            type="question-circle"
            theme="twoTone"
            twoToneColor=‘#ff6700‘
            style="font-size: 17px;vertical-align: baseline;margin-left:5px;"
        />
        </h3> -->
        <template>
            <span class="centerspan" style="font-weight: 700;margin-left: 5px;">今日数据概要
                <a-popover title="" placement="right" :overlayStyle="{ width:‘300px‘, fontSize:‘12px‘ }">
                    <template slot="content">累计用户:累计登录系统的UM账号数量;<br>
                        新增用户:当日新增登录系统的UM账号数量;<br>
                        访问人次:所有用户当日登录系统的次数;<br>
                        访问人数:当日登录系统的UM账号数量</template>
                    <a-icon type="question-circle" theme="twoTone" twoToneColor=‘#ff6700‘
                        style="font-size: 15px;margin-left:5px;" />
                </a-popover> </span>
        </template>
        <div class="center-left">
            <div class="centerlist centerline">
                累计用户
                <h2 style="color: #ff9800;">
                    {{formatAmount(grandUserCount)}}
                </h2>
            </div>
            <div class="centerlist centerline">
                新增用户
                <h2>{{formatAmount(newUserCount)}}</h2>
            </div>
            <div class="centerlist centerline">
                访问人次
                <h2>{{formatAmount(reachPersonTime)}}</h2>
            </div>
            <div class="centerlist centerline">
                访问人数
                <h2>{{formatAmount(reachPersonNumber)}}</h2>
            </div>
            <div class="centerlist">

                <h2></h2>
            </div>
            <div class="centerlist">

                <h2></h2>
            </div>

        </div>
    </div>
    <div class="bottom">
        <div class="bottom-left" style="border-right: 8px solid #f7f4f4;">
            <template>
                <span style="font-weight: 700;margin-left: 5px;">销售合同总览
                    <a-popover title="" placement="right" :overlayStyle="{ width:‘300px‘, fontSize:‘12px‘ }">
                        <template slot="content">
                            合同总数:用户UM账号+当前角色能查看到的合同总数量<br>
                            创建合同数:合同创建人或负责人为当前UM账号的合同数量<br>
                            授权合同数:合同创建人或负责人非当前UM账号的合同数量<br>
                        </template>
                        <a-icon type="question-circle" theme="twoTone" twoToneColor=‘#ff6700‘
                            style="font-size: 15px;margin-left:5px;" />
                    </a-popover> </span>
            </template>
            <div class="bottomlist bottomlistcolor">
                <div>数据名称</div>
                <div>统计数据</div>
            </div>
            <div class="bottomlist">
                <div>合同总数</div>
                <div>{{formatAmount(contractSumSale)}}</div>
            </div>
            <div class="bottomlist">
                <div>创建合同数</div>
                <div>{{formatAmount(createContractNumSale)}}</div>
            </div>
            <div class="bottomlist">
                <div>授权合同数</div>
                <div>{{formatAmount(authorizeContractNumSale)}}</div>
            </div>
        </div>
        <div class="bottom-left">
            <span style="font-weight: 700;margin-left: 8px;">采购合同总览
                <a-popover title="" placement="right" :overlayStyle="{ width:‘300px‘, fontSize:‘12px‘ }">
                    <template slot="content">
                        合同总数:用户UM账号+当前角色能查看到的合同总数量<br>
                        创建合同数:合同创建人或负责人为当前UM账号的合同数量<br>
                        授权合同数:合同创建人或负责人非当前UM账号的合同数量<br>
                    </template>
                    <a-icon type="question-circle" theme="twoTone" twoToneColor=‘#ff6700‘
                        style="font-size: 15px;margin-left:5px;" />
                </a-popover> </span>
            <div class="bottomlist bottomlistcolor">
                <div>数据名称</div>
                <div>统计数据</div>
            </div>
            <div class="bottomlist">
                <div>合同总数</div>
                <div>{{formatAmount(contractSumPurchase)}}</div>
            </div>
            <div class="bottomlist">
                <div>创建合同数</div>
                <div>{{formatAmount(createContractNumPurchase)}}</div>
            </div>
            <div class="bottomlist">
                <div>授权合同数</div>
                <div>{{formatAmount(authorizeContractNumPurchase)}}</div>
            </div>
        </div>
    </div>
</div>

 

 

#home {
  width: 100%;
  display: flex;
  flex-direction: row;
  .home-top {
    width: 100%;
    height: 250px;
    display: flex;
    border-bottom: 8px solid #f7f4f4;
  }
  .left {
    flex: 2;
    // width: 200px;
    height: 100%;
    display: flex;
    padding: 24px 0 0 0;
    box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.15);
    // border-right: 2px solid #f7f4f4;
    text-align: center;
    .left-left {
      flex: 1;
    }
    .left-right {
      flex: 1;
      text-align: left;
      padding: 15px 10px 0;
      font-size: 15px;
    }
  }
  .avatarBox {
    text-align: center;
    margin-bottom: 24px;
  }
  .tip {
    font-size: 13px;
    color: #f5222d;
    margin-top: 24px;
  }
  .right {
    flex: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 14px;
  }
  .top-right {
    width: 100%;
    height: 32px;
    line-height: 32px;
    // box-shadow: 0 8px 8px -8px rgba(0,0,0,.15);
    border-bottom: 1px dashed #ccc;
    margin-bottom: 24px;
  }
}
.centerline {
  line-height: 35px;
  padding-top: 30px;
  border-right: 2px solid #f7f4f4;
}
.bottomlistcolor {
  background: #e6f7ff;
}
.content {
  // height: 100%;
  background-color: #fff;
  .centerspan {
    padding: 10px 0 10px 10px;
    display: inline-block;
  }
  .center-left {
    display: flex;
    height: 150px;
    border-bottom: 8px solid #f7f4f4;
    border-top: 2px solid #f7f4f4;
    h2 {
      font-size: 30px;
    }
    .centerlist {
      flex: 6;
      text-align: center;
    }
  }
}
.bottom {
  // height: 100%;
  display: flex;
  .bottom-left {
    flex: 2.4;
    span {
      padding: 10px 0 10px 10px;
      display: inline-block;
    }
    .bottomlist {
      display: flex;
      border-bottom: 2px solid #f7f4f4;
      height: 30px;
      line-height: 30px;
      div {
        flex: 1;
        height: 30px;
        font-size: 14px;
        text-indent: 30px;
      }
    }
  }
  .bottom-right {
    flex: 4;
  }
}

  

import {
    mapState,
    mapMutations
} from vuex
import {
    cookie
} from @/utils/cookie
import axios from axios
import moment from "moment";
import {
    getPurchaseContractPandect,
    getSaleContractPandect,
    getTodayOutLineInfo,
    getRoles
} from @/api/home.js

export default {
    name: home,
    data() {
        return {
            loading: false,
            infoLoading: false,
            userLoading: false,
            records: [{
                name: aaa,
                time: 2019-02-13T08:49:31.342Z

            }, {
                name: bbb,
                time: 2019-02-13T08:49:31.342Z

            }, {
                name: ccc,
                time: 2019-02-13T08:49:31.342Z

            }],

            ceshi1: 2019-02-13T08:49:31.042Z,
            // ceshi1:moment(‘2019-02-13T08:49:31.342Z‘).format("YYYY-MM-DD h:mm:ss"),
            week: ‘‘,
            date: ‘‘,
            as: [{
                id: 1,
                name: "yang"
            }, {
                id: 2,
                name: "xiao"
            }, {
                id: 3,
                name: "qi"
            }],
            bs: {
                id: 1,
                name: "yang"
            },
            contractSumPurchase: ‘‘,
            createContractNumPurchase: ‘‘,
            authorizeContractNumPurchase: ‘‘,
            contractSumSale: ‘‘,
            createContractNumSale: ‘‘,
            authorizeContractNumSale: ‘‘,
            grandUserCount: ‘‘,
            newUserCount: ‘‘,
            reachPersonTime: ‘‘,
            reachPersonNumber: ‘‘,
            roleName: ‘‘
        }
    },
    computed: {
        ...mapState({
            info: state => state.user.info
        }),
        isSystem() {
            return this.info.role.roleCode === 00001
        },
        // 判断用户权限的,是否能够查看数据摘要
        isSuperisSystem() {
            return this.info.role.roleCode == 00000 || this.info.role.roleCode == 00001
        }
    },
    // 监听角色变化,重新发送请求
    watch: {
        info(newVal, oldVal) {
            this.getPurchaseContractPandect()
            this.getSaleContractPandect()
            this.getTodayOutLineInfo()
        }
    },
    activated() {
        this.get()
        this.getRoles()
        this.getTime()
        this.getPurchaseContractPandect()
        this.getSaleContractPandect()
        this.getTodayOutLineInfo()
    },
    beforeRouteLeave(to, from, next) {
        if (cookie.get(notAllowBack)) {
            next(false)
        } else {
            next()
        }
    },
    methods: {
        get() {
            var as = [{
                id: 1,
                name: "yang"
            }, {
                id: 2,
                name: "xiao"
            }, {
                id: 3,
                name: "qi"
            }]
            for (var i = 0; i < as.length; i++) {
                if ((as[i].id).indexOf(1) >= -1) {
                    index = i
                    as.splice(index, 1);
                }
            }
            console.log(as)
        },

        // 给a页面发送数据
        // handle() {
        //     var data= {
        //         code:‘cancel‘
        //     }
        //  parent.postMessage(data, ‘http://localhost:7777/#/salesSealDetail‘)
        // },
        monment(time) {
            var d = moment(time).format("YYYY-MM-DD h:mm:ss")
            return d;
        },
        formatAmount(money) {
            if (money === 0) return 0
            if (!money) return ‘‘
            let reg = /\d{1,3}(?=(\d{3})+$)/g
            let arr = money.toString().split(.)
            let integer = arr[0].replace(reg, $&,)
            return arr[1] ? `${integer}.${arr[1]}` : integer
        },
        async getPurchaseContractPandect() {
            const res = await getPurchaseContractPandect()
            if (res.retCode === 000000) {
                this.contractSumPurchase = res.data.contractSum
                this.createContractNumPurchase = res.data.createContractNum
                this.authorizeContractNumPurchase = res.data.authorizeContractNum
            }
        },
        async getSaleContractPandect() {
            const res = await getSaleContractPandect()
            if (res.retCode === 000000) {
                this.contractSumSale = res.data.contractSum
                this.createContractNumSale = res.data.createContractNum
                this.authorizeContractNumSale = res.data.authorizeContractNum
            }
        },
        async getTodayOutLineInfo() {
            const res = await getTodayOutLineInfo()
            if (res.retCode === 000000) {
                this.grandUserCount = res.data.grandUserCount
                this.newUserCount = res.data.newUserCount
                this.reachPersonTime = res.data.reachPersonTime
                this.reachPersonNumber = res.data.reachPersonNumber
            }
        },
        async getRoles() {
            const res = await getRoles()
            if (res.retCode === 000000) {
                this.roleName = ‘‘
                res.data.map((item, index) => {
                    this.roleName += item.roleName + ""
                })
                this.roleName = this.roleName.substring(0, this.roleName.length - 1)
            }
            console.log(this.roleName)
        },
        getTime() {
            var a = new Date()
            var day = a.getDay()
            var my_day = a.getDate()
            var my_month = a.getMonth() + 1
            var my_year = a.getFullYear()
            this.date = my_year +  + my_month +  + my_day + 
            var weeks = new Array(星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六)
            this.week = weeks[day]
        },
        getInfo() {
            this.infoLoading = true
            axios
                .post(/cms/api/v1/org/getOrgTemp, {})
                .then(res => {
                    if (res.data.retCode === 000000) {
                        this.$message.success(res.data.retMessage)
                    } else {
                        this.$message.error(res.data.retMessage)
                    }
                    this.infoLoading = false
                })
                .catch(error => {
                    this.infoLoading = false
                })
        },
        getuserInfo() {
            this.userLoading = true
            axios
                .post(/cms/api/v1/supplier/synchronizationInfoFromBI, {})
                .then(res => {
                    if (res.data.retCode === 000000) {
                        this.$message.success(res.data.retMessage)
                    } else {
                        this.$message.error(res.data.retMessage)
                    }
                    this.userLoading = false
                })
                .catch(error => {
                    this.userLoading = false
                })
        },
        clean() {
            this.loading = true
            axios
                .post(/cms/api/v1/contract/contractInfo/contractClean, {})
                .then(res => {
                    if (res.data.retCode === 000000) {
                        this.$message.success(res.data.retMessage)
                    } else {
                        this.$message.error(res.data.retMessage)
                    }
                    this.loading = false
                })
                .catch(error => {
                    this.loading = false
                })
        }
    }
}

 

 

工作小记录-首页

标签:direct   compute   baseline   localhost   账号   span   ase   lamp   rgb   

原文地址:https://www.cnblogs.com/Fhm1/p/14957569.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!