liumin
/
zkPCproject
0
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

图表优化

newStyle
jyt пре 2 година
родитељ
434210b4d6
комит
36c9b3f581
16 измењених фајлова са 857 додато и 569 уклоњено
Подељен поглед
Diff Options
Show Stats Download Patch File Download Diff File
  1. +22
    -0
      src/util/theme.color.js
  2. +16
    -93
      src/views/Equipment/equipmentDetailList.vue
  3. +174
    -116
      src/views/Statistics/BuildingContrast.vue
  4. +83
    -23
      src/views/Statistics/ConsultantBrand.vue
  5. +36
    -56
      src/views/Statistics/MentoringAbility.vue
  6. +277
    -103
      src/views/Statistics/ReceptionOverview.vue
  7. +84
    -20
      src/views/Statistics/TheTeamCompared.vue
  8. +18
    -94
      src/views/Statistics/TrendAnalysis.vue
  9. +21
    -0
      src/views/Statistics/dataScreeAge.vue
  10. +23
    -24
      src/views/Statistics/dataScreeOrg.vue
  11. +22
    -1
      src/views/Statistics/dataScreeSys.vue
  12. +12
    -1
      src/views/Statistics/houseDataSys.vue
  13. +7
    -23
      src/views/Statistics/index.vue
  14. +12
    -1
      src/views/Statistics/trend.vue
  15. +48
    -12
      src/views/houseData/analyse.vue
  16. +2
    -2
      vue.config.js

+ 22
- 0
src/util/theme.color.js Прегледај датотеку

@@ -0,0 +1,22 @@
let colorArr = [
"#5B8FF9",
"#E6625B",
"#FF981E",
"#F6BD16",
"#07B79D",
"#9B6BDF",
"#FF99C3",
"#1E9493",
"#BA3FB7",
"#54BEF3",
"#3C21F7",
"#F87148",
"#3EB171"
]
let colorTemp = Math.floor(Math.random() * colorArr.length + 1) - 1

let a = {
randomColor:colorArr[colorTemp],
colorArr
}
export default a;

+ 16
- 93
src/views/Equipment/equipmentDetailList.vue Прегледај датотеку

