+
@@ -220,9 +271,64 @@ export default {
name: "index",
data() {
return {
- index:null,
+ hallList: [
+ {
+ font: "平均办理时长",
+ time: "49分钟33秒",
+ },
+ {
+ font: "平均等待时长",
+ time: "05分钟33秒",
+ },
+ ],
+ hallTitle: ["平均办理时长", "平均等待时长"],
+ hallLineList: ["人员", "趋势", "排序", "排名"],
+ flowList: [
+ {
+ text: "峰值",
+ value: "115人次",
+ },
+ {
+ text: "谷值",
+ value: "1人次",
+ },
+ {
+ text: "均值",
+ value: "26人次",
+ },
+ ],
+ flowChartList: [
+ {
+ name: "峰值",
+ data: [8, 12, 11, 12],
+ },
+ {
+ name: "谷值",
+ data: [20, 24, 22, 24],
+ },
+ {
+ name: "均值",
+ data: [32, 36, 33, 36],
+ },
+ ],
+ statList: [
+ {
+ name: "设备数(台)",
+ num: 63,
+ },
+ {
+ name: "员工(人)",
+ num: 23,
+ },
+ {
+ name: "电子工牌(个)",
+ num: 63,
+ },
+ ],
+
+ index: null,
payOneShow: true, //缴费图表切换
- businessShow:true, //业务图表切换
+ businessShow: true, //业务图表切换
typeActive: 0, //缴费类型选择
serviceTypeActive: 0, //缴费类型选择
paymentList: [
@@ -278,8 +384,8 @@ export default {
count: "0",
},
], //服务列表
- serviceTypeList:[
- {
+ serviceTypeList: [
+ {
name: "人员",
},
{
@@ -291,33 +397,274 @@ export default {
{
name: "排名",
},
- ]
+ ],
};
},
mounted() {
this.rightOneXian();
this.serviceTwo();
- this.rightBusinessTwo()
+ this.rightBusinessTwo();
+
+ this.drawHallChart();
+ this.drawFlowChart();
},
methods: {
+ drawHallChart() {
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
+ if (myChart == null) {
+ myChart = this.$echarts.init(this.$refs.hallChart);
+ }
+ let option = {
+ grid: {
+ top: "20%",
+ left: "8%",
+ right: "2%",
+ bottom: "15%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#20668d",
+ },
+ },
+ splitArea: {
+ // show: true,
+ color: "#f00",
+ lineStyle: {
+ color: "#f00",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ textStyle: {
+ color: "#fff",
+ },
+ // margin: 10,
+ },
+ // 两边留白
+ boundaryGap: true,
+ data: ["周欢", "唐颖", "刘梦颖"],
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "分钟",
+ nameTextStyle: {
+ fontSize: 11,
+ color: "#d8d4d7",
+ padding: [10, 35, 0, 0],
+ },
+
+ // min: 0,
+ // max: 140,
+ splitNumber: 4,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(86,183,232,0.2)",
+ type: "dashed",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ // margin: 20,
+ textStyle: {
+ color: "#d8d4d7",
+ },
+ formatter: "{value}",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "销售费用",
+ type: "line",
+ Symbol: "circle",
+ symbolSize: 7,
+ // showAllSymbol: true,
+ data: [30.13, 86.25, 29.45],
+ itemStyle: {
+ normal: {
+ color: "#f4e127",
+ lineStyle: {
+ color: "#f4e127",
+ },
+ label: {
+ show: true, //开启显示
+ color: "#d8d4d7",
+ position: "top", //在上方显示
+ formatter: function (res) {},
+ },
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ },
+ drawFlowChart() {
+ let myChart = this.$echarts.getInstanceByDom(this.$refs.flowChart);
+ if (myChart == null) {
+ myChart = this.$echarts.init(this.$refs.flowChart);
+ }
+ var color = ["#2270b9", "#3bbabc", "#4ab135"];
+ let option = {
+ grid: {
+ top: "20%",
+ left: "8%",
+ right: "2%",
+ bottom: "15%",
+ },
+ legend: {
+ data: this.flowList.map((ele) => {
+ return ele.text;
+ }),
+ // icon: 'circle',
+
+ // symbolSize:4,
+ textStyle: {
+ align: "right",
+ color: "#fff",
+ },
+ top: "-2%",
+ right: "2%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#20668d",
+ },
+ },
+ splitArea: {
+ // show: true,
+ color: "#f00",
+ lineStyle: {
+ color: "#f00",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ textStyle: {
+ color: "#fff",
+ },
+ // margin: 10,
+ },
+ // 两边留白
+ boundaryGap: true,
+ data: ["20230127", "20230128", "20230129", "20230130"],
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "分钟",
+ nameTextStyle: {
+ fontSize: 11,
+ color: "#d8d4d7",
+ padding: [10, 35, 0, 0],
+ },
+
+ // min: 0,
+ // max: 140,
+ splitNumber: 4,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(86,183,232,0.2)",
+ type: "dashed",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ // margin: 20,
+ textStyle: {
+ color: "#d8d4d7",
+ },
+ formatter: "{value}",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: this.flowChartList.map((ele, index) => {
+ return {
+ name: ele.name,
+ type: "line",
+ Symbol: "circle",
+ symbolSize: 7,
+ // showAllSymbol: true,
+ data: ele.data,
+ itemStyle: {
+ normal: {
+ color: color[index],
+ lineStyle: {
+ color: color[index],
+ },
+ label: {
+ show: true, //开启显示
+ color: "#d8d4d7",
+ position: "top", //在上方显示
+ formatter: function (res) {},
+ },
+ },
+ },
+ };
+ }),
+ };
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ },
+
//缴费图表切换
- handelXian(){
- this.payOneShow = true
+ handelXian() {
+ this.payOneShow = true;
},
- handelBing(){
- this.payOneShow = false
- this.$nextTick(()=>{
- this.rightOneBing()
- })
+ handelBing() {
+ this.payOneShow = false;
+ this.$nextTick(() => {
+ this.rightOneBing();
+ });
},
- businessXian(){
- this.businessShow = true
+ businessXian() {
+ this.businessShow = true;
},
- businessBing(){
- this.businessShow = false
- this.$nextTick(()=>{
+ businessBing() {
+ this.businessShow = false;
+ this.$nextTick(() => {
this.rightBusinessOne();
- })
+ });
},
//缴费线性表
rightOneXian() {
@@ -526,8 +873,8 @@ export default {
myChart.setOption(option);
},
//缴费表饼状
- rightOneBing(){
- function getValue(value, arr, params = "params", key = "key") {
+ rightOneBing() {
+ function getValue(value, arr, params = "params", key = "key") {
const option = arr.find((r) => r[key] === value) || {};
return option[params];
}
@@ -551,9 +898,7 @@ export default {
unit: "笔",
},
];
- var myChart = this.$echarts.init(
- document.getElementById("rightOneBing")
- );
+ var myChart = this.$echarts.init(document.getElementById("rightOneBing"));
var option = {
title: [
{
@@ -888,8 +1233,10 @@ export default {
myChart.setOption(option);
},
//业务线性
- rightBusinessTwo(){
- var myChart = this.$echarts.init(document.getElementById("rightBusinessTwo"));
+ rightBusinessTwo() {
+ var myChart = this.$echarts.init(
+ document.getElementById("rightBusinessTwo")
+ );
var option = {
legend: {
data: ["笔数", "金额"],
@@ -1094,11 +1441,11 @@ export default {
myChart.setOption(option);
},
//服务清框
- serviceTwo(){
- var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
- var option = {
+ serviceTwo() {
+ var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
+ var option = {
legend: {
- show:false,
+ show: false,
data: ["金额"],
textStyle: {
align: "right",
@@ -1166,7 +1513,7 @@ export default {
},
],
yAxis: [
- {
+ {
type: "value",
// min: 1000,
// splitNumber: 6,
@@ -1234,12 +1581,12 @@ export default {
},
],
};
- myChart.setOption(option);
+ myChart.setOption(option);
},
//服务选择
- serviceType(index){
+ serviceType(index) {
this.serviceTypeActive = index;
- }
+ },
},
};
@@ -1250,88 +1597,343 @@ export default {
height: 100%;
position: relative;
display: flex;
- justify-content: space-around
+ justify-content: space-around;
}
-
.left-content,
.right-content {
- position: absolute;
- width: 20.6%;
- top: 0;
- height: 100%;
- /* background-color: aqua; */
+ position: absolute;
+ width: 20.6%;
+ top: 0;
+ height: 100%;
+ /* background-color: aqua; */
}
.middle-content{
- width: calc(100% - 41.2%);
- position: relative;
- top: 0;
- height: 100%;
- border: 1px solid red;
+ position: absolute;
+ width: calc(100% - 41.2%);
+ top: 0;
+ height: 100%;
+ border: 1px solid red;
+ position: relative;
+ .middleBottom{
+
+ }
}
/* 内容板块背景 */
-.left-content > div,
-.right-content > div {
- background-image: url(../assets/images/border.png);
- background-size: 100% 100%;
- margin-bottom: 5px;
- padding: 13px;
- box-sizing: border-box;
- .hall-box {
- width: 100%;
- height: 18.6%;
- display: flex;
- justify-content: space-between;
- }
- .hall-box .item {
- width: 45%;
- height: 100%;
- // background-color: aqua;
- background-image: url(../assets/images/hall-box.png);
- .font {
- font-size: 12px;
- color: #a5a5af;
+.left-content>div,
+.right-content>div {
+ background-image: url(../assets/images/border.png);
+ background-size: 100% 100%;
+ margin-bottom: 5px;
+ padding: 13px;
+ box-sizing: border-box;
+
+ .hall-box {
+ width: 100%;
+ height: 18.6%;
+ display: flex;
+ margin-bottom: 10px;
+ justify-content: space-between;
}
- .hall-time {
- font-family: "maleGod";
- font-size: 21px;
+
+ .hall-chart {
+ width: 100%;
+ height: 47%;
+ }
+
+ .hall-line {
+ .hall-title {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+
+ .span0,
+ .span1 {
+ position: relative;
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .hall-icon span {
+ background-size: 100% 100%;
+
+ display: inline-block;
+ }
+
+ .hall-icon span:nth-child(1) {
+ background-image: url(../assets/images/line-icon.png);
+ width: 17px;
+ height: 14px;
+ }
+
+ .hall-icon span:nth-child(2) {
+ background-image: url(../assets/images/pie-icon.png);
+ width: 16px;
+ height: 16px;
+ margin-left: 7px;
+ }
+
+
+ }
+
+ }
+
+ .chart-title {
+ margin-bottom: 6px;
+ }
+
+ .chart-title span {
+ font-size: 12px;
+ color: #fff;
+ margin-left: 18px;
+ }
+
+ .chart-title span:nth-child(1) {
+ margin-left: 0;
+ color: #1e96d5;
+ border-bottom: 1px solid #1e96d5;
+ // text-decoration: underline;
+ }
+
+ .hall-line span::before {
+ content: attr(text);
+ position: absolute;
+ z-index: 10;
+ bottom: 0;
+ color: rgb(163, 227, 245);
+ -webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
+ }
+
+
+ .hall-box .item {
+ width: 48.5%;
+ height: 100%;
+ // background-color: aqua;
+ background-image: url(../assets/images/hall-box.png);
+ padding: 8px 10px 8px;
+ box-sizing: border-box;
+ position: relative;
+
+ .font {
+ font-size: 12px;
+ color: #a5a5af;
+ margin-bottom: 3px;
+ }
+
+ .hall-time1,
+ .hall-time0 {
+ font-family: 'maleGod';
+ font-size: 25px;
+ text-align: center;
+ position: absolute;
+ bottom: 5px;
+ width: calc(100% - 16px);
+ }
+
+ .hall-time1 {
+ color: #dfcc4d !important;
+ }
+
+ .hall-time0 {
+ color: #4bbfde;
+ }
}
- }
}
/* 标题的样式 */
-.left-content > div > .title,
-.right-content > div > .title {
- width: 100%;
- background-image: url(../assets/images/border-title.png);
- height: 30px;
- background-size: 100% 100%;
- display: flex;
- padding-left: 8%;
- box-sizing: border-box;
- color: #fff;
- font-family: "maleGod";
- align-items: center;
- letter-spacing: 1px;
+.left-content>div>.title,
+.right-content>div>.title {
+ width: 100%;
+ background-image: url(../assets/images/border-title.png);
+ height: 30px;
+ background-size: 100% 100%;
+ display: flex;
+ padding-left: 8%;
+ box-sizing: border-box;
+ color: #fff;
+ font-family: 'maleGod';
+ align-items: center;
+ letter-spacing: 1px;
+ margin-bottom: 10px;
}
+
.titleText:before {
- content: attr(text);
- position: absolute;
- z-index: 10;
- color: rgb(163, 227, 245);
- -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
+ content: attr(text);
+ position: absolute;
+ z-index: 10;
+ color: rgb(163, 227, 245);
+ -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
}
+
.left-content .business-hall {
- height: 38.2%;
+ height: 38.2%;
+
}
.left-content .passenger-flow {
- height: 39.7%;
+ height: 39.7%;
+
+ // 客流量图表
+ .flow-chart {
+ width: 100%;
+ height: 50%;
+ }
+
+ .flow-box {
+ height: 25%;
+ width: 100%;
+ background-image: url(../assets/images/flow-box.png);
+ background-size: 100% 100%;
+ padding: 8px 15px 8px;
+ box-sizing: border-box;
+ display: flex;
+ margin-bottom: 10px;
+
+ .flow-left {
+ width: 44%;
+ text-align: center;
+
+ .flow-total {
+ color: #c0c0c4;
+ font-size: 13px;
+ text-align: left;
+ }
+
+ .flow-value {
+ display: inline-block;
+ margin-top: 10px;
+ font-family: maleGod;
+ font-size: 25px;
+ color: #4bbfde;
+ }
+
+
+ }
+
+
+
+ .flow-right {
+ width: 56%;
+ height: 100%;
+ margin-bottom: 10px;
+
+ ul {
+ height: 100%;
+ }
+
+ .flow-item {
+ justify-content: space-between;
+ display: flex;
+ }
+
+ .up0 {
+ color: #36904c;
+ margin-top: 0 !important;
+ }
+
+ .up1 {
+ color: #3bbabc;
+ }
+
+ .up2 {
+ color: #1d62a3;
+ }
+
+ .flow-item span:nth-child(1) {
+ font-family: maleGod;
+ font-size: 20px;
+ // margin-top: 3px;
+ i{
+ width: 9px;
+ height: 8px;
+ background-size: 100% 100%;
+ display: inline-block;
+ margin-right: 5px;
+ }
+ .rect0{
+ background-image: url(../assets/images/rect-icon1.png);
+ }
+ .rect1{
+ background-image: url(../assets/images/rect-icon2.png);
+ }
+ .rect2{
+ background-image: url(../assets/images/rect-icon2.png);
+ }
+ }
+
+ .flow-item {
+ height: 33%;
+ }
+
+ .flow-item span {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+
+ }
+
+ .flow-item span:nth-child(2) {
+ font-size: 13px;
+ color: #c0c0c4;
+ }
+ }
+
+ }
}
.left-content .hall-statistics {
- height: 20.4%;
+ height: 20.4%;
+
+ .stat {
+ width: 100%;
+ display: flex;
+
+ .stat-item {
+ width: 33%;
+ .img2{
+ background-image: url(../assets/images/people-icon.png)
+ }
+ .img1{
+ background-image:url(../assets/images/paizi.png)
+ }
+ // display: flex;
+ section {
+ width: 83px;
+ height: 76px;
+ margin: 0 auto;
+ background-image: url(../assets/images/stat-icon.png);
+ background-size: 100% 100%;
+ }
+
+ p {
+ text-align: center;
+ color: #fff;
+ }
+
+ .stat-num {
+ font-family: 'maleGod';
+ color: #4bbfde !important;
+ font-size: 20px;
+
+ }
+ }
+
+ }
}
+@media screen and (min-height:980px) {
+ .stat-num {
+ font-size: 20px;
+ font-family: 'maleGod';
+ // display: inline-block;
+ margin: 4px ;
+ position: relative;
+ // top: 4px;
+ }
+}
+
+
.right-content .payment {
height: 38.3%;
.paymentContent {
@@ -1377,7 +1979,7 @@ export default {
width: 100%;
height: calc(100% - 41%);
}
- #rightOneBing{
+ #rightOneBing {
width: 100%;
height: calc(100% - 41%);
}
@@ -1447,7 +2049,7 @@ export default {
width: 100%;
height: 100%;
}
- #rightBusinessTwo{
+ #rightBusinessTwo {
width: 100%;
height: 100%;
}
@@ -1485,7 +2087,7 @@ export default {
height: calc(100% - 31%);
width: 100%;
}
- .selectType {
+ .selectType {
position: absolute;
width: 48%;
height: 12%;