Skip to content

E
enterprise-opt-kit
Commit 9ddba6de authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

修改客户页面

parent 4055900c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 615 additions and 815 deletions
src/assets/style/business.scss
View file @ 9ddba6de
......@@ -4,6 +4,7 @@
.businessStatistics{
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 2.58rem;
padding:.14rem .24rem;
......@@ -11,12 +12,15 @@
.flex-1 {
font-size: .12rem;
}
.mt-0 {
margin-bottom: 0 !important;
}
.circle{
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
background: #30DDF4;
border: 1px solid #30DDF4;
border: 0.01rem solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
......@@ -38,12 +42,12 @@
.box{
display: inline-block;
width: 2rem;
height: .6rem;
height: .613rem;
text-align: center;
background:rgba(144,224,255,0.15);
color: #fff;
border:1px solid #77E2FF;
margin-bottom: .2rem;
border: 0.01rem solid #77E2FF;
// margin-bottom: .2rem;
&:nth-of-type(2n){
margin-left: .2rem;
}
......@@ -53,6 +57,7 @@
font-weight:500;
color:#fff;
line-height: 2;
white-space: nowrap;
span{
font-size:.12rem;
}
......@@ -67,19 +72,21 @@
.horizontal{
width: 1.7rem;
height: .2rem;
}
.horizontal1 {
background: #000E42;
position: absolute;
top:.76rem;
top:.773rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.horizontal1 {
top:1.58rem;
.horizontal2 {
top:1.6066rem;
}
.vertical{
width: .2rem;
height: 1.62rem;
height: 1.9rem;
background: #000E42;
position: absolute;
top: 50%;
......
src/assets/style/client.scss
View file @ 9ddba6de
.client{
width: 100%;
height: 100%;
.businessStatistics{
width: 90%;
height: 58%;
margin: calc(21% - 70px) auto 0;
position: relative;
.circle{
width: 30%;
padding-bottom: 30%;
height: 0;
background: #30DDF4;
border: 1px solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15%;
margin-left: -15%;
z-index: 2;
.circleTitle{
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:#000E42;
margin-top: 20%;
text-align: center;
}
.circleValue{
font-size:32px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#000E42;
text-align: center;
}
}
.circle1{
width: 34%;
padding-bottom: 34%;
height: 0;
background: #000E42;
border-radius: 50%;
position: absolute;
border:1px solid #77E2FF;
top: 50%;
left: 50%;
margin-top: -17%;
margin-left: -17%;
z-index: 1;
}
.box1,.box2,.box3,.box4{
display: inline-block;
width: calc(50% - 50px);
padding: 0 20px;
text-align: center;
height: calc(50% - 8px);
line-height: 50px;
background:rgba(144,224,255,0.15);
color: #fff;
position: absolute;
border:1px solid #77E2FF;
.boxTitle{
font-size:16px;
font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500;
color:#fff;
height: 40px;
span{
font-size:12px;
}
}
.boxValue{
font-size:32px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#30DDF4;
}
}
.box2{
position: absolute;
top:0;
left: calc(50% + 10px);
}
.box3{
position: absolute;
top:calc(50% + 8px);
left: 0;
}
.box4{
position: absolute;
top:calc(50% + 8px);
left: calc(50% + 10px);
}
.horizontal{
width: 100%;
height: 14px;
background: #000E42;
position: absolute;
top:calc(50% - 6px);
left: 0;
z-index: 1;
}
.vertical{
width: 18px;
height: 100%;
background: #000E42;
position: absolute;
top:0;
left: calc(50% - 8px);
z-index: 1;
}
}
.centerBlock{
.content{
height: calc(73.5% - 20px);
.search{
width: 50%;
height: 30px;
margin: 10px auto;
border-radius: 2px;
.el-input{
width: 70%;
float: left;
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
border: 0 !important;
}
.searchMsg{
font-size:.14rem;
font-family:PingFang-SC-Medium,PingFang-SC;
box-sizing: border-box;
width: 100%;
padding: .24rem;
margin: 0 auto;
>.row-item {
line-height: 2;
}
.searchBtn{
width: 30%;
height: 28px;
line-height: 28px;
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
text-align: center;
float: left;
.c-title {
color:rgba(48,221,244,1);
font-weight:500;
padding: .08rem 0;
}
}
.searchMsg{
width: 80%;
height: 40%;
padding: 5%;
margin: 0 auto 20px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
border:1px solid rgba(48,221,244,1);
>div{
.c-list {
box-sizing: border-box;
color: #fff;
width: 100%;
height: 30px;
line-height: 30px;
font-size:12px;
font-family:PingFang-SC-Medium,PingFang-SC;
.babel{
font-weight:500;
color:rgba(48,221,244,1);
}
.babelMsg{
font-weight:bold;
color:rgba(255,255,255,1);
float: right;
height: 1.3rem;
overflow-y: auto;
padding: .12rem .24rem;
border-radius: .05rem;
border: 1px solid rgba(48,221,244,1);
background: #09154e;
>span{
float: left;
width: 50%;
}
}
}
.architecture{
width: 90%;
height: calc(50% - 60px);
margin: 0 auto 20px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
position: relative;
.subtitle{
position: absolute;
top:0;
left: 0;
i{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #30DDF4;
margin-right: 10px;
}
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
.babel{
font-weight:500;
color:rgba(48,221,244,1);
}
.babelMsg{
float: right;
font-weight:bold;
color:rgba(255,255,255,1);
}
.architectureBlock{
width: 170px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -85px;
margin-top: -75px;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.name{
width: 170px;
height: 150px;
font-size:20px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(0,14,66,1);
line-height:174px;
text-align: center;
}
.top{
width: 80px;
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
position: absolute;
top:-30%;
left: 50%;
margin-left: -50px;
}
.left,.right{
width:100%;
position: absolute;
top:-20%;
left: -105%;
padding: 0;
li{
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
margin-bottom: 24%;
}
}
.right{
position: absolute;
top:-20%;
left: 105%;
}
.pr-24 {
padding-right: .24rem;
}
}
}
.bottomBox{
width: 100%;
height: 26.5%;
background: url("~@/assets/img/674266.png");
background-color: rgba(0, 14, 66, 0.5);
background-size: 100% 100%;
margin-top: 20px;
position: absolute;
left: 0;
bottom: 0;
}
}
.rightBlock{
.moreTxt {
font-size: .14rem;
color: #fff;
padding: .04rem .08rem;
text-decoration: underline;
cursor: pointer;
}
.iconBlock{
width: 90%;
height:60%;
background:rgba(13,30,91,1);
box-shadow:0px 4px 8px 0px rgba(10,18,35,0.5);
border:1px solid rgba(48,221,244,0.5);
margin: 4% auto 0;
padding: .24rem;
height:calc(100% - 1.12rem);
margin: 0 auto;
}
i{
display: inline-block;
position: relative;
top: 50%;
top: 20%;
margin-top: -10%;
margin-left: 5%;
float: left;
......
src/components/echarts/barChart.vue
View file @ 9ddba6de
......@@ -100,12 +100,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/doubleYBarChart.vue
View file @ 9ddba6de
......@@ -157,12 +157,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/funnel.vue
View file @ 9ddba6de
......@@ -91,12 +91,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/lineChart.vue
View file @ 9ddba6de
......@@ -91,12 +91,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/views/content/client/components/scatterPlot.vue → src/components/echarts/mulBarChart.vue
View file @ 9ddba6de
......@@ -25,74 +25,64 @@ export default {
methods: {
drawLine () {
const vm = this
const bars = []
this.message.title.forEach(e => {
bars.push({ type: 'bar' })
})
const source = []
const x = Object.keys(this.message.data)
for (let i = 0; i < x.length; i++) {
const da = this.message.data[x[i]]
const arr = []
for (let j = 0; j < this.message.title.length; j++) {
let flag = true
da.forEach(arg => {
if (arg.type === this.message.title[j]) {
arr.push(arg.num)
flag = false
}
})
if (flag) {
arr.push(0)
}
}
arr.unshift(x[i])
source.push(arr)
}
const title = this.message.title
title.unshift('product')
source.unshift(title)
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
grid: {
height: 135,
top: 50
},
color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
legend: {
show: true,
data: vm.message.legend, // ['新签预算', '新签实际', '完成比'],
textStyle: {
color: '#ffffff' // 图例文字颜色
color: '#ffffff'
}
},
tooltip: {},
dataset: {
source: source
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a}:<br/>{b}: {c} ({d}%)'
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#675bba'
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: [
{
type: 'category',
data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#675bba'
],
yAxis: [
{
type: 'value',
name: vm.message.yAxis, // '单位：万元',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: bars
],
series: vm.message.data
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
......@@ -111,12 +101,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/negativeBarChart.vue
View file @ 9ddba6de
......@@ -118,12 +118,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/pieChart.vue
View file @ 9ddba6de
......@@ -82,12 +82,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/waterBallChart.vue
View file @ 9ddba6de
......@@ -114,11 +114,15 @@ export default {
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/views/content/business/page.vue
View file @ 9ddba6de
<template>
<d2-container class="business">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="boxHeight-3">
<div class="title">商机统计</div>
<div class="businessStatistics d-flex">
<div class="circle">商机统计</div>
<div class="circle circleOut"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">商机总数<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['商机总数']}}</div>
</div>
<div class="box">
<div class="boxTitle pl-2">整体预算<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
</div>
</div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-7">本月新增<span>（个）</span></div>
<div class="boxValue pr-7">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
</div>
<div class="box">
<div class="boxTitle pl-8">预计毛利<span>（百万）</span></div>
<div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
<dv-loading v-show="loading">Loading...</dv-loading>
<div v-show="!loading">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="boxHeight-3">
<div class="title">商机统计</div>
<div class="businessStatistics d-flex">
<div class="circle">商机统计</div>
<div class="circle circleOut"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">商机总数<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['商机总数']}}</div>
</div>
<div class="box">
<div class="boxTitle pl-2">整体预算<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
</div>
</div>
</div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">售前参与<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['售前参与']}}</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-7">本月新增<span>（个）</span></div>
<div class="boxValue pr-7">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
</div>
<div class="box">
<div class="boxTitle pl-8">预计毛利<span>（百万）</span></div>
<div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
</div>
</div>
<div class="box">
<div class="boxTitle pl-2">预计成本<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">售前参与<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['售前参与']}}</div>
</div>
<div class="box">
<div class="boxTitle pl-2">预计成本<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div>
</div>
</div>
<div class="horizontal horizontal1 "></div>
<div class="horizontal horizontal1 horizontal2"></div>
<div class="vertical"></div>
</div>
<div class="horizontal"></div>
<div class="horizontal horizontal1"></div>
<div class="vertical"></div>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">行业分布</div>
<pieChart :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">商机分布</div>
<barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart>
</div>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">行业分布</div>
<pieChart :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">商机分布</div>
<barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart>
</div>
</div>
<div class="centerBlock">
<div class="centerBoxHeight-32 d-flex flex-column">
<div class="flex-1 d-flex">
<div class="flex-1">
<div class="title">商机阶段分析</div>
<funnel :message="bussionStep" :idstr="'bussionStep'" class="heightCut44"></funnel>
<div class="centerBlock">
<div class="centerBoxHeight-32 d-flex flex-column">
<div class="flex-1 d-flex">
<div class="flex-1">
<div class="title">商机阶段分析</div>
<funnel :message="bussionStep" :idstr="'bussionStep'" class="heightCut44"></funnel>
</div>
<div class="flex-1">
<div class="title">商机类型</div>
<pieChart :message="bussionType" idstr="bussionType" class="heightCut44"></pieChart>
</div>
</div>
<div class="flex-1">
<div class="title">商机类型</div>
<pieChart :message="bussionType" idstr="bussionType" class="heightCut44"></pieChart>
<doubleYBarChart :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
</div>
</div>
<div class="flex-1">
<doubleYBarChart :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
<div class="centerBoxHeight-3 mt-2">
<div class="title">合同税率分布</div>
<doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart>
</div>
</div>
<div class="centerBoxHeight-3 mt-2">
<div class="title">合同税率分布</div>
<doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart>
</div>
</div>
<div class="rightBlock">
<div class="boxHeight-3">
<div class="title">商机成功率</div>
<doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">新商机分析</div>
<doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">产品类型分析</div>
<pieChart :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart>
<div class="rightBlock">
<div class="boxHeight-3">
<div class="title">商机成功率</div>
<doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">新商机分析</div>
<doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">产品类型分析</div>
<pieChart :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart>
</div>
</div>
</div>
</div>
......@@ -102,6 +107,7 @@ export default {
components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel },
data () {
return {
loading: true,
// 行业分布
typeDistribute: {
legend: ['政府', '制造业', '能源', '金融', '军工'],
......@@ -276,6 +282,7 @@ export default {
methods: {
GetBusinessList () {
API_BUSSINESS.GetBusinessList().then(res => {
this.loading = false
this.totalData = res
this.totalObj = this.totalData.data
// 商机税率
......
src/views/content/client/components/distributed.vue deleted 100644 → 0
View file @ 4055900c
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
tooltip: {
transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是s，设置0的时候会紧跟鼠标移动
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: this.message[0].title,
axisLine: {
lineStyle: {
color: '#FFF'
}
},
axisLabel: {
rotate: 50,
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
grid: {
top: '10px',
left: '40px',
bottom: '30px',
width: '90%', // 图例宽度
height: '80%' // 图例高度
},
series: [{
data: this.message[0].num,
type: 'bar',
showBackground: true,
barWidth: 14,
itemStyle: {
normal: {
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
textStyle: { // 数值样式
color: 'white',
fontSize: 16
}
},
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{ offset: 1, color: '#30DDF4' },
{ offset: 0, color: '#E23AA2' }
]
)
}
}
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
src/views/content/client/components/pie.vue deleted 100644 → 0
View file @ 4055900c
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: {
orient: 'vertical',
data: this.message[0].title,
right: 10,
bottom: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 10 // 设置间距
},
series: [
{
name: '访问来源',
right: 60,
type: 'pie',
radius: ['50%', '70%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'left'
},
emphasis: { // hover效果，已经关闭
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.message[0].data
}
]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
// // 设置默认选中高亮部分
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: 0
// })
// vm.chart.on('mouseover', function (e) {
// // 当检测到鼠标悬停事件，取消默认选中高亮
// vm.chart.dispatchAction({
// type: 'downplay',
// seriesIndex: 1,
// dataIndex: 0
// })
// // 高亮显示悬停的那块
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 1,
// dataIndex: e.dataIndex
// })
// })
// // 检测鼠标移出后显示之前默认高亮的那块
// vm.chart.on('mouseout', function (e) {
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: 0
// })
// })
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
src/views/content/client/components/serviceAnalysis.vue 0 → 100644
View file @ 9ddba6de
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini">
<el-option
v-for="item in yearList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
<pieChart :message="dataList" idstr="serviceAnalysis" class="heightCut68"></pieChart>
</div>
</template>
<script>
import pieChart from '@/components/echarts/pieChart' // 饼图
export default {
components: { pieChart },
data () {
return {
selectYear: '2020',
yearList: ['2021', '2020', '2019', '2018', '2017'],
dataList: { // 服务分析
legend: ['软件解决方案', '云产品及服务', '系统集成及IT服务'],
data: [
{ value: 335, name: '软件解决方案' },
{ value: 310, name: '云产品及服务' },
{ value: 234, name: '系统集成及IT服务' }
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/client/page.vue
View file @ 9ddba6de
This diff is collapsed.
src/views/content/organization/page.vue
View file @ 9ddba6de
......@@ -192,8 +192,3 @@ export default {
<style lang="scss" scoped>
@import '~@/assets/style/organization.scss';
</style>
<style lang="scss">
.organization{
}
</style>
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