@@ -548,6 +548,7 @@
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
import colorTheme from "@/util/theme.color"
export default {
data() {
return {
@@ -1187,29 +1188,7 @@ export default {
var option;

option = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "axis",
},
@@ -1298,35 +1277,13 @@ export default {
var myChart = echarts.init(chartDom);
var option;
option = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr[0],
tooltip: {
trigger: "axis",
},
legend: {
data: [str1],
bottom: "10",
top: "10",
},
grid: {
left: 10,
@@ -1382,6 +1339,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1479,29 +1446,7 @@ export default {
var myChart = echarts.init(document.getElementById("mane"));
var myChart1 = echarts.init(document.getElementById("mane2"));
var option = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "item",
},
@@ -1520,29 +1465,7 @@ export default {
],
};
var option1 = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "item",
},


+ 174
- 116
src/views/Statistics/BuildingContrast.vue Прегледај датотеку

@@ -15,17 +15,9 @@
</div>
</div>
<div style="margin-left: 26px">
<el-date-picker
v-model="customtime"
@change="confirmtime()"
type="daterange"
:clearable="false"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
<el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"
range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<!-- <el-select
@@ -42,10 +34,7 @@
>
</el-option>
</el-select> -->
<div
style="margin-left: auto; margin-right: 10px"
v-if="sta_bui_downLoad"
>
<div style="margin-left: auto; margin-right: 10px" v-if="sta_bui_downLoad">
<el-button @click="downLoad">导出</el-button>
</div>
</div>
@@ -69,52 +58,22 @@
</el-table-column>
<el-table-column prop="activeCustomer" label="有效接待" align="center" width="100" sortable>
</el-table-column>
<el-table-column
prop="prohibitedCustomer"
label="违禁接待次数"
align="center"
sortable
width="140"
>
<el-table-column prop="prohibitedCustomer" label="违禁接待次数" align="center" sortable width="140">
</el-table-column>
<el-table-column
prop="sumDuration"
label="接待时长(分钟)"
align="center"
sortable
width="140"
>
<el-table-column prop="sumDuration" label="接待时长(分钟)" align="center" sortable width="140">
<template slot-scope="scope">
{{ Math.floor(scope.row.sumDuration / 60) || 0 }}
</template>
</el-table-column>
<el-table-column
prop="prohibitedZb"
label="违禁接待占比"
align="center"
sortable
width="140"
>
<el-table-column prop="prohibitedZb" label="违禁接待占比" align="center" sortable width="140">
<template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
</el-table-column>
<el-table-column
prop="addtodigestCount"
label="优秀案例数"
align="center"
sortable
width="140"
></el-table-column>
<el-table-column prop="addtodigestCount" label="优秀案例数" align="center" sortable width="140"></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="page"
:page-sizes="[10, 30, 50]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="[10, 30, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
@@ -125,29 +84,41 @@
<div class="text1">接待量（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">接待合计</div>
<div class="text1-2">{{ objList1.sum }}次</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">项目总数</div>
<div class="text1-2">{{ objList1.num }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">平均接待</div>
<div class="text1-2">{{ objList1.avg }}次</div>
</div>
</div>
<div
style="height: 300px; width: 94%; margin: 0 auto"
>
<div style="height: 300px; width: 94%; margin: 0 auto">
<div class="jinbox" v-for="(item, i) in objList1.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>

</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
@@ -158,25 +129,37 @@
<div class="text1">平均执行率（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;;text-align: center;">
<div class="text1-1">项目总数</div>
<div class="text1-2">{{ objList2.num }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;;text-align: center;">
<div class="text1-1">平均执行率</div>
<div class="text1-2">{{ objList2.avg }}%</div>
</div>
</div>
<div
style="height: 300px; width: 94%; margin: 0 auto"
>
<div style="height: 300px; width: 94%; margin: 0 auto">
<div class="jinbox" v-for="(item, i) in objList2.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl + '%;'"
></div>
></div> -->
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
</div>

</div>
<div class="jinboxbott">{{ item.zxl }}%</div>
</div>
@@ -190,29 +173,40 @@
<div class="text1">违禁接待次数（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">合计</div>
<div class="text1-2">{{ objList3.sum }}次</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">项目总数</div>
<div class="text1-2">{{ objList3.num }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">平均违规</div>
<div class="text1-2">{{ objList3.avg }}次</div>
</div>
</div>
<div
style="height: 300px; width: 94%; margin: 0 auto"
>
<div style="height: 300px; width: 94%; margin: 0 auto">
<div class="jinbox" v-for="(item, i) in objList3.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>

</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
@@ -223,29 +217,41 @@
<div class="text1">接待时长（分钟）（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">时长合计</div>
<div class="text1-2">{{ objList4.sum }}分钟</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">项目总数</div>
<div class="text1-2">{{ objList4.num }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">平均时长</div>
<div class="text1-2">{{ objList4.avg }}分钟</div>
</div>
</div>
<div
style="height: 300px; width: 94%; margin: 0 auto"
>
<div style="height: 300px; width: 94%; margin: 0 auto">
<div class="jinbox" v-for="(item, i) in objList4.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>

</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>

</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
@@ -329,38 +335,38 @@ export default {
},
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}

const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
// sums[index] += ' 元';
if (index === 2) {
sums[index] += '%';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
// sums[index] += ' 元';
if (index === 2) {
sums[index] += '%';
return;
}
if (index === 8) {
sums[index] += '%';
return;
}
if (index === 8) {
sums[index] += '%';
return;
}
});
sums[1] = ' ';
return sums;
},
}
});
sums[1] = ' ';
return sums;
},
downLoad() {
let pamaet = {
orgType: this.role,
@@ -613,22 +619,36 @@ export default {
</script>

<style scoped="scoped" lang="scss" >
.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
color: #333333;
}

.box-center {
width: 100%;
padding: 15px;
min-width: 1000px;
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;
@@ -637,6 +657,7 @@ export default {
border-radius: 4px;
display: flex;
align-items: center;

.titel-text {
height: 100%;
font-size: 18px;
@@ -645,6 +666,7 @@ export default {
line-height: 70px;
margin-left: 30px;
}

.toptimeqhuan {
width: 190px;
height: 32px;
@@ -657,6 +679,7 @@ export default {
margin-left: 20px;
cursor: pointer;
}

.toptimeqhuan div {
flex: 1;
text-align: center;
@@ -670,18 +693,21 @@ export default {
min-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;
@@ -690,6 +716,7 @@ export default {
font-size: 16px;
color: #333333;
}

.text2 {
flex: 1;
height: 55px;
@@ -698,17 +725,20 @@ export default {
}
}
}

.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;
@@ -717,6 +747,7 @@ export default {
font-size: 16px;
color: #333333;
}

.text2 {
flex: 1;
height: 55px;
@@ -733,12 +764,15 @@ export default {
display: flex;
padding-top: 10px;
padding-bottom: 10px;

.text1-1 {
color: #666666;
}

.text1-2 {
color: #333333;
margin-top: 10px;
font-weight: bold;
}
}

@@ -751,6 +785,7 @@ export default {
font-size: 16px;
color: #2c3542;
margin-top: 10px;

.jinboxtit {
width: 14%;
height: 18px;
@@ -758,22 +793,45 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
margin-right: 10px;
color: #333333;
}

.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 10px;
}
}

.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: 16px;


+ 83
- 23
src/views/Statistics/ConsultantBrand.vue Прегледај датотеку

@@ -179,15 +179,15 @@
<div class="text1">接待量排名（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">接待合计</div>
<div class="text1-2">{{ sum1 }}次</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">顾问人数</div>
<div class="text1-2">{{ num1 }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">人均接待</div>
<div class="text1-2">{{ avg1 }}次</div>
</div>
@@ -197,12 +197,24 @@
style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
>
<div class="jinbox" v-for="(item, i) in echarlist" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}次</div>
</div>
@@ -224,15 +236,15 @@
</div>

<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">接待时长合计</div>
<div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">顾问人数</div>
<div class="text1-2">{{ num2 }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>
</div>
@@ -242,12 +254,24 @@
style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
>
<div class="jinbox" v-for="(item, i) in echarlist2" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.percentage + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.percentage + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}分钟</div>
</div>
@@ -287,11 +311,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">顾问人数</div>
<div class="text1-2">{{ num3 }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">平均执行</div>
<div class="text1-2">{{ avg3 }}%</div>
</div>
@@ -301,12 +325,24 @@
style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
>
<div class="jinbox" v-for="(item, i) in echarlist1" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}%</div>
</div>
@@ -343,15 +379,15 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="sanbox1" style="width: 35%;text-align: center;">
<div class="text1-1">违禁合计</div>
<div class="text1-2">{{ sum4 }}次</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%;text-align: center;">
<div class="text1-1">顾问人数</div>
<div class="text1-2">{{ num4 }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 25%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ avg4 }}次</div>
</div>
@@ -361,12 +397,24 @@
style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
>
<div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}次</div>
</div>
@@ -815,6 +863,17 @@ export default {
</script>

<style scoped="scoped" lang="scss" >
.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
color: #333333;
margin-right: 10px;
}
.box-center {
width: 100%;
padding: 15px;
@@ -981,6 +1040,7 @@ export default {
.text1-2 {
color: #333333;
margin-top: 10px;
font-weight: bold;
}
}



+ 36
- 56
src/views/Statistics/MentoringAbility.vue Прегледај датотеку

@@ -99,11 +99,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ consultantname }}</div>
<div class="text1-2">{{ datalistobj1.avgA }}次</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ Packname }}</div>
<div class="text1-2">{{ datalistobj1.avgB }}次</div>
</div>
@@ -117,11 +117,11 @@
<div class="text1">接待时长</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ consultantname }}</div>
<div class="text1-2">{{ datalistobj2.avgA }}分钟</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ Packname }}</div>
<div class="text1-2">{{ datalistobj2.avgB }}分钟</div>
</div>
@@ -154,11 +154,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ consultantname }}</div>
<div class="text1-2">{{ datalistobj3.avgA }}%</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ Packname }}</div>
<div class="text1-2">{{ datalistobj3.avgB }}%</div>
</div>
@@ -172,7 +172,7 @@
<div class="text1">销讲能力雷达图</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">&nbsp;</div>
<div class="text1-2">&nbsp;</div>
</div>
@@ -213,11 +213,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ consultantname }}</div>
<div class="text1-2">{{ datalistobj5.avgA }}次</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">{{ Packname }}</div>
<div class="text1-2">{{ datalistobj5.avgB }}次</div>
</div>
@@ -231,7 +231,7 @@
<div class="text1">违禁话术雷达图</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">&nbsp;</div>
<div class="text1-2">&nbsp;</div>
</div>
@@ -386,6 +386,9 @@
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";

