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