2117 lines
54 KiB
Vue
2117 lines
54 KiB
Vue
<template>
|
||
<div class="content">
|
||
<!-- 左边的内容 -->
|
||
<div class="left-content">
|
||
<!-- 营业临厅时长 -->
|
||
<div class="business-hall">
|
||
<div class="title">
|
||
<!-- 45.4% -->
|
||
<p class="titleText" text="营业厅时长" style="font-family: maleGod">
|
||
营业厅时长
|
||
</p>
|
||
</div>
|
||
<!-- 两个小版块 -->
|
||
<div class="hall-box">
|
||
<div class="item" v-for="(item, i) in hallList" :key="i">
|
||
<p class="font">{{ item.font }}</p>
|
||
<p :class="'hall-time' + i">{{ item.time }}</p>
|
||
</div>
|
||
</div>
|
||
<!-- 图表内容样式 -->
|
||
<div class="hall-line">
|
||
<div class="hall-title">
|
||
<div>
|
||
<span
|
||
style="font-family: 'maleGod'"
|
||
:text="s"
|
||
v-for="(s, i) in hallTitle"
|
||
:class="'span' + i"
|
||
>
|
||
{{ s }}
|
||
</span>
|
||
</div>
|
||
<div class="hall-icon">
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-title">
|
||
<span v-for="(s, i) in hallLineList">
|
||
{{ s }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- 图表样式 -->
|
||
<div class="hall-chart" ref="hallChart"></div>
|
||
</div>
|
||
<!-- 客流量 -->
|
||
<div class="passenger-flow">
|
||
<div class="title">
|
||
<p class="titleText" text="客流量" style="font-family: maleGod">
|
||
客流量
|
||
</p>
|
||
</div>
|
||
<!-- 客流量板块内容 -->
|
||
<div class="flow-box">
|
||
<div class="flow-left">
|
||
<p class="flow-total">总客流量</p>
|
||
<span class="flow-value">6587次</span>
|
||
</div>
|
||
<div class="flow-right">
|
||
<ul>
|
||
<li class="flow-item" v-for="(val, i) in flowList">
|
||
<span :class="'up' + i"
|
||
><i :class="'rect' + i"></i>{{ val.value }}</span
|
||
>
|
||
<span>{{ val.text }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 图表切换 -->
|
||
<div class="chart-title">
|
||
<span v-for="(s, i) in hallLineList">
|
||
{{ s }}
|
||
</span>
|
||
</div>
|
||
<div class="flow-chart" ref="flowChart"></div>
|
||
</div>
|
||
<!-- 厅内统计 -->
|
||
<div class="hall-statistics">
|
||
<div class="title">
|
||
<p class="titleText" text="厅内统计" style="font-family: maleGod">
|
||
厅内统计
|
||
</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div v-for="(o, i) in statList" :key="i" class="stat-item">
|
||
<section :class="'img' + i"></section>
|
||
<p>{{ o.name }}</p>
|
||
<p class="stat-num">{{ o.num }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右边的内容 -->
|
||
<div class="right-content">
|
||
<!-- 缴费情况 -->
|
||
<div class="payment">
|
||
<div class="title">
|
||
<p class="titleText" text="缴费情况" style="font-family: 'maleGod'">
|
||
缴费情况
|
||
</p>
|
||
</div>
|
||
<div class="paymentContent">
|
||
<div
|
||
class="paymentList"
|
||
v-for="(item, index) in paymentList"
|
||
:key="index"
|
||
>
|
||
<div class="listOne">
|
||
<img
|
||
src="../assets/images/paymentYuan.png"
|
||
style="width: 18px; height: 18px"
|
||
/>
|
||
<div
|
||
style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
|
||
>
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
<div class="listTwo">
|
||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||
<div
|
||
:style="{ color: item.color }"
|
||
style="font-family: 'maleGod'"
|
||
>
|
||
{{ item.per }}
|
||
</div>
|
||
<img :src="item.icon" />
|
||
</div>
|
||
</div>
|
||
<div class="twoTitle">
|
||
<p
|
||
class="titleText"
|
||
text="缴费情况分布"
|
||
style="font-family: 'maleGod'"
|
||
>
|
||
缴费情况分布
|
||
</p>
|
||
<div class="titleIcon">
|
||
<img
|
||
src="../assets/images/xianxing.png"
|
||
style="width: 17px; height: 14px"
|
||
@click="handelXian"
|
||
/>
|
||
<img
|
||
src="../assets/images/bingzhuang.png"
|
||
style="width: 16px; height: 16px"
|
||
@click="handelBing"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div id="rightOneXian" v-show="payOneShow"></div>
|
||
<div id="rightOneBing" v-show="!payOneShow"></div>
|
||
<div class="selectType">
|
||
<div
|
||
v-for="(item, index) in paymentTypeList"
|
||
:key="index"
|
||
class="typeName"
|
||
:class="{ typeNameAction: typeActive == index }"
|
||
@click="paymentType(index)"
|
||
>
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 业务受理 -->
|
||
<div class="business-acceptance">
|
||
<div class="title">
|
||
<p class="titleText" text="业务受理" style="font-family: 'maleGod'">
|
||
业务受理
|
||
</p>
|
||
<div class="titleIcon">
|
||
<img
|
||
src="../assets/images/xianxing.png"
|
||
style="width: 17px; height: 14px"
|
||
@click="businessXian"
|
||
/>
|
||
<img
|
||
src="../assets/images/bingzhuang.png"
|
||
style="width: 16px; height: 16px"
|
||
@click="businessBing"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="businessContent">
|
||
<div
|
||
class="businessList"
|
||
v-for="(item, index) in businessList"
|
||
:key="index"
|
||
>
|
||
<div class="listOne">
|
||
<img
|
||
src="../assets/images/paymentYuan.png"
|
||
style="width: 18px; height: 18px"
|
||
/>
|
||
<div
|
||
style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
|
||
>
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
<div class="listTwo">
|
||
<div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
|
||
<div
|
||
:style="{ color: item.color }"
|
||
style="font-family: 'maleGod'"
|
||
>
|
||
{{ item.per }}
|
||
</div>
|
||
<img :src="item.icon" />
|
||
</div>
|
||
</div>
|
||
<div class="businessChart">
|
||
<div id="rightBusinessOne" v-show="!businessShow"></div>
|
||
<div id="rightBusinessTwo" v-show="businessShow"></div>
|
||
<!-- <div class="rightBusinessOneList"></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 服务情况 -->
|
||
<div class="service">
|
||
<div class="title">
|
||
<p class="titleText" text="服务情况" style="font-family: 'maleGod'">
|
||
服务情况
|
||
</p>
|
||
</div>
|
||
<div class="serviceContent">
|
||
<div class="serviceOne">
|
||
<div
|
||
v-for="(item, idnex) in serviceList"
|
||
:key="index"
|
||
class="serviceList"
|
||
>
|
||
<div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
|
||
<div
|
||
style="
|
||
color: rgb(75, 190, 221);
|
||
font-family: 'maleGod';
|
||
font-size: 25px;
|
||
"
|
||
>
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="serviceTwo"></div>
|
||
<div class="selectType">
|
||
<div
|
||
v-for="(item, index) in serviceTypeList"
|
||
:key="index"
|
||
class="typeName"
|
||
:class="{ serveiceAction: serviceTypeActive == index }"
|
||
@click="serviceType(index)"
|
||
>
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle-content">
|
||
<div class="middleBottom"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
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, //业务图表切换
|
||
typeActive: 0, //缴费类型选择
|
||
serviceTypeActive: 0, //缴费类型选择
|
||
paymentList: [
|
||
{
|
||
count: "9786笔",
|
||
name: "环比",
|
||
per: "88.33%",
|
||
color: "rgb(29,150,213)",
|
||
icon: require("@/assets/images/jiantou.png"),
|
||
},
|
||
{
|
||
count: "144.53万元",
|
||
name: "环比",
|
||
per: "86.24%",
|
||
color: "rgb(244,214,45)",
|
||
icon: require("@/assets/images/jiantou.png"),
|
||
},
|
||
], //缴费值
|
||
paymentTypeList: [
|
||
{
|
||
name: "人员",
|
||
},
|
||
{
|
||
name: "趋势",
|
||
},
|
||
{
|
||
name: "排序",
|
||
},
|
||
{
|
||
name: "排名",
|
||
},
|
||
], //图筛选类型
|
||
businessList: [
|
||
{
|
||
count: "3430笔",
|
||
name: "环比",
|
||
per: "92.33%",
|
||
color: "rgb(29,150,213)",
|
||
icon: require("@/assets/images/jiantou.png"),
|
||
},
|
||
], //业务值
|
||
serviceList: [
|
||
{
|
||
name: "服务不规范事件",
|
||
count: "4",
|
||
},
|
||
{
|
||
name: "意见工单数",
|
||
count: "0",
|
||
},
|
||
{
|
||
name: "投诉工单数",
|
||
count: "0",
|
||
},
|
||
], //服务列表
|
||
serviceTypeList: [
|
||
{
|
||
name: "人员",
|
||
},
|
||
{
|
||
name: "趋势",
|
||
},
|
||
{
|
||
name: "排序",
|
||
},
|
||
{
|
||
name: "排名",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.rightOneXian();
|
||
this.serviceTwo();
|
||
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;
|
||
},
|
||
handelBing() {
|
||
this.payOneShow = false;
|
||
this.$nextTick(() => {
|
||
this.rightOneBing();
|
||
});
|
||
},
|
||
businessXian() {
|
||
this.businessShow = true;
|
||
},
|
||
businessBing() {
|
||
this.businessShow = false;
|
||
this.$nextTick(() => {
|
||
this.rightBusinessOne();
|
||
});
|
||
},
|
||
//缴费线性表
|
||
rightOneXian() {
|
||
var myChart = this.$echarts.init(document.getElementById("rightOneXian"));
|
||
var option = {
|
||
legend: {
|
||
data: ["笔数", "金额"],
|
||
textStyle: {
|
||
align: "right",
|
||
color: "#fff",
|
||
},
|
||
// top: "2%",
|
||
right: "1%",
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
backgroundColor: "rgba(255,255,255)",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#A7D6FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#A7D6FF",
|
||
},
|
||
],
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "9%",
|
||
right: "8%",
|
||
bottom: "18%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["周欢", "唐颖", "刘梦颖"],
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴轴线
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。
|
||
show: true,
|
||
inside: false,
|
||
lineStyle: {
|
||
color: "rgb(86,183,232)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// min: 1000,
|
||
splitNumber: 6,
|
||
splitLine: { show: true },
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置。
|
||
show: true,
|
||
textStyle: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(86,183,232,0.2)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
show: true,
|
||
},
|
||
{
|
||
type: "value",
|
||
nameTextStyle: {
|
||
color: "#666666",
|
||
},
|
||
position: "right",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#cdd5e2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
// axisLabel: {
|
||
// show: true,
|
||
// formatter: "{value} %", //右侧Y轴文字显示
|
||
// textStyle: {
|
||
// color: "#666666",
|
||
// fontSize: 14,
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "笔数",
|
||
type: "bar",
|
||
barMaxWidth: 20,
|
||
zlevel: 10,
|
||
// barGap: '100%',
|
||
data: [5, 10, 15, 20, 25],
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: "rgb(29,79,117)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgb(59,93,122)",
|
||
},
|
||
],
|
||
},
|
||
// barBorderRadius: [30, 30, 0, 0],
|
||
borderColor: "rgb(86,183,232)",
|
||
label: {
|
||
show: false, //开启显示
|
||
position: "top", //在上方显示
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#3b6ebf",
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "金额",
|
||
type: "line",
|
||
zlevel: 11,
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: true, //平滑曲线显示
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#ffa43a",
|
||
borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
|
||
borderWidth: 7,
|
||
label: {
|
||
show: false, //开启显示
|
||
position: "top", //在上方显示
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#915c1e",
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
},
|
||
formatter: function (res) {
|
||
if (res.value) {
|
||
return res.value + "%";
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "#ffa43a",
|
||
},
|
||
data: [10, 23, 20],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//缴费表饼状
|
||
rightOneBing() {
|
||
function getValue(value, arr, params = "params", key = "key") {
|
||
const option = arr.find((r) => r[key] === value) || {};
|
||
return option[params];
|
||
}
|
||
let dataArr = [
|
||
{
|
||
value: 25,
|
||
name: "周欢",
|
||
color: "#4FACFE",
|
||
unit: "笔",
|
||
},
|
||
{
|
||
value: 20,
|
||
name: "唐颖",
|
||
color: "#0380FF",
|
||
unit: "笔",
|
||
},
|
||
{
|
||
value: 15,
|
||
name: "刘梦颖",
|
||
color: "#FEDC45",
|
||
unit: "笔",
|
||
},
|
||
];
|
||
var myChart = this.$echarts.init(document.getElementById("rightOneBing"));
|
||
var option = {
|
||
title: [
|
||
{
|
||
text: "42",
|
||
x: 55,
|
||
y: 55,
|
||
// top: '50%',
|
||
textStyle: {
|
||
color: "rgb(75,191,222)",
|
||
fontSize: 30,
|
||
fontWeight: "200",
|
||
},
|
||
},
|
||
{
|
||
text: "笔",
|
||
x: 92,
|
||
y: 60,
|
||
// top: '50%',
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontWeight: "100",
|
||
},
|
||
},
|
||
{
|
||
text: "总发起",
|
||
x: 55,
|
||
y: 88,
|
||
textStyle: {
|
||
color: "#fff",
|
||
foontWeight: "100",
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
icon: "circle",
|
||
right: "right",
|
||
top: 30,
|
||
itemGap: 20,
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
orient: "vertical",
|
||
// textStyle: { fontSize: 14, color: "auto" },
|
||
formatter: (name) => {
|
||
return (
|
||
"{name|" +
|
||
name +
|
||
"} {value|" +
|
||
getValue(name, dataArr, "value", "name") +
|
||
"} {unit|" +
|
||
getValue(name, dataArr, "unit", "name") +
|
||
"}"
|
||
);
|
||
},
|
||
textStyle: {
|
||
borderColor: "rgb(43,87,111)",
|
||
borderWidth: 1,
|
||
padding: 5,
|
||
rich: {
|
||
name: {
|
||
fontSize: 16,
|
||
fontWeight: 400,
|
||
verticalAlign: "top",
|
||
align: "center",
|
||
lineHeight: 14,
|
||
color: "#fff",
|
||
},
|
||
value: {
|
||
fontSize: 16,
|
||
fontWeight: 400,
|
||
align: "center",
|
||
lineHeight: 14,
|
||
color: "rgb(84,112,198)",
|
||
width: 50,
|
||
},
|
||
unit: {
|
||
fontSize: 15,
|
||
lineHeight: 14,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{b}: {c}",
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["70%", "80%"],
|
||
center: ["23%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
itemStyle: {
|
||
// 图形样式
|
||
normal: {
|
||
borderColor: "rgb(8,18,47)",
|
||
borderWidth: 2,
|
||
borderRadius: 20,
|
||
},
|
||
},
|
||
data: dataArr,
|
||
},
|
||
{
|
||
type: "gauge",
|
||
splitNumber: 60,
|
||
radius: "85%",
|
||
center: ["23%", "50%"],
|
||
startAngle: 90,
|
||
endAngle: -270,
|
||
pointer: {
|
||
show: 0,
|
||
},
|
||
anchor: {
|
||
show: 0,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: [
|
||
[0, "#3178BD"],
|
||
[1, "#3178BD"],
|
||
],
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: 6,
|
||
lineStyle: {
|
||
color: "auto",
|
||
width: 1,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//缴费类型选择
|
||
paymentType(index) {
|
||
this.typeActive = index;
|
||
},
|
||
//业务环形表
|
||
rightBusinessOne() {
|
||
function getValue(value, arr, params = "params", key = "key") {
|
||
const option = arr.find((r) => r[key] === value) || {};
|
||
return option[params];
|
||
}
|
||
let dataArr = [
|
||
{
|
||
value: 25,
|
||
name: "2.0受理",
|
||
color: "#4FACFE",
|
||
unit: "笔",
|
||
},
|
||
{
|
||
value: 20,
|
||
name: "网上国网app版",
|
||
color: "#0380FF",
|
||
unit: "笔",
|
||
},
|
||
{
|
||
value: 15,
|
||
name: "网上国网pc版",
|
||
color: "#FEDC45",
|
||
unit: "笔",
|
||
},
|
||
];
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById("rightBusinessOne")
|
||
);
|
||
var option = {
|
||
title: [
|
||
{
|
||
text: "42",
|
||
x: 55,
|
||
y: 55,
|
||
// top: '50%',
|
||
textStyle: {
|
||
color: "rgb(75,191,222)",
|
||
fontSize: 30,
|
||
fontWeight: "200",
|
||
},
|
||
},
|
||
{
|
||
text: "笔",
|
||
x: 92,
|
||
y: 60,
|
||
// top: '50%',
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontWeight: "100",
|
||
},
|
||
},
|
||
{
|
||
text: "总发起",
|
||
x: 55,
|
||
y: 88,
|
||
textStyle: {
|
||
color: "#fff",
|
||
foontWeight: "100",
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
icon: "circle",
|
||
right: "right",
|
||
top: 30,
|
||
itemGap: 20,
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
orient: "vertical",
|
||
// textStyle: { fontSize: 14, color: "auto" },
|
||
formatter: (name) => {
|
||
return (
|
||
"{name|" +
|
||
name +
|
||
"} {value|" +
|
||
getValue(name, dataArr, "value", "name") +
|
||
"} {unit|" +
|
||
getValue(name, dataArr, "unit", "name") +
|
||
"}"
|
||
);
|
||
},
|
||
textStyle: {
|
||
borderColor: "rgb(43,87,111)",
|
||
borderWidth: 1,
|
||
padding: 5,
|
||
rich: {
|
||
name: {
|
||
fontSize: 16,
|
||
fontWeight: 400,
|
||
verticalAlign: "top",
|
||
align: "center",
|
||
lineHeight: 14,
|
||
color: "#fff",
|
||
},
|
||
value: {
|
||
fontSize: 16,
|
||
fontWeight: 400,
|
||
align: "center",
|
||
lineHeight: 14,
|
||
color: "rgb(84,112,198)",
|
||
width: 50,
|
||
},
|
||
unit: {
|
||
fontSize: 15,
|
||
lineHeight: 14,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{b}: {c}",
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["70%", "80%"],
|
||
center: ["23%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
itemStyle: {
|
||
// 图形样式
|
||
normal: {
|
||
borderColor: "rgb(8,18,47)",
|
||
borderWidth: 2,
|
||
borderRadius: 20,
|
||
},
|
||
},
|
||
data: dataArr,
|
||
},
|
||
{
|
||
type: "gauge",
|
||
splitNumber: 60,
|
||
radius: "85%",
|
||
center: ["23%", "50%"],
|
||
startAngle: 90,
|
||
endAngle: -270,
|
||
pointer: {
|
||
show: 0,
|
||
},
|
||
anchor: {
|
||
show: 0,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: [
|
||
[0, "#3178BD"],
|
||
[1, "#3178BD"],
|
||
],
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: 6,
|
||
lineStyle: {
|
||
color: "auto",
|
||
width: 1,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//业务线性
|
||
rightBusinessTwo() {
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById("rightBusinessTwo")
|
||
);
|
||
var option = {
|
||
legend: {
|
||
data: ["笔数", "金额"],
|
||
textStyle: {
|
||
align: "right",
|
||
color: "#fff",
|
||
},
|
||
// top: "2%",
|
||
right: "1%",
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
backgroundColor: "rgba(255,255,255)",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#A7D6FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#A7D6FF",
|
||
},
|
||
],
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "9%",
|
||
right: "8%",
|
||
bottom: "18%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["周欢", "唐颖", "刘梦颖"],
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴轴线
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。
|
||
show: true,
|
||
inside: false,
|
||
lineStyle: {
|
||
color: "rgb(86,183,232)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// min: 1000,
|
||
splitNumber: 6,
|
||
splitLine: { show: true },
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置。
|
||
show: true,
|
||
textStyle: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(86,183,232,0.2)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
show: true,
|
||
},
|
||
{
|
||
type: "value",
|
||
nameTextStyle: {
|
||
color: "#666666",
|
||
},
|
||
position: "right",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#cdd5e2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
// axisLabel: {
|
||
// show: true,
|
||
// formatter: "{value} %", //右侧Y轴文字显示
|
||
// textStyle: {
|
||
// color: "#666666",
|
||
// fontSize: 14,
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "笔数",
|
||
type: "bar",
|
||
barMaxWidth: 20,
|
||
zlevel: 10,
|
||
// barGap: '100%',
|
||
data: [5, 10, 15, 20, 25],
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: "rgb(29,79,117)",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "rgb(59,93,122)",
|
||
},
|
||
],
|
||
},
|
||
// barBorderRadius: [30, 30, 0, 0],
|
||
borderColor: "rgb(86,183,232)",
|
||
label: {
|
||
show: false, //开启显示
|
||
position: "top", //在上方显示
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#3b6ebf",
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "金额",
|
||
type: "line",
|
||
zlevel: 11,
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: true, //平滑曲线显示
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#ffa43a",
|
||
borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
|
||
borderWidth: 7,
|
||
label: {
|
||
show: false, //开启显示
|
||
position: "top", //在上方显示
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#915c1e",
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
},
|
||
formatter: function (res) {
|
||
if (res.value) {
|
||
return res.value + "%";
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "#ffa43a",
|
||
},
|
||
data: [10, 23, 20],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//服务清框
|
||
serviceTwo() {
|
||
var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
|
||
var option = {
|
||
legend: {
|
||
show: false,
|
||
data: ["金额"],
|
||
textStyle: {
|
||
align: "right",
|
||
color: "#fff",
|
||
},
|
||
// top: "2%",
|
||
right: "1%",
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
backgroundColor: "rgba(255,255,255)",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#A7D6FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#A7D6FF",
|
||
},
|
||
],
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "30%",
|
||
left: "9%",
|
||
right: "8%",
|
||
bottom: "14%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["在岗异常", "离岗异常"],
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴轴线
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。
|
||
show: true,
|
||
inside: false,
|
||
lineStyle: {
|
||
color: "rgb(86,183,232)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// min: 1000,
|
||
// splitNumber: 6,
|
||
splitLine: { show: true },
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置。
|
||
show: true,
|
||
textStyle: {
|
||
color: "rgb(203,199,207)",
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(86,183,232,0.2)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
show: true,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "金额",
|
||
type: "line",
|
||
zlevel: 11,
|
||
// yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: true, //平滑曲线显示
|
||
symbol: "circle", //标记的图形为实心圆
|
||
symbolSize: 8, //标记的大小
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#ffa43a",
|
||
borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
|
||
borderWidth: 7,
|
||
label: {
|
||
show: false, //开启显示
|
||
position: "top", //在上方显示
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#915c1e",
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
},
|
||
formatter: function (res) {
|
||
if (res.value) {
|
||
return res.value + "%";
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "#ffa43a",
|
||
},
|
||
data: [10, 23, 20],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
//服务选择
|
||
serviceType(index) {
|
||
this.serviceTypeActive = index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.left-content,
|
||
.right-content {
|
||
position: absolute;
|
||
width: 20.6%;
|
||
top: 0;
|
||
height: 100%;
|
||
/* background-color: aqua; */
|
||
}
|
||
.middle-content{
|
||
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;
|
||
margin-bottom: 10px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.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;
|
||
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);
|
||
}
|
||
|
||
.left-content .business-hall {
|
||
height: 38.2%;
|
||
|
||
}
|
||
|
||
.left-content .passenger-flow {
|
||
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%;
|
||
|
||
.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 {
|
||
height: calc(100% - 30px);
|
||
position: relative;
|
||
.paymentList {
|
||
width: 100%;
|
||
height: 13.5%;
|
||
background: url("../assets/images/payment.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-left: 2%;
|
||
box-sizing: border-box;
|
||
margin-top: 2%;
|
||
.listOne {
|
||
width: 45%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
.listTwo {
|
||
width: 55%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.twoTitle {
|
||
width: 100%;
|
||
height: 13.5%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #fff;
|
||
.titleIcon {
|
||
width: 15%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
}
|
||
}
|
||
#rightOneXian {
|
||
width: 100%;
|
||
height: calc(100% - 41%);
|
||
}
|
||
#rightOneBing {
|
||
width: 100%;
|
||
height: calc(100% - 41%);
|
||
}
|
||
.selectType {
|
||
position: absolute;
|
||
width: 48%;
|
||
height: 8.5%;
|
||
top: 42%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.typeName {
|
||
color: #fff;
|
||
}
|
||
.typeNameAction {
|
||
color: rgb(29, 147, 208);
|
||
// text-decoration: underline;
|
||
padding-bottom: 1px;
|
||
border-bottom: 1px solid rgb(29, 147, 208);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-content .business-acceptance {
|
||
height: 30%;
|
||
.title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.titleIcon {
|
||
width: 15%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
margin-bottom: 1%;
|
||
}
|
||
}
|
||
.businessContent {
|
||
height: calc(100% - 30px);
|
||
.businessList {
|
||
width: 100%;
|
||
height: 18%;
|
||
background: url("../assets/images/payment.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-left: 2%;
|
||
box-sizing: border-box;
|
||
margin-top: 2%;
|
||
.listOne {
|
||
width: 45%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
.listTwo {
|
||
width: 55%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.businessChart {
|
||
height: calc(100% - 18%);
|
||
width: 100%;
|
||
display: flex;
|
||
#rightBusinessOne {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#rightBusinessTwo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
// .rightBusinessOneList {
|
||
// width: 50%;
|
||
// height: 100%;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-content .service {
|
||
height: 30%;
|
||
.serviceContent {
|
||
height: calc(100% - 30px);
|
||
width: 100%;
|
||
position: relative;
|
||
.serviceOne {
|
||
height: 31%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.serviceList {
|
||
height: 100%;
|
||
width: 31%;
|
||
background: url("../assets/images/serviceBJ.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
}
|
||
#serviceTwo {
|
||
height: calc(100% - 31%);
|
||
width: 100%;
|
||
}
|
||
.selectType {
|
||
position: absolute;
|
||
width: 48%;
|
||
height: 12%;
|
||
top: 33%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.typeName {
|
||
color: #fff;
|
||
}
|
||
.serveiceAction {
|
||
color: rgb(29, 147, 208);
|
||
// text-decoration: underline;
|
||
padding-bottom: 3px;
|
||
border-bottom: 1px solid rgb(29, 147, 208);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-content {
|
||
right: 0;
|
||
}
|
||
|
||
.left-content {
|
||
left: 0;
|
||
}
|
||
</style> |