import colorTheme from "../../util/theme.color"
import color from "../../mixins/color";
export default {
data() {
return {
@@ -935,29 +938,7 @@ export default {

var option;
option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
legend: {
data: [this.consultantname, this.Packname],
top: "6",
@@ -991,12 +972,32 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
{
name: this.Packname,
data: arr2,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[1] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1099,29 +1100,7 @@ export default {
// }
var option;
option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "axis",
},
@@ -1363,6 +1342,7 @@ export default {
.text1-2 {
color: #333333;
margin-top: 10px;
font-weight: bold;
}
}



+ 277
- 103
src/views/Statistics/ReceptionOverview.vue Прегледај датотеку

@@ -175,11 +175,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">合计接待</div>
<div class="text1-2">{{ Pinspeak.sum || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ Pinspeak.avg || 0 }}%</div>
</div>
@@ -199,11 +199,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">合计接待</div>
<div class="text1-2">{{ Pinspeak2.sum || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ Pinspeak2.avg || 0 }}%</div>
</div>
@@ -227,7 +227,7 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 30%">
<div class="sanbox1" style="width: 30%; text-align: center;">
<div class="text1-1">
{{ activeName == "3" ? "平均执行率" : "合计" }}
</div>
@@ -235,12 +235,12 @@
{{ ceratelist.avg || 0 }}{{ activeName | company }}
</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="sanbox1" style="width: 40%; text-align: center;">
<div class="text1-1">顾问</div>
<div class="text1-2">{{ ceratelist.num || 0 }}个</div>
</div>
<template v-if="activeName != '3'">
<div class="sanbox1" style="width: 30%">
<div class="sanbox1" style="width: 30%; text-align: center;">
<div class="text1-1">{{ activeName | comName }}</div>
<div class="text1-2">
{{ ceratelist.avg || 0 }}{{ activeName | company }}
@@ -248,29 +248,41 @@
</div>
</template>
</div>
<div v-if="ceratelist.list.length != 0" style="
<div v-if="activeName !== '0'">
<div v-if="ceratelist.list.length != 0" style="
height: 360px;
width: 94%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 16px;
">
<div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>
</div>
<div class="jinboxbott">
{{ item.zxl || 0 }}{{ activeName | company }}
<div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i">
<div class="jinboxtit">
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<span class="name">{{ item.name }}</span>
</div>
<div class="jinbox-box">
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>
</div>
<div class="jinboxbott">
{{ item.zxl || 0 }}{{ activeName | company }}
</div>
</div>
</div>
</div>
<div class="nulllist" v-if="ceratelist.list.length == 0">
<div class="imgboxc">
<img class="imgboxc-img" src="/img/nullnull.png" alt="" />
<div class="nulltext">暂无数据</div>
<div class="nulllist" v-if="ceratelist.list.length == 0">
<div class="imgboxc">
<img class="imgboxc-img" src="/img/nullnull.png" alt="" />
<div class="nulltext">暂无数据</div>
</div>
</div>
</div>
<div v-else id="xxx" style="width:100%;height:400px"></div>
</div>
<!-- <div class="you">
<div class="title">
@@ -355,9 +367,24 @@
margin-bottom: 16px;
">
<div class="jinbox" v-for="(item, i) in Zxllist" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
<!-- <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> -->
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
</div>

</div>
<div class="jinboxbott">{{ item.zxl }}%</div>
</div>
@@ -396,9 +423,24 @@
margin-bottom: 16px;
">
<div class="jinbox" v-for="(item, i) in Zxllistchildren" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
</div>

<!-- <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> -->
</div>
<div class="jinboxbott">{{ item.zxl }}%</div>
</div>
@@ -416,6 +458,7 @@

<script>
import * as echarts from "echarts";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -474,6 +517,16 @@ export default {
activeIndex: localStorage.getItem("activeIndex") || "", // 系统访问来源的下标
};
},
watch: {
ceratelist: {
handler(newVal) {
this.barStatistics(newVal.list)
console.log(newVal.list)
},
immediate: true,
deep: true // 表示开启深度监听
}
},
mounted() {
this.role = localStorage.getItem("orgType");
if (this.role == 3) {
@@ -638,7 +691,132 @@ export default {
};
});
},
barStatistics(e) {
let names = []
e.map(i => {
names.push(i.name)
})
let values = []
e.map(i => {
values.push(i.zxl1)
})
values = values.map((i, k) => {
switch (k) {
case 0:
return {
value: values[0],
itemStyle: {
color: '#E6625B'
}
}
break;
case 1:
return {
value: values[1],
itemStyle: {
color: '#FF981E'
}
}
case 2:
return {
value: values[2],
itemStyle: {
color: '#FFCC00'
}
}

default:
return {
value: values[2],
itemStyle: {
color: '#07B79D'
}
}
break;
}
})
// values[0] = {
// value: values[0],
// itemStyle: {
// color: '#E6625B'
// }
// }
// values[1] = {
// value: values[1],
// itemStyle: {
// color: '#FF981E'
// }
// }
// values[2] = {
// value: values[2],
// itemStyle: {
// color: '#FFCC00'
// }
// }

console.log(names)
console.log(values)


echarts.init(document.getElementById("xxx")).dispose(); // 销毁实例
let chartDom = document.getElementById('xxx');
let myChart = echarts.init(chartDom);
let option;

option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: names,
splitLine: { show: false },
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
label: {
show: true,
position: 'top'
},
data: values,
type: 'bar',
barCategoryGap: '70%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#9837dd' }, //柱图渐变色
{ offset: 1, color: '#e23af5' }, //柱图渐变色
]
)
},
},
}
]
};

