Skip to content

C
CRM
Commit 2c009371 authored by 罗超's avatar 罗超
Browse files
Options

调整排行榜

parent bc533da4
Hide whitespace changes
Inline Side-by-side
Showing with 863 additions and 681 deletions
src/components/Home.vue
View file @ 2c009371
<template> <template>
<div class="home"> <div class="home">
<el-row :gutter="25"> <el-row :gutter="25">
<el-col :span="16"> <el-col :span="16">
<el-card class="box-card" shadow="never"> <el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>客户简报</span> <el-row>
</div>
<div class="shang-list">
<el-row :gutter="5">
<el-col :span="12"> <el-col :span="12">
<div class="shang-list-item"> <span>排行榜</span>
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="title">新建客户</div>
<div class="result">{{Briefing.customerNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.customerRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.customerRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.customerRate > 0, 'green': Briefing.customerRate < 0}">{{Briefing.customerRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="title">新建联系人</div>
<div class="result">{{Briefing.contactNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.contactRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.contactRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.contactRate > 0, 'green': Briefing.contactRate < 0}">{{Briefing.contactRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="title">新建商机</div>
<div class="result">{{Briefing.businessNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.businessRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.businessRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.businessRate > 0, 'green': Briefing.businessRate < 0}">{{Briefing.businessRate}}</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">新建跟进</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div> -->
</div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;">
<div class="shang-list-item"> <el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择"
<div class="icon blue"> @change="GetRankingList">
<i class="iconfont icondingdan"></i> <el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option>
</div> </el-select>
<div class="title">新建订单</div> <div style="width:235px;margin-right:25px;">
<div class="result">{{Briefing.orderNum}}</div> <el-tabs v-model="rankMsg.QueryType" @tab-click="changeRankTypeHandler" class="hide-tabs-content">
<!-- <div class="eq"> <el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()"></el-tab-pane>
较上月 </el-tabs>
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderRate > 0, 'green': Briefing.orderRate < 0}">{{Briefing.orderRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">订单金额</div>
<div class="result">{{Briefing.orderPriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderPriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderPriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderPriceRate > 0, 'green': Briefing.orderPriceRate < 0}">{{Briefing.orderPriceRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">新建收款</div>
<div class="result">{{Briefing.financePriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-else-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.financePriceRate > 0, 'green': Briefing.financePriceRate < 0}">{{Briefing.financePriceRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">新建拜访</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val red">100%</span>
</div> -->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-card> <div class="rank-list">
<el-card shadow="never" style="margin-top:25px;"> <div class="rank-list-item" v-for="(item, index) in RankingList" :key="index">
<div slot="header" class="clearfix"> <div class="rank blue" v-if="index>2">NO.{{item.RankNum}}</div>
<span>能力评级</span> <div class="rank" v-else-if="index==2"><img src="../assets/img/cust/thrid.png" /></div>
<div class="rank" v-else-if="index==1"><img src="../assets/img/cust/second.png" /></div>
<div class="rank" v-else><img src="../assets/img/cust/first.png" /></div>
<div class="head">
<el-avatar style="background:#409efe" :size="40" @error="errorHandler" :src="item.EmpPhoto" v-if="item.EmpPhoto && item.EmpPhoto!=''">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
<el-avatar style="background:#409efe" :size="40" v-else>{{item.EmpName.substring(0,1)}}</el-avatar>
</div>
<div class="rank-name">
<div class="rn">{{item.EmpName}}</div>
<div>{{item.DeptName}}</div>
</div>
<div class="score">{{currentRankType.unit=='元'?formatMoney(item.TotalNum):item.TotalNum}}
<span class="unit">/ {{currentRankType.unit}}</span>
</div>
</div>
<div v-if="RankingList.length < 1" class="nodata font-color-info">
<p>暂无数据</p>
</div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card class="tic-card" shadow="never"> <el-card class="tic-card" shadow="never">
<div class="tic-content"> <div class="tic-content">
...@@ -306,37 +222,134 @@ ...@@ -306,37 +222,134 @@
</el-row> </el-row>
<el-row :gutter="25" style="margin-top:25px;"> <el-row :gutter="25" style="margin-top:25px;">
<el-col :span="16"> <el-col :span="16">
<el-card class="rank-card" shadow="never">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<el-row> <span>客户简报</span>
</div>
<div class="shang-list">
<el-row :gutter="5">
<el-col :span="12"> <el-col :span="12">
<span>排行榜</span> <div class="shang-list-item">
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="title">新建客户</div>
<div class="result">{{Briefing.customerNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.customerRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.customerRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.customerRate > 0, 'green': Briefing.customerRate < 0}">{{Briefing.customerRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="title">新建联系人</div>
<div class="result">{{Briefing.contactNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.contactRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.contactRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.contactRate > 0, 'green': Briefing.contactRate < 0}">{{Briefing.contactRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="title">新建商机</div>
<div class="result">{{Briefing.businessNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.businessRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.businessRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.businessRate > 0, 'green': Briefing.businessRate < 0}">{{Briefing.businessRate}}</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">新建跟进</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div> -->
</div>
</el-col> </el-col>
<el-col :span="12" class="option-item" style> <el-col :span="12">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择" <div class="shang-list-item">
@change="GetRankingList"> <div class="icon blue">
<el-option label="销售额排名" :value="1"></el-option> <i class="iconfont icondingdan"></i>
<el-option label="新建客户排名" :value="2"></el-option> </div>
<el-option label="新建商机排名" :value="3"></el-option> <div class="title">新建订单</div>
</el-select> <div class="result">{{Briefing.orderNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderRate > 0, 'green': Briefing.orderRate < 0}">{{Briefing.orderRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">订单金额</div>
<div class="result">{{Briefing.orderPriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderPriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderPriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.orderPriceRate > 0, 'green': Briefing.orderPriceRate < 0}">{{Briefing.orderPriceRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">新建收款</div>
<div class="result">{{Briefing.financePriceNum}}</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-else-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val" :class="{'red': Briefing.financePriceRate > 0, 'green': Briefing.financePriceRate < 0}">{{Briefing.financePriceRate}}%</span>
</div>-->
</div>
<div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">新建拜访</div>
<div class="result">0</div>
<!-- <div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
<i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
<i class="iconfont iconchiping" v-else></i>
<span class="val red">100%</span>
</div> -->
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="rank-list"> </el-card>
<div class="rank-list-item" v-for="(item, index) in RankingList" :key="index"> <el-card shadow="never" style="margin-top:25px;">
<div class="rank red">NO.{{item.RankNum}}</div> <div slot="header" class="clearfix">
<div class="head"> <span>能力评级</span>
<el-avatar :size="40" :src="item.EmpPhoto"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">{{item.EmpName}}</div>
<div>{{item.DeptName}}</div>
</div>
<div class="score">{{item.TotalNum}}</div>
</div>
<div v-if="RankingList.length < 1" class="nodata font-color-info">
<p>暂无数据</p>
</div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -366,524 +379,673 @@ ...@@ -366,524 +379,673 @@
</template> </template>
<script> <script>
import ticheng from "./chart/ticheng"; import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome"; import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou"; import sjld from "./chart/shangjiloudou";
export default { export default {
components: { components: {
ticheng, ticheng,
notincome, notincome,
sjld, sjld,
}, },
data() { data() {
return { return {
rankType: 1, rankType: 1,
rankType2: "1", rankType2: "1",
RankingList: [], RankingList: [],
Briefing: { Briefing: {
model: { model: {
TotalPrice: 0 TotalPrice: 0,
}
}, },
rankMsg: { },
RankType: 1, //排行类型(1-引流排行，2-销售排行,3-利润排行) rankTypeList: [
QueryType: 2, //查询类型(1-按天查询，2-按月查询，3-按年查询) { id: 1, name: "引流排名(引流)", unit: "人" },
StartDay: "2022-05-01", //开始时间 { id: 4, name: "订单排名(引流)", unit: "单" },
EndDay: "2022-05-31", //结束时间 { id: 5, name: "销售额排名(票务)", unit: "元" },
StartMonth: '2022-04', //开始月份 { id: 3, name: "利润排名(票务)", unit: "元" },
EndMonth: '2022-05', //结束月份 { id: 2, name: "订单排名(票务)", unit: "单" },
StartYear: '2022', //开始年份 ],
EndYear: '2022', //结束年份 dataRangeList: [
{
id: 1,
name: "今日",
startTime: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
}, },
}; {
id: 2,
name: "本周",
startTime: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
},
{
id: 3,
name: "本月",
startTime: "",
endTime: "",
mappingStart: "StartMonth",
mappingEnd: "EndMonth",
type: "2",
},
{
id: 4,
name: "本年",
startTime: "",
endTime: "",
mappingStart: "StartYear",
mappingEnd: "EndYear",
type: "3",
},
],
currentRankType: {},
rankMsg: {
RankType: 1, //排行类型(1-引流排行，2-销售排行,3-利润排行)
QueryType: "2", //查询类型(1-按天查询，2-按月查询，3-按年查询)
StartDay: "2022-05-01", //开始时间
EndDay: "2022-05-31", //结束时间
StartMonth: "2022-04", //开始月份
EndMonth: "2022-05", //结束月份
StartYear: "2022", //开始年份
EndYear: "2022", //结束年份
},
};
},
created() {
this.initRankRangeList();
console.log(this.dataRangeList);
},
mounted() {
this.changeRankTypeHandler();
this.GetBriefing();
},
methods: {
formatMoney(val) {
var str = val.toFixed(2) + "";
var sum = str
.substring(0, str.indexOf("."))
.replace(/\B(?=(?:\d{3})+$)/g, ","); //取到整数部分
var dot = str.substring(str.length, str.indexOf(".")); //取到小数部分搜索
var ret = sum + dot;
return ret;
}, },
mounted() { errorHandler() {
this.GetRankingList(); return true;
this.GetBriefing(); },
beginOfWeek(dateValue) {
let date;
if (dateValue instanceof Date) {
date = dateValue;
} else {
date = new Date(dateValue);
}
let subDay = 0;
let weekDay = date.getDay();
if (weekDay == 0) {
//周天
subDay = 6;
} else {
subDay = weekDay - 1;
}
let beginDateTime = date.getTime() - 86400000 * subDay;
return new Date(beginDateTime);
},
initRankRangeList() {
var date = new Date();
this.dataRangeList[0].startTime = this.formatDate(date, "YYYY-MM-dd", 0);
this.dataRangeList[0].endTime = this.dataRangeList[0].startTime;
this.dataRangeList[1].startTime = this.formatDate(
this.beginOfWeek(date),
"YYYY-MM-dd",
0
);
this.dataRangeList[1].endTime = this.dataRangeList[0].startTime;
this.dataRangeList[2].startTime = this.formatDate(date, "YYYY-MM", 0);
this.dataRangeList[2].endTime = this.dataRangeList[2].startTime;
this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0);
this.dataRangeList[3].endTime = this.dataRangeList[3].startTime;
},
changeRankTypeHandler() {
this.clearRankMsgHandler();
let temp = this.dataRangeList.find(
(x) => x.id.toString() == this.rankMsg.QueryType
);
if (temp) {
this.rankMsg[temp.mappingStart] = temp.startTime;
this.rankMsg[temp.mappingEnd] = temp.endTime;
this.GetRankingList();
}
},
clearRankMsgHandler() {
this.rankMsg.StartDay = "";
this.rankMsg.EndDay = "";
this.rankMsg.StartMonth = "";
this.rankMsg.EndMonth = "";
this.rankMsg.StartYear = "";
this.rankMsg.EndYear = "";
}, },
methods: { //客户简报
//客户简报 GetBriefing() {
GetBriefing() { this.apipost("/api/CustomerDashboard/GetBriefing", {}, (res) => {
this.apipost("/api/CustomerDashboard/GetBriefing", {}, (res) => { if (res.data.resultCode == 1) {
this.Briefing = res.data.data;
}
});
},
//排行榜
GetRankingList() {
this.currentRankType = this.rankTypeList.find(
(x) => x.id == this.rankMsg.RankType
);
this.apipost(
"/api/CustomerDashboard/GetRankingList",
this.rankMsg,
(res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.Briefing = res.data.data; console.log("rankData", "res.data.data");
} this.RankingList = res.data.data;
});
},
//排行榜
GetRankingList() {
this.apipost(
"/api/CustomerDashboard/GetRankingList", this.rankMsg,
(res) => {
if (res.data.resultCode == 1) {
console.log("rankData","res.data.data")
this.RankingList = res.data.data;
}
} }
); }
}, );
}, },
}; },
};
</script> </script>
<style> <style>
.home { .home {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 25px;
} }
.el-card__header { .el-card__header {
font-family: perfectFont; font-family: perfectFont;
font-weight: bold; font-weight: bold;
} }
.el-card, .el-card,
.el-message { .el-message {
border-radius: 0 !important; border-radius: 0 !important;
} }
.box-card .shang-list {} .box-card .shang-list {
}
.box-card,
.sum-card, .box-card,
.rank-card { .sum-card,
padding-bottom: 20px; .rank-card {
} padding-bottom: 20px;
}
.box-card .el-card__body,
.sum-card .el-card__body, .box-card .el-card__body,
.rank-card .el-card__body { .sum-card .el-card__body,
height: 358px; .rank-card .el-card__body {
overflow-y: hidden; height: 358px;
padding: 0px 20px !important; overflow-y: hidden;
margin-top: 20px; padding: 0px 20px !important;
} margin-top: 20px;
}
.box-card .el-card__body {
height: 237px; .box-card .el-card__body {
} height: 237px;
}
/* .box-card .el-card__body:hover, */
/* .box-card .el-card__body:hover, */
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover { .sum-card .el-card__body:hover,
overflow-y: auto; .rank-card .el-card__body:hover {
padding-right: 16px !important; overflow-y: auto;
} padding-right: 16px !important;
}
.box-card .shang-list .shang-list-item {
margin-bottom: 5px; .box-card .shang-list .shang-list-item {
height: 54px; margin-bottom: 5px;
background: rgba(242, 242, 242, 1); height: 54px;
display: flex; background: rgba(242, 242, 242, 1);
align-items: center; display: flex;
} align-items: center;
}
.box-card .icon {
width: 26px; .box-card .icon {
height: 26px; width: 26px;
line-height: 26px; height: 26px;
text-align: center; line-height: 26px;
background: #409efe; text-align: center;
color: #fff; background: #409efe;
margin: 0 25px; color: #fff;
} margin: 0 25px;
}
.box-card .shang-list .shang-list-item .title {
font-size: 14px; .box-card .shang-list .shang-list-item .title {
color: #333333; font-size: 14px;
width: 80px; color: #333333;
/* padding-top: 18px; */ width: 80px;
font-weight: bold; /* padding-top: 18px; */
font-family: perfectFont; font-weight: bold;
} font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .result {
flex: 1; .box-card .shang-list .shang-list-item .result {
padding-left: 130px; flex: 1;
font-size: 20px; padding-left: 130px;
font-family: perfectFont; font-size: 20px;
color: #000; font-family: perfectFont;
font-weight: bold; color: #000;
text-align: right; font-weight: bold;
padding-right: 25px; text-align: right;
} padding-right: 25px;
}
.box-card .shang-list .shang-list-item .eq {
width: 200px; .box-card .shang-list .shang-list-item .eq {
font-size: 12px; width: 200px;
color: gray; font-size: 12px;
} color: gray;
}
.box-card .shang-list .shang-list-item .eq i {
font-size: 26px; .box-card .shang-list .shang-list-item .eq i {
margin-left: 30px; font-size: 26px;
margin-right: 15px; margin-left: 30px;
color: #333; margin-right: 15px;
vertical-align: sub; color: #333;
} vertical-align: sub;
}
.box-card .shang-list .shang-list-item .eq .val {
font-size: 20px; .box-card .shang-list .shang-list-item .eq .val {
font-family: perfectFont; font-size: 20px;
} font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .eq .green {
color: rgb(16, 124, 16); .box-card .shang-list .shang-list-item .eq .green {
} color: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .eq .red {
color: rgb(195, 0, 82); .box-card .shang-list .shang-list-item .eq .red {
} color: rgb(195, 0, 82);
}
.box-card .icon i {
font-size: 14px; .box-card .icon i {
} font-size: 14px;
}
.box-card .icon.green {
background: rgb(16, 124, 16); .box-card .icon.green {
} background: rgb(16, 124, 16);
}
.box-card .icon.blue {
background: rgb(0, 99, 177); .box-card .icon.blue {
} background: rgb(0, 99, 177);
}
.box-card .icon.orange {
background: rgb(202, 80, 16); .box-card .icon.orange {
} background: rgb(202, 80, 16);
}
.box-card .icon.grey {
background: rgb(118, 118, 118); .box-card .icon.grey {
} background: rgb(118, 118, 118);
}
.box-card .icon.red {
background: rgb(195, 0, 82); .box-card .icon.red {
} background: rgb(195, 0, 82);
}
.box-card .icon.zi {
background: rgb(136, 23, 152); .box-card .icon.zi {
} background: rgb(136, 23, 152);
}
.box-card .icon.yellow {
background: rgb(255, 185, 0); .box-card .icon.yellow {
} background: rgb(255, 185, 0);
}
.tic-card {
padding: 0px; .tic-card {
height: 196px; padding: 0px;
border: none; height: 196px;
} border: none;
}
.tic-card .el-card__body,
.zhou-card .el-card__body, .tic-card .el-card__body,
.notinmoney-card .el-card__body { .zhou-card .el-card__body,
padding: 0px; .notinmoney-card .el-card__body {
} padding: 0px;
}
.tic-card .tic-content {
height: 83px; .tic-card .tic-content {
width: 100%; height: 83px;
} width: 100%;
}
.tic-card .tic-content .money-box {
margin-top: 20px; .tic-card .tic-content .money-box {
margin-right: 30px; margin-top: 20px;
color: #00c5c8; margin-right: 30px;
font-family: perfectFont; color: #00c5c8;
text-align: right; font-family: perfectFont;
font-size: 26px; text-align: right;
font-weight: bold; font-size: 26px;
} font-weight: bold;
}
.tic-card .tic-content .money-box small {
font-size: 12px; .tic-card .tic-content .money-box small {
font-weight: 500; font-size: 12px;
} font-weight: 500;
}
.tic-card .tic-content .tips {
font-size: 14px; .tic-card .tic-content .tips {
color: #666; font-size: 14px;
margin-right: 30px; color: #666;
text-align: right; margin-right: 30px;
} text-align: right;
}
.tic-card .tic-chart {
height: 111px; .tic-card .tic-chart {
width: 100%; height: 111px;
} width: 100%;
}
.zhou-card {
padding: 0px; .zhou-card {
border: none; padding: 0px;
background: #409efe; border: none;
margin-top: 25px; background: #409efe;
height: 236px; margin-top: 25px;
} height: 236px;
}
.zhou-card .el-card__body {
padding: 0px; .zhou-card .el-card__body {
background: url("../assets/img/home/zhouguan.png") #409efe; padding: 0px;
height: 100%; background: url("../assets/img/home/zhouguan.png") #409efe;
background-repeat: no-repeat; height: 100%;
background-size: cover; background-repeat: no-repeat;
} background-size: cover;
}
.zhou-card .title {
font-size: 20px; .zhou-card .title {
font-family: perfectFont; font-size: 20px;
color: #fff; font-family: perfectFont;
padding: 10px 0 0 0px; color: #fff;
text-indent: 20px; padding: 10px 0 0 0px;
} text-indent: 20px;
}
.zhou-card .money-box {
margin-top: 10px; .zhou-card .money-box {
padding-right: 20px !important; margin-top: 10px;
color: #fff; padding-right: 20px !important;
font-family: perfectFont; color: #fff;
text-align: right; font-family: perfectFont;
font-size: 26px; text-align: right;
font-weight: bold; font-size: 26px;
} font-weight: bold;
}
.zhou-card .money-box small {
font-size: 12px; .zhou-card .money-box small {
font-weight: 500; font-size: 12px;
} font-weight: 500;
}
.zhou-card .zhou-head {
margin: 10px auto; .zhou-card .zhou-head {
display: block; margin: 10px auto;
width: 70px; display: block;
height: 70px; width: 70px;
background: rgba(85, 189, 233, 0.2); height: 70px;
padding: 4px; background: rgba(85, 189, 233, 0.2);
border-radius: 100%; padding: 4px;
} border-radius: 100%;
}
.zhou-card .zhou-head img {
width: 100%; .zhou-card .zhou-head img {
height: 100%; width: 100%;
border-radius: 100%; height: 100%;
} border-radius: 100%;
}
.zhou-card .zhou-name {
font-size: 14px; .zhou-card .zhou-name {
color: #fff; font-size: 14px;
font-family: perfectFont; color: #fff;
font-weight: bold; font-family: perfectFont;
text-align: center; font-weight: bold;
} text-align: center;
}
.zhou-card .zhou-depart {
font-size: 14px; .zhou-card .zhou-depart {
color: #fff; font-size: 14px;
font-family: perfectFont; color: #fff;
text-align: center; font-family: perfectFont;
margin-top: 15px; text-align: center;
} margin-top: 15px;
}
.sum-card .el-card__body {
height: 165px; .sum-card .el-card__body {
overflow-y: hidden; height: 165px;
padding-right: 20px; overflow-y: hidden;
} padding-right: 20px;
}
.sum-card .sum-list {}
.sum-card .sum-list {
.sum-card .sum-list .sum-list-item { }
height: 45px;
border-bottom: 1px solid #e2e4ef; .sum-card .sum-list .sum-list-item {
display: flex; height: 45px;
align-items: center; border-bottom: 1px solid #e2e4ef;
} display: flex;
align-items: center;
.sum-card .sum-list .sum-list-item .icon { }
width: 4px;
height: 12px; .sum-card .sum-list .sum-list-item .icon {
margin-right: 10px; width: 4px;
background: #ffa475; height: 12px;
} margin-right: 10px;
background: #ffa475;
.sum-card .sum-list .sum-list-item .icon.green { }
background: #94b877;
} .sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
.sum-card .sum-list .sum-list-item .icon.blue { }
background: #409efe;
} .sum-card .sum-list .sum-list-item .icon.blue {
background: #409efe;
.sum-card .sum-list .sum-list-item .icon.zi { }
background: rgb(210, 197, 240);
} .sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
.sum-card .sum-list .sum-list-item .icon.qing { }
background: #55bde9;
} .sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
.sum-card .sum-list .sum-list-item .icon.black { }
background: #333;
} .sum-card .sum-list .sum-list-item .icon.black {
background: #333;
.sum-card .sum-list .sum-list-item .item-name { }
width: 90px;
font-size: 12px; .sum-card .sum-list .sum-list-item .item-name {
} width: 90px;
font-size: 12px;
.ding .sum-list .sum-list-item .item-name { }
width: 150px;
} .ding .sum-list .sum-list-item .item-name {
width: 150px;
.sum-card .sum-list .sum-list-item .item-hui { }
flex: 1;
font-size: 12px; .sum-card .sum-list .sum-list-item .item-hui {
text-align: right; flex: 1;
} font-size: 12px;
text-align: right;
.sum-card .sum-list .sum-list-item .item-hui b { }
font-weight: bold;
font-size: 22px; .sum-card .sum-list .sum-list-item .item-hui b {
font-family: perfectFont; font-weight: bold;
margin: 0 5px; font-size: 22px;
} font-family: perfectFont;
margin: 0 5px;
.notinmoney-card { }
height: 268px;
} .notinmoney-card {
height: 268px;
.notinmoney-card .title { }
font-size: 17px;
font-family: perfectFont; .notinmoney-card .title {
color: #000; font-size: 17px;
padding: 10px 0 0 0px; font-family: perfectFont;
text-indent: 20px; color: #000;
font-weight: bold; padding: 10px 0 0 0px;
} text-indent: 20px;
font-weight: bold;
.notinmoney-card .money { }
font-size: 30px;
font-family: perfectFont; .notinmoney-card .money {
color: #000; font-size: 30px;
padding: 10px 0 0 0px; font-family: perfectFont;
text-indent: 20px; color: #000;
font-weight: bold; padding: 10px 0 0 0px;
color: #ffa475; text-indent: 20px;
} font-weight: bold;
color: #ffa475;
.notinmoney-card .charts-box { }
height: 178px;
} .notinmoney-card .charts-box {
height: 178px;
.notinmoney-card .money small { }
font-size: 12px;
font-weight: 400; .notinmoney-card .money small {
} font-size: 12px;
font-weight: 400;
.rank-card .el-card__body, }
.loudou-card .el-card__body {
height: 358px; .rank-card .el-card__body,
overflow-y: hidden; .loudou-card .el-card__body {
padding-right: 20px; height: 358px;
} overflow-y: hidden;
padding-right: 20px;
.rank-list {} }
.rank-list .rank-list-item { .rank-list {
height: 85px; }
display: flex;
align-items: center; .rank-list .rank-list-item {
cursor: default; height: 55px;
user-select: none; display: flex;
} align-items: center;
cursor: default;
.rank-list .rank-list-item:hover { user-select: none;
background: #f4f5f9; padding: 0 10px;
} }
.rank-list .rank-list-item:first-child {
.rank-list .rank-list-item .rank { height: 85px;
width: 200px; }
font-size: 18px; .rank-list .rank-list-item:nth-child(2) {
color: #999; height: 75px;
font-family: perfectFont !important; }
font-weight: bold; .rank-list .rank-list-item:nth-child(3) {
} height: 65px;
}
.rank-list .rank-list-item .rank.blue { .rank-list .rank-list-item:hover {
color: #409efe; background: #f4f5f9;
} }
.rank-list .rank-list-item .rank.red { .rank-list .rank-list-item .rank {
color: rgb(195, 0, 82); width: 200px;
} font-size: 18px;
color: #999;
.rank-list .rank-list-item .rank.zi { font-family: perfectFont !important;
color: rgb(136, 23, 152); font-weight: bold;
} }
.rank-list .rank-list-item .rank img {
.rank-list .rank-list-item .head { width: 36px;
width: 70px; height: 36px;
} }
.rank-list .rank-list-item .rank-name { .rank-list .rank-list-item .rank.blue {
width: 200px; color: #409efe;
font-size: 12px; }
color: #666;
} .rank-list .rank-list-item .rank.red {
color: rgb(195, 0, 82);
.rank-list .rank-list-item .rank-name .rn { }
font-family: perfectFont !important;
font-weight: bold; .rank-list .rank-list-item .rank.zi {
color: #333; color: rgb(136, 23, 152);
font-size: 16px; }
}
.rank-list .rank-list-item .head {
.rank-list .rank-list-item .score { width: 70px;
font-size: 22px; }
font-family: perfectFont !important;
font-weight: bold; .rank-list .rank-list-item .rank-name {
color: #333; width: 200px;
text-align: right; font-size: 12px;
flex: 1; color: #666;
} }
.option-item { .rank-list .rank-list-item .rank-name .rn {
text-align: right; font-family: perfectFont !important;
} font-weight: bold;
color: #333;
.option-item .el-select>.el-input { font-size: 16px;
display: block; }
background: #409efe;
border-radius: 0; .rank-list .rank-list-item .score {
} font-size: 22px;
font-family: perfectFont !important;
.option-item .el-input--mini .el-input__inner { font-weight: bold;
height: 28px; color: #333;
line-height: 28px; text-align: right;
background: #409efe; flex: 1;
border-radius: 0; }
color: #f1f1f1; .rank-list .rank-list-item .score .unit {
} /* margin-left: 10px; */
font-size: 12px;
.option-item .el-select .el-input.is-focus .el-input__inner { font-family: "PingFangR";
border-color: #409efe; }
} .option-item {
text-align: right;
.el-select-dropdown { }
border-radius: 0px !important;
} .option-item .el-select > .el-input {
display: block;
.el-select-dropdown__item.selected { background: #409efe;
font-family: perfectFont !important; border-radius: 0;
color: #409efe !important; }
}
.option-item .el-input--mini .el-input__inner {
.el-select-dropdown__item { height: 28px;
/* font-family: perfectFont !important; */ line-height: 28px;
font-size: 12px !important; background: #409efe;
} border-radius: 0;
color: #f1f1f1;
.loudou-card .el-card__header { }
border: none;
} .option-item .el-select .el-input.is-focus .el-input__inner {
</style> border-color: #409efe;
\ No newline at end of file }
.el-select-dropdown {
border-radius: 0px !important;
}
.el-select-dropdown__item.selected {
font-family: perfectFont !important;
color: #409efe !important;
}
.el-select-dropdown__item {
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.loudou-card .el-card__header {
border: none;
}
.hide-tabs-content .el-tabs__header {
margin: 0 !important;
}
.hide-tabs-content .el-tabs__content {
display: none !important;
}
.hide-tabs-content .el-tabs__nav-wrap::after {
background: none !important;
}
</style>
src/main.js
View file @ 2c009371
...@@ -108,20 +108,20 @@ Vue.prototype.DateDiff = function (sDate1, sDate2) { ...@@ -108,20 +108,20 @@ Vue.prototype.DateDiff = function (sDate1, sDate2) {
//价钱格式化，三位数逗号分隔，保留两位小数 //价钱格式化，三位数逗号分隔，保留两位小数
Vue.prototype.moneyFormat = function (value) { Vue.prototype.moneyFormat = function (value) {
if (!value) { if (!value) {
return 0.00 return 0.00
} }
let nStr = Number(value).toFixed(2) let nStr = Number(value).toFixed(2)
nStr += ''; nStr += '';
let x = nStr.split('.'); let x = nStr.split('.');
let x1 = x[0]; let x1 = x[0];
let x2 = x.length > 1 ? '.' + x[1] : ''; let x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/; var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) { while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2'); x1 = x1.replace(rgx, '$1' + ',' + '$2');
} }
return x1 + x2; return x1 + x2;
}, },
// 注册 // 注册
Vue.filter('priceFormat', function (value) { Vue.filter('priceFormat', function (value) {
...@@ -174,15 +174,15 @@ Vue.filter("YMDHMS", function (date) { ...@@ -174,15 +174,15 @@ Vue.filter("YMDHMS", function (date) {
}) })
Vue.prototype.random_string = function (len) { Vue.prototype.random_string = function (len) {
len = len || 32; len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length; var maxPos = chars.length;
var pwd = ''; var pwd = '';
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos)); pwd += chars.charAt(Math.floor(Math.random() * maxPos));
} }
return pwd; return pwd;
}, },
//上传文件到文件服务器 //上传文件到文件服务器
Vue.prototype.UploadSelfFileT = function (path, files, successCall) { Vue.prototype.UploadSelfFileT = function (path, files, successCall) {
...@@ -220,7 +220,7 @@ Vue.prototype.random_string = function (len) { ...@@ -220,7 +220,7 @@ Vue.prototype.random_string = function (len) {
*/ */
Vue.prototype.UploadLocalSystem = function (params, fileObj, successCall) { Vue.prototype.UploadLocalSystem = function (params, fileObj, successCall) {
let that = this; let that = this;
let url = that.domainManager().PostUrl+"/api/Upload/Index"; let url = that.domainManager().PostUrl + "/api/Upload/Index";
let formData = new FormData() let formData = new FormData()
if (params) { if (params) {
formData.append("params", JSON.stringify(params)); formData.append("params", JSON.stringify(params));
...@@ -279,6 +279,26 @@ Vue.prototype.checkInteger = function (item, filed) { ...@@ -279,6 +279,26 @@ Vue.prototype.checkInteger = function (item, filed) {
item[filed] = value; item[filed] = value;
} }
Vue.prototype.formatDate = function (date, fmt, type) { //type : 类型 0:时间为秒 1:时间为毫秒
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"h+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
new Vue({ new Vue({
router, router,
store, store,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment