标签: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