option && myChart.setOption(option);

window.addEventListener("resize", () => {
myChart.resize();
});
},
// 格式化时间
formatDate(t) {
if (!t) return;
@@ -878,32 +1056,10 @@ export default {
var option;

option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
legend: {
data: [Strname],
bottom: "10",
top: true,
},
grid: {
left: 10,
@@ -934,6 +1090,16 @@ export default {
data: newline,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1025,29 +1191,7 @@ export default {
let chartDom = document.getElementById("Pinspeak1");
let myChart = echarts.init(chartDom);
let option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "axis",
formatter: "{b0}: {c0}" + "%",
@@ -1113,6 +1257,16 @@ export default {
data: newline,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1130,29 +1284,7 @@ export default {
let chartDom = document.getElementById("Pinspeak2");
let myChart = echarts.init(chartDom);
let option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "axis",
formatter: "{b0}: {c0}" + "%",
@@ -1218,6 +1350,16 @@ export default {
data: newline,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1335,14 +1477,26 @@ export default {
</script>

<style scoped="scoped" lang="scss" >
.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
color: #333333;
}

.box-center {
width: 100%;
padding: 15px;
min-width: 1000px;
padding-bottom: 100px;
}
.tabcard{
/deep/ .el-card__body {

.tabcard {
/deep/ .el-card__body {
padding: 8px;
cursor: pointer;
}
@@ -1425,6 +1579,7 @@ export default {
color: #666 !important;
}
}

.container {
display: grid;
grid-template-columns: repeat(5, 19%);
@@ -1442,14 +1597,35 @@ export default {
font-size: 16px;
color: #2c3542;
margin-top: 20px;
padding-left: 4px;

.jinboxtit {
width: 14%;
width: 12%;
height: 18px;
padding-right: 6px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

display: flex;
align-items: center;

.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
margin-right: 10px;
color: #333333;
}

.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 10px;
}

}

.jinbox-box {
@@ -1618,9 +1794,6 @@ export default {
background: #2671e2;
}

.tophovese {
// color: #2671e2;
}

.app-top {
width: 100%;
@@ -1678,6 +1851,7 @@ export default {
.text1-2 {
color: #333333;
margin-top: 10px;
font-weight: bold;
}
}



+ 84
- 20
src/views/Statistics/TheTeamCompared.vue Прегледај датотеку

@@ -123,11 +123,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{ teamobj1.num || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ teamobj1.avg || 0 }}个</div>
</div>
@@ -137,12 +137,24 @@
style="width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in teamobj1.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}个</div>
</div>
@@ -162,11 +174,11 @@
<div class="text1">接待时长排名</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{ teamobj2.num || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">
{{ Math.floor(teamobj2.avg / 60) || 0 }}分钟
@@ -178,12 +190,25 @@
style="width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in teamobj2.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}分钟</div>
</div>
@@ -222,11 +247,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{ teamobj3.num || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ teamobj3.avg || 0 }}%</div>
</div>
@@ -236,12 +261,25 @@
style="width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in teamobj3.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}%</div>
</div>
@@ -297,11 +335,11 @@
</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">团队总数</div>
<div class="text1-2">{{ teamobj5.num || 0 }}个</div>
</div>
<div class="sanbox1" style="width: 50%">
<div class="sanbox1" style="width: 50%;text-align: center;">
<div class="text1-1">均值</div>
<div class="text1-2">{{ teamobj5.avg || 0 }}次</div>
</div>
@@ -311,12 +349,25 @@
style="width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in teamobj5.list" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div
<!-- <div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
></div> -->
<div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
</div>
<div class="jinboxbott">{{ item.zxl }}次</div>
</div>
@@ -933,6 +984,18 @@ export default {
</script>

<style scoped="scoped" lang="scss" >

.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
color: #333333;
margin-right: 10px;
}
/* 添加table滚动条 */
table {
border-collapse: collapse;
@@ -1085,6 +1148,7 @@ tbody tr {
.text1-2 {
color: #333333;
margin-top: 10px;
font-weight: bold;
}
}



+ 18
- 94
src/views/Statistics/TrendAnalysis.vue Прегледај датотеку

@@ -343,6 +343,8 @@
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";

import color from "../../util/theme.color"
export default {
data() {
return {
@@ -955,32 +957,10 @@ export default {
trigger: "axis",
formatter: "{b0}: {c0}" + "%",
},
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: color.randomColor,
legend: {
data: ["起始时间"],
bottom: "10",
top: "10",
},
grid: {
left: 10,
@@ -1039,6 +1019,16 @@ export default {
data: newline,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: color.randomColor },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
],
};
@@ -1075,32 +1065,10 @@ export default {
return src;
},
},
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: color.colorArr,
legend: {
data: ["起始时间", "对比时间"],
bottom: "10",
top: "10",
},
grid: {
left: 10,
@@ -1181,29 +1149,7 @@ export default {
var myChart = echarts.init(chartDom);
var option;
option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: color.colorArr,
tooltip: {
trigger: "axis",
},
@@ -1256,29 +1202,7 @@ export default {
var myChart = echarts.init(chartDom);
var option;
option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: color.colorArr,
tooltip: {
trigger: "axis",
},


+ 21
- 0
src/views/Statistics/dataScreeAge.vue Прегледај датотеку

@@ -561,6 +561,7 @@

<script>
import * as echarts from "echarts";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -998,6 +999,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},

];
@@ -1081,6 +1092,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
}
];
this.SwitchCARDS(arr, "echar2", timeDate, Strname);


+ 23
- 24
src/views/Statistics/dataScreeOrg.vue Прегледај датотеку

@@ -617,6 +617,7 @@

<script>
import * as echarts from "echarts";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -1053,6 +1054,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},

];
@@ -1133,6 +1144,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
];
this.SwitchCARDS(arr, "echar2", timeDate, Strname);
@@ -1190,35 +1211,13 @@ export default {
var option;

option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "axis",
},
legend: {
data: Strname,
bottom: "10",
top: "10",
},
grid: {
left: 10,


+ 22
- 1
src/views/Statistics/dataScreeSys.vue Прегледај датотеку

@@ -713,6 +713,7 @@
<script>
import * as echarts from "echarts";
import { getStore, setStore } from "@/util/store";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -1174,6 +1175,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},

];
@@ -1263,6 +1274,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
];
this.SwitchCARDS(arr, "echar2", timeDate, Strname);
@@ -1347,7 +1368,7 @@ export default {
},
legend: {
data: Strname,
bottom: "10",
top: "10",
},
grid: {
left: 10,


+ 12
- 1
src/views/Statistics/houseDataSys.vue Прегледај датотеку

@@ -232,6 +232,7 @@
<script>
import * as echarts from "echarts";
import { getStore, setStore } from "@/util/store";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -409,6 +410,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
];
this.SwitchCARDS(arr, "main", timeDate, Strname);
@@ -656,7 +667,7 @@ export default {
},
legend: {
data: Strname,
bottom: "10",
top: "10",
},
grid: {
left: 10,


+ 7
- 23
src/views/Statistics/index.vue Прегледај датотеку

@@ -164,6 +164,8 @@

<script>
import * as echarts from "echarts";

import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -294,32 +296,14 @@ export default {
objoptlis.push({ value: ice.total, name: ice.name });
});
var option = {
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
color: colorTheme.colorArr,
tooltip: {
trigger: "item",
},
legend:{
show:true,
bottom: "0",
},
graphic: [
{
type: "text",


+ 12
- 1
src/views/Statistics/trend.vue Прегледај датотеку

@@ -370,6 +370,7 @@
<script>
import * as echarts from "echarts";
import topLogsVue from "../../page/index/top/top-logs.vue";
import colorTheme from "../../util/theme.color"
export default {
data() {
return {
@@ -521,6 +522,16 @@ export default {
data: arr1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: colorTheme.colorArr[0] },
{ offset: 1, color: "#fff" }
]
),
opacity: 0.1
}
},
];
this.SwitchCARDS(arr, "main", timeDate, Strname);
@@ -751,7 +762,7 @@ export default {
],
legend: {
data: Strname,
bottom: "10",
top: "10",
},
grid: {
left: 10,


+ 48
- 12
src/views/houseData/analyse.vue Прегледај датотеку

@@ -46,7 +46,7 @@
</el-select>
</div>
<!-- 项目 -->
<div style="margin-left: 26px" v-else-if="selValue == 2">
<div style="margin-left: 20px" v-else-if="selValue == 2">
<el-select
v-model="choicValue"
@change="valuechange"
@@ -63,7 +63,7 @@
</el-option>
</el-select>
</div>
<div style="margin-left: 26px" v-else>
<div style="margin-left: 20px" v-else>
<el-select
v-model="choicValue"
@change="valuechange"
@@ -153,12 +153,22 @@
style="min-height: 350px;padding: 0 0 20px 0; width: 94%; margin: 0 auto;"
>
<div class="jinbox" v-for="(item, i) in objList" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>
</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
@@ -218,12 +228,22 @@
style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto"
>
<div class="jinbox" v-for="(item, i) in objList1" :key="i">
<div class="jinboxtit">{{ item.name }}</div>
<!-- <div class="jinboxtit">{{ item.name }}</div> -->
<span class="sequenceNum" :style="{
'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
}">{{ i + 1 }}</span>
<div class="jinboxtit">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
<span class="name">{{ item.name }}</span>
</el-tooltip>
<!-- <span class="name">{{ item.name }}</span> -->
</div>
<div class="jinbox-box">
<div
class="boxbaifenbi"
:style="'width:' + item.zxl1 + '%;'"
></div>
<div class="boxbaifenbi"
:style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
</div>
</div>
<div class="jinboxbott">{{ item.zxl }}</div>
</div>
@@ -1038,6 +1058,16 @@ export default {
</script>

<style lang="scss" scoped >
.sequenceNum {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: #E5F0FF;
border-radius: 15px;
color: #333333;
}
.box-center {
width: 100%;
padding: 15px;
@@ -1223,6 +1253,12 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 10px;
}
}
.jinbox-box {
width: 75%;


+ 2
- 2
vue.config.js Прегледај датотеку

@@ -11,8 +11,8 @@
// const url = 'http://81.70.55.170:9999' // 新测试服务器IP
// const url = 'http://192.168.31.89:9999' //sh
// const url = 'https://zanyong.hfju.com' // 正式域名
// const url = 'http://81.70.55.170:9999' // 新测试
const url = 'http://82.156.35.22:9999' // 新正式ip
const url = 'http://81.70.55.170:9999' // 新测试
// const url = 'http://82.156.35.22:9999' // 新正式ip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {


Write Preview
Loading…
Откажи
Сачувај