@@ -656,7 +656,7 @@ export default { | |||||
houseName: "", | houseName: "", | ||||
accountName: "", | accountName: "", | ||||
imei: "", | imei: "", | ||||
total: "", | |||||
total:10, | |||||
recording: "", | recording: "", | ||||
}, | }, | ||||
details: { | details: { | ||||
@@ -0,0 +1,530 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-titel"> | |||||
<div class="titel-text"> | |||||
楼盘选择: | |||||
<el-select v-model="houseId" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in buildingoptions" | |||||
:key="item.value" | |||||
:label="item.propertyName" | |||||
:value="item.id" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel"> | |||||
<div class="toptimeqhuan"> | |||||
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> | |||||
今日 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> | |||||
昨日 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> | |||||
近一周 | |||||
</div> | |||||
</div> | |||||
<div style="margin-left: 26px"> | |||||
<el-date-picker | |||||
v-model="customtime" | |||||
@change="confirmtime()" | |||||
type="daterange" | |||||
range-separator="-" | |||||
:default-time="['00:00:00', '23:59:59']" | |||||
value-format="yyyy-MM-dd" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期" | |||||
> | |||||
</el-date-picker> | |||||
</div> | |||||
<div style="margin-left: 26px" class="div-lab"> | |||||
<div class="label">员工</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div style="margin-left: 26px" class="div-lab"> | |||||
<div class="label">对比</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<div class="app-titel"> | |||||
<div class="toptimeqhuan"> | |||||
<div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)"> | |||||
销讲统计 | |||||
</div> | |||||
<div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)"> | |||||
违禁统计 | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<el-table :data="tableData" stripe style="width: 100%"> | |||||
<el-table-column prop="batchId" label="序号" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="顾问" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="归属团队" align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
v-if="tabFlag == 0" | |||||
label="设备在线天数" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="接待量" align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="realityEquipmentCount" | |||||
label="违禁次数" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="receivableEquipmentCount" | |||||
label="违禁占比" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 0" | |||||
prop="realityEquipmentCount" | |||||
label="接待时长" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="acceptanceNum" | |||||
label="返现执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="acceptanceNum" | |||||
label="过度保证执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="createTime" | |||||
v-if="tabFlag == 0" | |||||
label="品牌介绍执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="createTime" | |||||
v-if="tabFlag == 0" | |||||
label="沙盘介绍执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column prop="remark" label="...执行性率" align="center"> | |||||
</el-table-column> | |||||
<el-table-column label="违禁执行率" align="center"> </el-table-column> | |||||
</el-table> | |||||
<div style="display: flex; justify-content: flex-end; margin-top: 10px"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[8, 16, 24, 32]" | |||||
:page-size="4" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="total" | |||||
> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
<div class="app-box-san"> | |||||
<div class="zuo"> | |||||
<div class="title"> | |||||
<div class="text1">接待量(TOP10)</div> | |||||
</div> | |||||
<div class="hejisan"> | |||||
<div class="sanbox1" style="width: 35%"> | |||||
<div class="text1-1">合计</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 40%"> | |||||
<div class="text1-1">顾问</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 25%"> | |||||
<div class="text1-1">人均接待量</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
</div> | |||||
<div | |||||
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto" | |||||
> | |||||
<div id="echar" style="height: 250px; width: 100%"></div> | |||||
</div> | |||||
</div> | |||||
<div class="you"> | |||||
<div class="title"> | |||||
<div class="text1">销讲执行率(TOP10)</div> | |||||
<div class="text2"> | |||||
<el-select | |||||
style="width: 90%; margin: 0 auto" | |||||
v-model="value" | |||||
placeholder="请选择" | |||||
> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="hejisan"> | |||||
<div class="sanbox1" style="width: 35%"> | |||||
<div class="text1-1">合计</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 40%"> | |||||
<div class="text1-1">顾问</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 25%"> | |||||
<div class="text1-1">人均接待量</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
</div> | |||||
<div | |||||
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto" | |||||
> | |||||
<div class="jinbox" v-for="(item, i) in ceratelist" :key="i"> | |||||
<div class="jinboxtit">{{ item.name }}</div> | |||||
<div class="jinbox-box"> | |||||
<div | |||||
class="boxbaifenbi" | |||||
:style="'width:' + item.avgZxl + '%;'" | |||||
></div> | |||||
</div> | |||||
<div class="jinboxbott">{{ item.avgZxl }}%</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import * as echarts from "echarts"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
houseId: "", | |||||
buildingoptions: [], | |||||
TimetoAhoose: 2, | |||||
tabFlag: 1, | |||||
customtime: [], | |||||
tableData: [], | |||||
currentPage4: 1, | |||||
total: 20, | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "排名", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "趋势", | |||||
}, | |||||
], | |||||
value: "1", | |||||
ceratelist: [ | |||||
{ name: "还是得", avgZxl: 80 }, | |||||
{ name: "大大奥德赛", avgZxl: 90 }, | |||||
{ name: "沙发和", avgZxl: 20 }, | |||||
{ name: "还是得", avgZxl: 10 }, | |||||
{ name: "还客户家客户是得", avgZxl: 80 }, | |||||
], | |||||
}; | |||||
}, | |||||
mounted() { | |||||
this.echarCreat(); | |||||
}, | |||||
methods: { | |||||
echarCreat() { | |||||
let myChart = echarts.init(document.getElementById("echar")); | |||||
let option = { | |||||
tooltip: { | |||||
trigger: "axis", | |||||
axisPointer: { | |||||
type: "shadow", | |||||
}, | |||||
}, | |||||
color: [ | |||||
"#66AFF5", | |||||
"#FABD2B", | |||||
"#6F8EDC", | |||||
"#FFCF8F", | |||||
"#F98120", | |||||
"#1CC99E", | |||||
"#9474FB", | |||||
"#657292", | |||||
"#7A6A99", | |||||
"#BF5D52", | |||||
"#EE6666", | |||||
"#77B7E4", | |||||
"#E6A065", | |||||
"#9D5139", | |||||
"#C1AA88", | |||||
"#F87F7A", | |||||
"#F6CF74", | |||||
"#7F5506", | |||||
"#88BB9B", | |||||
"#6E99AA", | |||||
"#5789D0", | |||||
], | |||||
legend: {}, | |||||
grid: { | |||||
left: "3%", | |||||
right: "4%", | |||||
bottom: "3%", | |||||
containLabel: true, | |||||
}, | |||||
xAxis: { | |||||
type: "value", | |||||
boundaryGap: [0, 0.01], | |||||
}, | |||||
yAxis: { | |||||
type: "category", | |||||
data: ["Brazil", "Indonesia", "USA", "India", "China", "World"], | |||||
}, | |||||
series: [ | |||||
{ | |||||
type: "bar", | |||||
data: [19325, 23438, 31000, 121594, 134141, 681807], | |||||
}, | |||||
], | |||||
}; | |||||
myChart.setOption(option); | |||||
}, | |||||
handleCurrentChange() {}, | |||||
handleSizeChange() {}, | |||||
//切换时间 | |||||
tabtimetap(index) { | |||||
this.TimetoAhoose = index; | |||||
}, | |||||
tabFlagChange(idx) { | |||||
this.tabFlag = idx; | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab { | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #ffffff; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-titel { | |||||
width: 100%; | |||||
height: 70px; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
display: flex; | |||||
align-items: center; | |||||
flex-wrap: wrap; | |||||
.titel-text { | |||||
height: 100%; | |||||
font-size: 18px; | |||||
font-weight: 600; | |||||
color: #32363d; | |||||
line-height: 70px; | |||||
margin-left: 30px; | |||||
} | |||||
.toptimeqhuan { | |||||
width: 190px; | |||||
height: 32px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-items: center; | |||||
overflow: hidden; | |||||
margin-left: 30px; | |||||
cursor: pointer; | |||||
} | |||||
.toptimeqhuan div { | |||||
flex: 1; | |||||
text-align: center; | |||||
line-height: 32px; | |||||
font-size: 16px; | |||||
} | |||||
} | |||||
.app-box-san { | |||||
width: 100%; | |||||
height: 400px; | |||||
display: flex; | |||||
margin-top: 15px; | |||||
.zuo { | |||||
flex: 1; | |||||
height: 100%; | |||||
margin-right: 15px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.title { | |||||
width: 100%; | |||||
height: 55px; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-content: center; | |||||
.text1 { | |||||
flex: 2; | |||||
line-height: 55px; | |||||
text-indent: 20px; | |||||
font-weight: 500; | |||||
font-size: 16px; | |||||
color: #333333; | |||||
} | |||||
.text2 { | |||||
flex: 1; | |||||
height: 55px; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
.you { | |||||
height: 100%; | |||||
flex: 1; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.title { | |||||
width: 100%; | |||||
height: 55px; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-content: center; | |||||
.text1 { | |||||
flex: 2; | |||||
line-height: 55px; | |||||
text-indent: 20px; | |||||
font-weight: 500; | |||||
font-size: 16px; | |||||
color: #333333; | |||||
} | |||||
.text2 { | |||||
flex: 1; | |||||
height: 55px; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.hejisan { | |||||
width: 92%; | |||||
margin: 0 auto; | |||||
display: flex; | |||||
padding-top: 10px; | |||||
padding-bottom: 10px; | |||||
.text1-1 { | |||||
color: #666666; | |||||
} | |||||
.text1-2 { | |||||
color: #333333; | |||||
margin-top: 10px; | |||||
} | |||||
} | |||||
// 进度条 | |||||
.jinbox { | |||||
width: 100%; | |||||
height: 18px; | |||||
line-height: 18px; | |||||
display: flex; | |||||
font-size: 16px; | |||||
color: #2c3542; | |||||
margin-top: 10px; | |||||
.jinboxtit { | |||||
width: 14%; | |||||
height: 18px; | |||||
padding-right: 6px; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
overflow: hidden; | |||||
} | |||||
.jinbox-box { | |||||
width: 75%; | |||||
height: 100%; | |||||
border-radius: 8px; | |||||
background: #f2f2f2; | |||||
} | |||||
.boxbaifenbi { | |||||
height: 100%; | |||||
background: #60d7a0; | |||||
border-radius: 8px; | |||||
} | |||||
.boxbaifenbi2 { | |||||
height: 100%; | |||||
background: #5b8ff9; | |||||
} | |||||
.jinboxbott { | |||||
width: 16%; | |||||
text-indent: 50px; | |||||
} | |||||
} | |||||
.div-lab { | |||||
display: flex; | |||||
margin: 5px; | |||||
} | |||||
.div-inp { | |||||
width: 200px; | |||||
} | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 32px; | |||||
margin-left: 15px; | |||||
min-width: 40px; | |||||
} | |||||
</style> |
@@ -0,0 +1,478 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-titel"> | |||||
<div class="titel-text"> | |||||
楼盘选择: | |||||
<el-select v-model="houseId" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in buildingoptions" | |||||
:key="item.value" | |||||
:label="item.propertyName" | |||||
:value="item.id" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel"> | |||||
<div class="toptimeqhuan"> | |||||
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> | |||||
今日 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> | |||||
昨日 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> | |||||
近一周 | |||||
</div> | |||||
</div> | |||||
<div style="margin-left: 26px"> | |||||
<el-date-picker | |||||
v-model="customtime" | |||||
@change="confirmtime()" | |||||
type="daterange" | |||||
range-separator="-" | |||||
:default-time="['00:00:00', '23:59:59']" | |||||
value-format="yyyy-MM-dd" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期" | |||||
> | |||||
</el-date-picker> | |||||
</div> | |||||
<div style="margin-left: 26px" class="div-lab"> | |||||
<div class="label">员工</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div style="margin-left: 26px" class="div-lab"> | |||||
<div class="label">对比</div> | |||||
<el-select v-model="value" placeholder="请选择" class="div-inp"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-box-san"> | |||||
<div class="zuo"> | |||||
<div class="title"> | |||||
<div class="text1">接待量(TOP10)</div> | |||||
</div> | |||||
<div class="hejisan"> | |||||
<div class="sanbox1" style="width: 35%"> | |||||
<div class="text1-1">宋先锋</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 40%"> | |||||
<div class="text1-1">案场平均</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
</div> | |||||
<div | |||||
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto" | |||||
> | |||||
<div id="echar" style="height:300px;"></div> | |||||
</div> | |||||
</div> | |||||
<div class="zuo"> | |||||
<div class="title"> | |||||
<div class="text1">销讲能雷达图(TOP10)</div> | |||||
</div> | |||||
<div class="hejisan"> | |||||
<div class="sanbox1" style="width: 35%"> | |||||
<div class="text1-1">合计</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
<div class="sanbox1" style="width: 40%"> | |||||
<div class="text1-1">顾问</div> | |||||
<div class="text1-2">1</div> | |||||
</div> | |||||
</div> | |||||
<div | |||||
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto" | |||||
> | |||||
<div id="echar1" style="height:250px;"></div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<div class="app-titel"> | |||||
<div class="toptimeqhuan"> | |||||
<div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)"> | |||||
销讲统计 | |||||
</div> | |||||
<div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)"> | |||||
违禁统计 | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<el-table :data="tableData" stripe style="width: 100%"> | |||||
<el-table-column prop="batchId" label="日期" align="center"> | |||||
</el-table-column> | |||||
<el-table-column prop="name" label="接待量" align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="realityEquipmentCount" | |||||
label="违禁次数" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 1" | |||||
prop="receivableEquipmentCount" | |||||
label="违禁占比" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
v-if="tabFlag == 0" | |||||
prop="realityEquipmentCount" | |||||
label="接待时长" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column prop="acceptanceNum" label="返现执行率" align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="createTime" | |||||
label="过度保证执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column prop="remark" label="...执行性率" align="center"> | |||||
</el-table-column> | |||||
<el-table-column label="违禁执行率" align="center"> </el-table-column> | |||||
</el-table> | |||||
<div style="display: flex; justify-content: flex-end; margin-top: 10px"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[8, 16, 24, 32]" | |||||
:page-size="4" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="total" | |||||
> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import * as echarts from "echarts"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
houseId: "", | |||||
buildingoptions: [], | |||||
TimetoAhoose: 2, | |||||
tabFlag: 1, | |||||
customtime: [], | |||||
tableData: [], | |||||
currentPage4: 1, | |||||
total: 20, | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "排名", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "趋势", | |||||
}, | |||||
], | |||||
echarList: {}, | |||||
value: "1", | |||||
ceratelist: [ | |||||
{ name: "还是得", avgZxl: 80 }, | |||||
{ name: "大大奥德赛", avgZxl: 90 }, | |||||
{ name: "沙发和", avgZxl: 20 }, | |||||
{ name: "还是得", avgZxl: 10 }, | |||||
{ name: "还客户家客户是得", avgZxl: 80 }, | |||||
], | |||||
}; | |||||
}, | |||||
mounted() { | |||||
this.echarCreat(); | |||||
this.creatRadar(); | |||||
}, | |||||
methods: { | |||||
echarCreat() { | |||||
let myChart = echarts.init(document.getElementById("echar")); | |||||
let option = { | |||||
xAxis: { | |||||
type: "category", | |||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||||
}, | |||||
yAxis: { | |||||
type: "value", | |||||
}, | |||||
legend: { | |||||
data: ["line", "line1"], | |||||
}, | |||||
series: [ | |||||
{ | |||||
data: [150, 230, 224, 218, 135, 147, 260], | |||||
type: "line", | |||||
name: "line", | |||||
}, | |||||
{ | |||||
data: [10, 20, 24, 28, 13, 17, 20], | |||||
type: "line", | |||||
name: "line1", | |||||
}, | |||||
], | |||||
}; | |||||
myChart.setOption(option); | |||||
}, | |||||
creatRadar() { | |||||
let myChart = echarts.init(document.getElementById("echar1")); | |||||
let option = { | |||||
legend: { | |||||
data: ["Allocate", "Actua"], | |||||
}, | |||||
radar: { | |||||
// shape: 'circle', | |||||
indicator: [ | |||||
{ name: "Sales", max: 6500 }, | |||||
{ name: "Administration", max: 16000 }, | |||||
{ name: "Information Technology", max: 30000 }, | |||||
{ name: "Customer Support", max: 38000 }, | |||||
{ name: "Development", max: 52000 }, | |||||
{ name: "Marketing", max: 25000 }, | |||||
], | |||||
}, | |||||
series: [ | |||||
{ | |||||
name: "Budget vs spending", | |||||
type: "radar", | |||||
data: [ | |||||
{ | |||||
value: [4200, 3000, 20000, 35000, 50000, 18000], | |||||
name: "Allocate", | |||||
}, | |||||
{ | |||||
value: [5000, 14000, 28000, 26000, 42000, 21000], | |||||
name: "Actua", | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}; | |||||
myChart.setOption(option); | |||||
}, | |||||
handleCurrentChange() {}, | |||||
handleSizeChange() {}, | |||||
//切换时间 | |||||
tabtimetap(index) { | |||||
this.TimetoAhoose = index; | |||||
}, | |||||
tabFlagChange(idx) { | |||||
this.tabFlag = idx; | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab { | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #ffffff; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-titel { | |||||
width: 100%; | |||||
height: 70px; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
display: flex; | |||||
align-items: center; | |||||
.titel-text { | |||||
height: 100%; | |||||
font-size: 18px; | |||||
font-weight: 600; | |||||
color: #32363d; | |||||
line-height: 70px; | |||||
margin-left: 30px; | |||||
} | |||||
.toptimeqhuan { | |||||
width: 190px; | |||||
height: 32px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-items: center; | |||||
overflow: hidden; | |||||
margin-left: 30px; | |||||
cursor: pointer; | |||||
} | |||||
.toptimeqhuan div { | |||||
flex: 1; | |||||
text-align: center; | |||||
line-height: 32px; | |||||
font-size: 16px; | |||||
} | |||||
} | |||||
.app-box-san { | |||||
width: 100%; | |||||
height: 400px; | |||||
display: flex; | |||||
margin-top: 15px; | |||||
.zuo { | |||||
flex: 1; | |||||
height: 100%; | |||||
margin-right: 15px; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.title { | |||||
width: 100%; | |||||
height: 55px; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-content: center; | |||||
.text1 { | |||||
flex: 2; | |||||
line-height: 55px; | |||||
text-indent: 20px; | |||||
font-weight: 500; | |||||
font-size: 16px; | |||||
color: #333333; | |||||
} | |||||
.text2 { | |||||
flex: 1; | |||||
height: 55px; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
.you { | |||||
height: 100%; | |||||
flex: 1; | |||||
background: #ffffff; | |||||
border-radius: 4px; | |||||
.title { | |||||
width: 100%; | |||||
height: 55px; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
display: flex; | |||||
align-content: center; | |||||
.text1 { | |||||
flex: 2; | |||||
line-height: 55px; | |||||
text-indent: 20px; | |||||
font-weight: 500; | |||||
font-size: 16px; | |||||
color: #333333; | |||||
} | |||||
.text2 { | |||||
flex: 1; | |||||
height: 55px; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.hejisan { | |||||
width: 92%; | |||||
margin: 0 auto; | |||||
display: flex; | |||||
padding-top: 10px; | |||||
padding-bottom: 10px; | |||||
.text1-1 { | |||||
color: #666666; | |||||
} | |||||
.text1-2 { | |||||
color: #333333; | |||||
margin-top: 10px; | |||||
} | |||||
} | |||||
// 进度条 | |||||
.jinbox { | |||||
width: 100%; | |||||
height: 18px; | |||||
line-height: 18px; | |||||
display: flex; | |||||
font-size: 16px; | |||||
color: #2c3542; | |||||
margin-top: 10px; | |||||
.jinboxtit { | |||||
width: 14%; | |||||
height: 18px; | |||||
padding-right: 6px; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
overflow: hidden; | |||||
} | |||||
.jinbox-box { | |||||
width: 75%; | |||||
height: 100%; | |||||
border-radius: 8px; | |||||
background: #f2f2f2; | |||||
} | |||||
.boxbaifenbi { | |||||
height: 100%; | |||||
background: #60d7a0; | |||||
border-radius: 8px; | |||||
} | |||||
.boxbaifenbi2 { | |||||
height: 100%; | |||||
background: #5b8ff9; | |||||
} | |||||
.jinboxbott { | |||||
width: 16%; | |||||
text-indent: 50px; | |||||
} | |||||
} | |||||
.div-lab { | |||||
display: flex; | |||||
margin: 5px; | |||||
} | |||||
.div-inp { | |||||
width: 200px; | |||||
} | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 32px; | |||||
margin-left: 15px; | |||||
min-width: 40px; | |||||
} | |||||
</style> |