894 lines
23 KiB
Vue
894 lines
23 KiB
Vue
<template>
|
||
<div class="AppPropagandaStatistics">
|
||
<div class="calendar_header">
|
||
<u-section
|
||
title="宣发日历"
|
||
:show-line="false"
|
||
sub-title="查看更多"
|
||
@click="readMore"
|
||
></u-section>
|
||
</div>
|
||
<div class="threeDays">
|
||
<!-- 昨天 -->
|
||
<div class="yesterday">
|
||
<div class="itemYesterday">昨天<span>{{ nowMonth }}.{{ nowDate - 1 }}</span></div>
|
||
|
||
<div v-if="calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length">
|
||
<div v-for="(item,index) in calendarList[nowDate - 1].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
|
||
<div v-if="calendarList[nowDate - 1].taskList.length > 2 && showYes">
|
||
<div v-for="(item,index) in calendarList[nowDate - 1].taskList.slice(2, calendarList[nowDate - 1].taskList.length)" :key="index">{{item.taskTitle}}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!(calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length)">暂无宣发任务</div>
|
||
<div class="isShow" v-if="calendarList && calendarList[nowDate - 1] && calendarList[nowDate - 1].taskList.length && calendarList[nowDate - 1].taskList.length > 2" @click="showYes = !showYes">{{ showYes ? "收起" : "展开" }}</div>
|
||
</div>
|
||
|
||
<!-- 今天 -->
|
||
<div class="today">
|
||
<div class="itemToday">今天<span>{{ nowMonth }}.{{ nowDate }}</span></div>
|
||
|
||
<div v-if="calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length">
|
||
<div v-for="(item,index) in calendarList[nowDate].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
|
||
<div v-if="calendarList[nowDate].taskList.length > 2 && showTo">
|
||
<div v-for="(item,index) in calendarList[nowDate].taskList.slice(2, calendarList[nowDate].taskList.length)" :key="index">{{item.taskTitle}}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!(calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length>0)">暂无宣发任务</div>
|
||
<div class="isShow" v-if="calendarList && calendarList[nowDate] && calendarList[nowDate].taskList.length && calendarList[nowDate].taskList.length > 2" @click="showTo=!showTo">{{ showTo ? "收起" : "展开" }}</div>
|
||
</div>
|
||
|
||
<!-- 明天 -->
|
||
<div class="tomorrow">
|
||
<div class="itemTomorrow">明天<span>{{ nowMonth }}.{{ nowDate + 1 }}</span></div>
|
||
|
||
<div v-if="calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length">
|
||
<div v-for="(item,index) in calendarList[nowDate + 1].taskList.slice(0, 2)" :key="index">{{item.taskTitle}}</div>
|
||
<div v-if="calendarList[nowDate + 1].taskList.length > 2 && showTom">
|
||
<div v-for="(item,index) in calendarList[nowDate + 1].taskList.slice(2, calendarList[nowDate + 1].taskList.length)" :key="index">{{item.taskTitle}}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!(calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length)">暂无宣发任务</div>
|
||
<div class="isShow" v-if="calendarList && calendarList[nowDate + 1] && calendarList[nowDate + 1].taskList.length && calendarList[nowDate + 1].taskList.length > 2" @click="showTom=!showTom">{{ showTom ? "收起" : "展开" }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 折线图 -->
|
||
<div class="brokenEcharts">
|
||
<div class="broken_title">
|
||
<div class="broken_left">宣发效果</div>
|
||
<div class="broken_right" @click="filterShow = true">
|
||
<img src="./images/shaixuan.png" alt="" />筛选
|
||
</div>
|
||
</div>
|
||
<div class="broken_statistics">
|
||
<div class="broken_item">
|
||
<div>创建宣发任务数</div>
|
||
<div>{{ data.createCount || 0 }}</div>
|
||
</div>
|
||
<div class="broken_item">
|
||
<div>执行宣发次数</div>
|
||
<div>{{ data.executeCount || 0 }}</div>
|
||
</div>
|
||
<div class="broken_item">
|
||
<div>触达人次</div>
|
||
<div>{{ data.receiveCount || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="title">宣发任务数</div>
|
||
<div id="brokenEcharts3"></div>
|
||
<div class="title" >宣发次数</div>
|
||
<div id="brokenEcharts2"></div>
|
||
<div class="title" >触达人次</div>
|
||
<div id="brokenEcharts1"></div>
|
||
</div>
|
||
<div class="columnarEcharts" v-if="colData.length">
|
||
<div class="broken_title">
|
||
<div class="broken_left">宣发明细</div>
|
||
<div class="broken_right">
|
||
<span
|
||
:class="detailType == 0 ? 'active' : ''"
|
||
@click="detailType = 0, getColData()"
|
||
>近7天</span
|
||
>
|
||
<span
|
||
:class="detailType == 1 ? 'active' : ''"
|
||
@click="detailType = 1, getColData()"
|
||
>近30天</span
|
||
>
|
||
<span
|
||
:class="detailType == 2 ? 'active' : ''"
|
||
@click="detailType = 2, getColData()"
|
||
>近1年</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div id="columnarEcharts"></div>
|
||
</div>
|
||
|
||
<u-popup v-model="filterShow" mode="bottom" border-radius="14">
|
||
<div class="popup">
|
||
<div class="tips"></div>
|
||
<div class="title">
|
||
<div
|
||
class="cancel"
|
||
@click.stop="filterShow = false, timeSelect = 0"
|
||
>
|
||
取消
|
||
</div>
|
||
<p>筛选条件</p>
|
||
<div class="confirm" @click.stop="selectConfirm">确定</div>
|
||
</div>
|
||
<scroll-view class="select-content" scroll-y="true">
|
||
<div class="type-list">
|
||
<div class="type-title">宣发时间</div>
|
||
<div
|
||
class="item"
|
||
v-for="(item, index) in timeList"
|
||
:key="index"
|
||
:class="index == timeSelect ? 'active' : ''"
|
||
@click.stop="checkTime(index)"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div class="type-list">
|
||
<div class="type-title">宣发部门</div>
|
||
<div @click="getDept" class="dept">
|
||
<div v-if="departmentId">
|
||
<AiOpenData type="departmentName" :openid="departmentId"/>
|
||
</div>
|
||
<div v-if="!departmentId">请选择部门</div>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
<div class="popBtn">
|
||
<div @click="reset">重置</div>
|
||
<div @click="selectConfirm">确认</div>
|
||
</div>
|
||
</div>
|
||
<u-popup v-model="customShow" mode="bottom" border-radius="14" closeable>
|
||
<div class="customPop">
|
||
<div class="startTime">
|
||
<div>开始时间：</div>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<u-input
|
||
v-model="startTime"
|
||
placeholder="请选择开始时间"
|
||
disabled
|
||
@click="showStart = true"
|
||
/>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="endTime">
|
||
<div>结束时间：</div>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<u-input
|
||
v-model="endTime"
|
||
placeholder="请选择结束时间"
|
||
disabled
|
||
@click="showEnd = true"
|
||
/>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</div>
|
||
</div>
|
||
<u-picker
|
||
mode="time"
|
||
v-model="showStart"
|
||
@confirm="confirmStart"
|
||
></u-picker>
|
||
<u-picker
|
||
mode="time"
|
||
v-model="showEnd"
|
||
@confirm="confirmEnd"
|
||
></u-picker>
|
||
<div class="timeBtn" @click="handleTime">确定</div>
|
||
</div>
|
||
</u-popup>
|
||
</u-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
import { mapState, mapActions } from 'vuex'
|
||
export default {
|
||
name: "AppPropagandaStatistics",
|
||
appName: "宣发统计",
|
||
data() {
|
||
return {
|
||
isShow: false,
|
||
brokenEcharts1: null,
|
||
brokenEcharts2: null,
|
||
brokenEcharts3: null,
|
||
columnarEcharts: null,
|
||
filterShow: false,
|
||
customShow: false,
|
||
showYes: false,
|
||
showTo: false,
|
||
showTom: false,
|
||
timeList: ["近7天", "近30天", "近1年", "自定义"],
|
||
timeSelect: 0,
|
||
start: "",
|
||
end: "",
|
||
departmentId: '',
|
||
departList: [],
|
||
nowMonth: "",
|
||
nowDate: "",
|
||
calendarList: [],
|
||
detailType: 0,
|
||
timeType: "",
|
||
departId: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
start: "",
|
||
end: "",
|
||
showStart: false,
|
||
showEnd: false,
|
||
resX: [],
|
||
resY: [],
|
||
res2Y: [],
|
||
res3Y: [],
|
||
colData: [],
|
||
data: {}
|
||
};
|
||
},
|
||
|
||
onShow() {
|
||
document.title = "宣发统计";
|
||
this.getBrokenDate();
|
||
this.getData();
|
||
this.getColData();
|
||
this.getNowDate();
|
||
},
|
||
mounted() {
|
||
this.getBrokenEcharts1();
|
||
this.getBrokenEcharts2();
|
||
this.getBrokenEcharts3();
|
||
this.getColumnarEcharts();
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
...mapActions(['initOpenData', 'transCanvas','selectEnterpriseContact']),
|
||
checkTime(index) {
|
||
if (index == 3) {
|
||
this.timeSelect = index;
|
||
this.customShow = true;
|
||
this.showStart = false;
|
||
this.showEnd = false;
|
||
} else {
|
||
this.timeSelect = index;
|
||
}
|
||
},
|
||
|
||
readMore() {
|
||
uni.navigateTo({ url: `./calendarInfo` });
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.timeType = 0;
|
||
this.timeSelect = 0;
|
||
this.start = "";
|
||
this.end = "";
|
||
this.departId = "";
|
||
this.departmentId = "";
|
||
},
|
||
|
||
selectConfirm() {
|
||
if (this.timeSelect == 3) {
|
||
this.detailType = this.timeSelect;
|
||
this.start = this.startTime;
|
||
this.end = this.endTime;
|
||
} else {
|
||
this.detailType = this.timeSelect || 0;
|
||
}
|
||
this.departId = this.departmentId
|
||
this.getBrokenDate();
|
||
this.filterShow = false;
|
||
},
|
||
|
||
confirmStart(val) {
|
||
this.startTime = val.year + "-" + val.month + "-" + val.day;
|
||
},
|
||
|
||
confirmEnd(val) {
|
||
this.endTime = val.year + "-" + val.month + "-" + val.day;
|
||
},
|
||
|
||
handleTime() {
|
||
this.start = this.startTime;
|
||
this.end = this.endTime;
|
||
let startTmp = this.start.split("-");
|
||
let endTmp = this.end.split("-");
|
||
let stT = new Date(startTmp[0], startTmp[1], startTmp[2]);
|
||
let edT = new Date(endTmp[0], endTmp[1], endTmp[2]);
|
||
if (stT.getTime() > edT.getTime()) {
|
||
this.$u.toast("开始日期不能大于结束日期！");
|
||
this.customShow = true
|
||
return
|
||
}
|
||
this.customShow = false;
|
||
},
|
||
|
||
getNowDate() {
|
||
let date = new Date();
|
||
this.nowDate = date.getDate();
|
||
this.nowMonth = date.getMonth() + 1;
|
||
},
|
||
// 宣发日历
|
||
getData() {
|
||
this.$http
|
||
.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
|
||
params: {},
|
||
})
|
||
.then((res) => {
|
||
if (res?.data) {
|
||
this.calendarList = res.data;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 宣发效果
|
||
getBrokenDate() {
|
||
this.$http
|
||
.post(`/app/appmasssendingtask/statisticsEffect`, null, {
|
||
params: {
|
||
type: this.timeSelect,
|
||
startTime: this.start,
|
||
endTime: this.end,
|
||
departId: this.departId
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res?.data) {
|
||
this.data = res.data;
|
||
if (this.timeType == 0) {
|
||
this.resX = res.data.trend.map(
|
||
(e) =>
|
||
e.ymd.substring(5, 7) + "-" + e.ymd.substring(8, 10)
|
||
);
|
||
} else if (this.timeType == 1) {
|
||
this.resX = res.data.trend.map(
|
||
(e) =>
|
||
e.ymd.substring(5, 7) + "-" + e.ymd.substring(8, 10)
|
||
);
|
||
} else if (this.timeType == 2) {
|
||
this.resX = res.data.trend.map(
|
||
(e) =>
|
||
e.ymd.substring(0, 4) + "-" + e.ymd.substring(5, 7)
|
||
);
|
||
}
|
||
this.resY = res.data.trend.map((e) => e.receiveCount);
|
||
this.res2Y = res.data.trend.map((e) => e.executeCount);
|
||
this.res3Y = res.data.trend.map((e) => e.createCount);
|
||
this.getBrokenEcharts1();
|
||
this.getBrokenEcharts2();
|
||
this.getBrokenEcharts3();
|
||
}
|
||
});
|
||
},
|
||
// 触发人数
|
||
getBrokenEcharts1() {
|
||
this.brokenEcharts1 = echarts.init(
|
||
document.getElementById("brokenEcharts1")
|
||
);
|
||
this.brokenEcharts1.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "5%",
|
||
bottom: "2%",
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: this.resX,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
data: this.resY,
|
||
lineStyle: {
|
||
color: "#4B87FE",
|
||
},
|
||
itemStyle: {
|
||
color: "#4E8EEE",
|
||
},
|
||
},
|
||
],
|
||
});
|
||
},
|
||
// 宣发次数
|
||
getBrokenEcharts2() {
|
||
this.brokenEcharts2 = echarts.init(
|
||
document.getElementById("brokenEcharts2")
|
||
);
|
||
this.brokenEcharts2.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "5%",
|
||
bottom: "2%",
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
calculable: true,
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: this.resX,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
data: this.res2Y,
|
||
lineStyle: {
|
||
color: "#32C5FF",
|
||
},
|
||
itemStyle: {
|
||
color: "#31C1FA",
|
||
},
|
||
},
|
||
],
|
||
});
|
||
},
|
||
// 宣发任务数
|
||
getBrokenEcharts3() {
|
||
this.brokenEcharts3 = echarts.init(
|
||
document.getElementById("brokenEcharts3")
|
||
);
|
||
this.brokenEcharts3.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "5%",
|
||
bottom: "2%",
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: this.resX,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
data: this.res3Y,
|
||
lineStyle: {
|
||
color: "#FFAA44",
|
||
},
|
||
itemStyle: {
|
||
color: "#FFAA44",
|
||
},
|
||
},
|
||
],
|
||
});
|
||
},
|
||
|
||
// 宣发明细
|
||
getColData() {
|
||
this.$http.post(`/app/appmasssendingtask/statisticsDepart`, null, {
|
||
params: {
|
||
type: this.detailType,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code ===0) {
|
||
if(res.data && res.data.length) {
|
||
this.colData = res.data
|
||
let xData = [], yData = []
|
||
res.data.forEach((item) => {
|
||
xData.push(item.deptName)
|
||
yData.push(item.taskCount)
|
||
})
|
||
setTimeout(() => {this.getColumnarEcharts(xData, yData)}, 2000)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 柱状图
|
||
getColumnarEcharts(xData, yData) {
|
||
this.columnarEcharts = echarts.init(
|
||
document.getElementById("columnarEcharts")
|
||
);
|
||
this.columnarEcharts.setOption({
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: yData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#5087ec",
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: '#666'
|
||
}
|
||
},
|
||
},
|
||
},
|
||
type: "bar",
|
||
barWidth: 22,
|
||
barGap: '20%',
|
||
},
|
||
],
|
||
});
|
||
},
|
||
// 选择部门
|
||
getDept() {
|
||
this.selectEnterpriseContact({
|
||
fromDepartmentId: 0,
|
||
mode: "single",
|
||
type: ["department"],
|
||
selectedDepartmentIds: this.departList?.map(e => e.id)
|
||
}).then((res)=>{
|
||
if(res?.departmentList) {
|
||
this.departmentId = res.departmentList[0].id
|
||
}
|
||
}
|
||
).catch((err) => {
|
||
console.log(err);
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppPropagandaStatistics {
|
||
.calendar_header {
|
||
padding: 26px 32px;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
::v-deep .u-section__title__text {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
.threeDays {
|
||
background: #fff;
|
||
padding: 8px 32px 12px 32px;
|
||
box-sizing: border-box;
|
||
.yesterday,
|
||
.today,
|
||
.tomorrow {
|
||
background: #f7f8fa;
|
||
margin-bottom: 32px;
|
||
padding: 30px 0 30px 40px;
|
||
box-sizing: border-box;
|
||
.isShow {
|
||
color: #3aa0ff;
|
||
}
|
||
.itemYesterday,
|
||
.itemToday,
|
||
.itemTomorrow {
|
||
color: #999999;
|
||
span {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.yesterday {
|
||
border-left: 6px solid #fbd444;
|
||
}
|
||
.today {
|
||
border-left: 6px solid #50cb74;
|
||
}
|
||
.tomorrow {
|
||
border-left: 6px solid #3aa0ff;
|
||
}
|
||
}
|
||
|
||
.brokenEcharts,
|
||
.columnarEcharts {
|
||
margin: 24px 0 24px 0;
|
||
padding: 0 32px 32px 32px;
|
||
box-sizing: border-box;
|
||
|
||
.broken_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 96px;
|
||
align-items: center;
|
||
|
||
.broken_left {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.broken_right {
|
||
font-size: 24px;
|
||
|
||
img {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
span {
|
||
margin-right: 12px;
|
||
width: 108px;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
display: inline-block;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
}
|
||
.active {
|
||
background: #3399ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.broken_statistics {
|
||
display: flex;
|
||
padding: 24px 0;
|
||
box-sizing: border-box;
|
||
|
||
.broken_item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
div:first-child {
|
||
font-size: 24px;
|
||
color: #999999;
|
||
padding: 10px 0;
|
||
}
|
||
div:last-child {
|
||
font-size: 36px;
|
||
color: #000000;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 30px 0;
|
||
box-sizing: border-box;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
|
||
.brokenEcharts,
|
||
.columnarEcharts {
|
||
background: #fff;
|
||
|
||
#brokenEcharts1,
|
||
#brokenEcharts2,
|
||
#brokenEcharts3,
|
||
#columnarEcharts {
|
||
width: 100%;
|
||
height: 400px;
|
||
background: #f9f9f9;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.popup {
|
||
box-sizing: border-box;
|
||
.tips {
|
||
width: 80px;
|
||
height: 6px;
|
||
background: #dddddd;
|
||
border-radius: 4px;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
margin: 32px auto 8px auto;
|
||
}
|
||
.title {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
font-size: 34px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #222;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 32px;
|
||
.cancel {
|
||
display: inline-block;
|
||
width: 200px;
|
||
color: #aaa;
|
||
}
|
||
.confirm {
|
||
display: inline-block;
|
||
width: 200px;
|
||
text-align: right;
|
||
color: #333;
|
||
}
|
||
p {
|
||
display: inline-block;
|
||
width: calc(100% - 400px);
|
||
text-align: center;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
.select-content {
|
||
height: calc(100% - 100px);
|
||
overflow-y: scroll;
|
||
}
|
||
.type-list {
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32px;
|
||
.type-title {
|
||
line-height: 108px;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.item {
|
||
display: inline-block;
|
||
width: 210px;
|
||
text-align: center;
|
||
line-height: 64px;
|
||
background: #f3f4f7;
|
||
border-radius: 4px;
|
||
margin: 0 16px 16px 0;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #333;
|
||
}
|
||
.active {
|
||
background: #1365dd;
|
||
color: #fff;
|
||
}
|
||
.dept {
|
||
display: flex;
|
||
justify-content: space-between
|
||
}
|
||
}
|
||
.popBtn {
|
||
display: flex;
|
||
height: 98px;
|
||
line-height: 98px;
|
||
div {
|
||
width: 50%;
|
||
border: 2px solid #3399ff;
|
||
text-align: center;
|
||
}
|
||
div:first-child {
|
||
color: #3399ff;
|
||
}
|
||
div:last-child {
|
||
color: #fff;
|
||
background: #3399ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.customPop {
|
||
padding: 80px 32px 20px 32px;
|
||
box-sizing: border-box;
|
||
height: 660px;
|
||
|
||
.startTime,
|
||
.endTime {
|
||
border-bottom: 1px solid #ddd;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.timeBtn {
|
||
width: 100%;
|
||
background: #3399ff;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
border-radius: 16px;
|
||
color: #fff;
|
||
margin-top: 164px;
|
||
}
|
||
|
||
::v-deep .u-close {
|
||
z-index: auto;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|