ssc
3 years ago
parent
4f929d6333
commit
e563c94746
10 changed files with 768 additions and 0 deletions
@ -0,0 +1,19 @@ |
|||||||
|
import request from '@/router/axios'; |
||||||
|
|
||||||
|
const prefix = '/api/blade-workflow/statistics' |
||||||
|
|
||||||
|
export const index = (params) => { |
||||||
|
return request({ |
||||||
|
url: `${prefix}/index`, |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const bar = (params) => { |
||||||
|
return request({ |
||||||
|
url: `${prefix}/bar`, |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,748 @@ |
|||||||
|
<template> |
||||||
|
<div class="statistics-container"> |
||||||
|
<section class="mb20"> |
||||||
|
<avue-form :option="formOption" |
||||||
|
v-model="form" |
||||||
|
@reset-change="handleReset" |
||||||
|
@submit="handleSubmit"> </avue-form> |
||||||
|
</section> |
||||||
|
<el-row :gutter="20" |
||||||
|
class="mb20"> |
||||||
|
<el-col :xs="24" |
||||||
|
:sm="24" |
||||||
|
:md="12" |
||||||
|
:lg="6"> |
||||||
|
<div class="left-col col justify-between" |
||||||
|
v-for="(item, index) in processLeft" |
||||||
|
:key="index" |
||||||
|
@click="handleCol(item.type, item.name)"> |
||||||
|
<div class="flex-one"> |
||||||
|
<p class="name">{{item.name}}</p> |
||||||
|
<p class="num"> |
||||||
|
<avue-count-up :end="item.num"></avue-count-up> |
||||||
|
</p> |
||||||
|
<p class="add-num">今日新增：{{item.todayNum}}</p> |
||||||
|
</div> |
||||||
|
<img :src="require(`../assets/img/statistics_${item.type}.png`)" |
||||||
|
alt="" |
||||||
|
width="100" |
||||||
|
height="100"> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :xs="24" |
||||||
|
:sm="24" |
||||||
|
:md="12" |
||||||
|
:lg="18"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :xs="24" |
||||||
|
:sm="24" |
||||||
|
:md="12" |
||||||
|
:lg="6" |
||||||
|
v-for="(item, index) in processRight" |
||||||
|
:key="index" |
||||||
|
class="right-wrap"> |
||||||
|
<div class="right-col col justify-between" |
||||||
|
@click="handleCol(item.type, item.name)"> |
||||||
|
<div class="flex-one"> |
||||||
|
<p class="name">{{item.name}}</p> |
||||||
|
<p class="num"> |
||||||
|
<avue-count-up :end="item.num"></avue-count-up> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<img :src="require(`../assets/img/statistics_${item.type}.png`)" |
||||||
|
alt="" |
||||||
|
width="50" |
||||||
|
height="50"> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="col"> |
||||||
|
<div id="bar" |
||||||
|
style="width: 100%; height: 300px"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="15"> |
||||||
|
<div class="col echart-item"> |
||||||
|
<div id="task" |
||||||
|
style="width: 100%; height: 330px"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="9"> |
||||||
|
<div class="col ops-item "> |
||||||
|
<div class="ops-head justify-between"> |
||||||
|
<div class="th" |
||||||
|
style="padding-left: 25%">流程名称</div> |
||||||
|
<div class="th" |
||||||
|
style="padding-right: 10%">开始时间</div> |
||||||
|
</div> |
||||||
|
<div class="swiperlist"> |
||||||
|
<div v-for="(item, index) in opsList" |
||||||
|
:key="index" |
||||||
|
class="item justify-between"> |
||||||
|
<span class="name flex-one">{{item.processDefinitionName}}</span> |
||||||
|
<span class="time">{{item.createTime}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { index, bar } from '@/api/plugin/workflow/statistics/index' |
||||||
|
import { getList } from "@/api/plugin/workflow/ops"; |
||||||
|
import * as echarts from 'echarts' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
startTimeRange: '', |
||||||
|
}, |
||||||
|
barParams: { |
||||||
|
type: 'process', |
||||||
|
name: '流程总数' |
||||||
|
}, |
||||||
|
formOption: { |
||||||
|
menuSpan: 4, |
||||||
|
size: 'mini', |
||||||
|
labelWidth: 15, |
||||||
|
submitText: '搜索', |
||||||
|
column: [ |
||||||
|
{ |
||||||
|
label: "", |
||||||
|
type: "datetimerange", |
||||||
|
prop: 'startTimeRange', |
||||||
|
span: 12, |
||||||
|
dataType: "String", |
||||||
|
defaultTime: ['12:00:00', '08:00:00'], |
||||||
|
format: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
startPlaceholder: '时间日期开始范围自定义', |
||||||
|
endPlaceholder: '时间日期结束范围自定义', |
||||||
|
pickerOptions: { |
||||||
|
shortcuts: [{ |
||||||
|
text: '最近一周', |
||||||
|
onClick(picker) { |
||||||
|
const end = new Date(); |
||||||
|
const start = new Date(); |
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||||
|
picker.$emit('pick', [start, end]); |
||||||
|
} |
||||||
|
}, { |
||||||
|
text: '最近一个月', |
||||||
|
onClick(picker) { |
||||||
|
const end = new Date(); |
||||||
|
const start = new Date(); |
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||||
|
picker.$emit('pick', [start, end]); |
||||||
|
} |
||||||
|
}, { |
||||||
|
text: '最近三个月', |
||||||
|
onClick(picker) { |
||||||
|
const end = new Date(); |
||||||
|
const start = new Date(); |
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||||
|
picker.$emit('pick', [start, end]); |
||||||
|
} |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
processLeft: [{ |
||||||
|
name: '流程总数', |
||||||
|
num: 0, |
||||||
|
type: 'process', |
||||||
|
todayType: 'todayProcess', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '进行中', |
||||||
|
num: 0, |
||||||
|
type: 'unfinished', |
||||||
|
todayType: 'todayUnfinished', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已结束', |
||||||
|
num: 0, |
||||||
|
type: 'finished', |
||||||
|
todayType: 'todayFinished', |
||||||
|
}], |
||||||
|
processRight: [{ |
||||||
|
name: '已终结', |
||||||
|
num: 0, |
||||||
|
type: 'terminate', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已撤销', |
||||||
|
num: 0, |
||||||
|
type: 'withdraw', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已驳回', |
||||||
|
num: 0, |
||||||
|
type: 'reject', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已删除', |
||||||
|
num: 0, |
||||||
|
type: 'deleted', |
||||||
|
}], |
||||||
|
processList: [], |
||||||
|
taskList: [], |
||||||
|
opsList: [], |
||||||
|
animate: 0, |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.init() |
||||||
|
this.drawBar() |
||||||
|
this.getOps() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init() { |
||||||
|
index(this.form).then(res => { |
||||||
|
const process = res.data.data.process |
||||||
|
const task = res.data.data.task |
||||||
|
if (task.task > -1) { |
||||||
|
this.taskList = [task.task, task.timeout, task.unfinished, task.todayTask, task.todayUnfinished, task.todayTimeout] |
||||||
|
this.drawTask() |
||||||
|
} |
||||||
|
this.processLeft.forEach(e => { |
||||||
|
e.num = process[e.type] |
||||||
|
e.todayNum = process[e.todayType] |
||||||
|
}) |
||||||
|
this.processRight.forEach(e => { |
||||||
|
e.num = process[e.type] |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取表格数据 |
||||||
|
getOps() { |
||||||
|
const obj = { |
||||||
|
currentPage: 1, |
||||||
|
pageSize: 20 |
||||||
|
} |
||||||
|
getList(obj.currentPage, obj.pageSize,).then(res => { |
||||||
|
this.opsList = res.data.data.records |
||||||
|
this.scrollList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
drawBar(type, name) { |
||||||
|
bar({ type: type || 'process', startTimeRange: this.form.startTimeRange }).then(res => { |
||||||
|
|
||||||
|
let data = res.data.data |
||||||
|
let maxVal = Math.max.apply(null, data.yData) |
||||||
|
let myChart = echarts.init(document.getElementById('bar'), null, {}) |
||||||
|
let option = { |
||||||
|
backgroundColor: "", |
||||||
|
title: { |
||||||
|
text: `${name || '流程总数'} - 统计`, |
||||||
|
textStyle: { |
||||||
|
align: "center", |
||||||
|
color: "#9E78ED", |
||||||
|
fontSize: 16, |
||||||
|
}, |
||||||
|
top: "2%", |
||||||
|
left: "center", |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: "5%", |
||||||
|
right: "5%", |
||||||
|
top: "25%", |
||||||
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
const series = params[1] |
||||||
|
return series.name + "<br/>数量：" + series.value + "<br/>"; |
||||||
|
}, |
||||||
|
axisPointer: { |
||||||
|
type: "shadow", |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: data.xData, |
||||||
|
axisLine: { |
||||||
|
show: true, //隐藏X轴轴线 |
||||||
|
lineStyle: { |
||||||
|
color: "#f1f1f1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: true, //隐藏X轴刻度 |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
textStyle: { |
||||||
|
color: "#333", //X轴文字颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
name: "数量", |
||||||
|
nameTextStyle: { |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: true, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#FFFFFF", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: true, |
||||||
|
textStyle: { |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
name: "", |
||||||
|
nameTextStyle: { |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
position: "right", |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: false, |
||||||
|
formatter: "{value} %", //右侧Y轴文字显示 |
||||||
|
textStyle: { |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
gridIndex: 0, |
||||||
|
min: 0, |
||||||
|
max: maxVal, |
||||||
|
splitNumber: 8, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
splitArea: { |
||||||
|
show: true, |
||||||
|
areaStyle: { |
||||||
|
color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
type: "line", |
||||||
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 |
||||||
|
smooth: true, //平滑曲线显示 |
||||||
|
showAllSymbol: true, //显示所有图形。 |
||||||
|
symbol: "circle", //标记的图形为实心圆 |
||||||
|
symbolSize: 6, //标记的大小 |
||||||
|
itemStyle: { |
||||||
|
//折线拐点标志的样式 |
||||||
|
color: "#9E78ED", |
||||||
|
}, |
||||||
|
lineStyle: { |
||||||
|
color: "#9E78ED", |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
normal: { |
||||||
|
color: new echarts.graphic.LinearGradient( |
||||||
|
0, |
||||||
|
0, |
||||||
|
0, |
||||||
|
1, |
||||||
|
[ |
||||||
|
{ offset: 0, color: "rgba(230,221,251, 0.9)" }, |
||||||
|
{ offset: 1, color: "rgba(230,221,251, 0)" }, |
||||||
|
], |
||||||
|
false |
||||||
|
), |
||||||
|
|
||||||
|
shadowColor: "rgba(230,221,251, 0.9)", //阴影颜色 |
||||||
|
shadowBlur: 9, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: data.yData, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "流程", |
||||||
|
type: "bar", |
||||||
|
barWidth: 10, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "#6978F8", |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "#B497F4", |
||||||
|
}, |
||||||
|
]), |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: data.yData, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
window.addEventListener("resize", () => { myChart.resize(); }); |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
drawTask() { |
||||||
|
let myChart2 = echarts.init(document.getElementById('task'), null, {}) |
||||||
|
let option = { |
||||||
|
backgroundColor: "", |
||||||
|
title: { |
||||||
|
text: "任务统计", |
||||||
|
textStyle: { |
||||||
|
align: "center", |
||||||
|
color: "#ED5355", |
||||||
|
fontSize: 16, |
||||||
|
}, |
||||||
|
top: "2%", |
||||||
|
left: "center", |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: "5%", |
||||||
|
top: "18%", |
||||||
|
bottom: "12%", |
||||||
|
right: "5%", |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: ["任务总数", "超时任务", "进行中任务", "今日任务", "今日进行中任务", "今日超时任务"], |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "rgba(255, 129, 109, 0.1)", |
||||||
|
width: 1, //这里是为了突出显示加上的 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#999", |
||||||
|
fontSize: 10, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
splitNumber: 2, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "rgba(255, 129, 109, 0.1)", |
||||||
|
width: 1, //这里是为了突出显示加上的 |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#999", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitArea: { |
||||||
|
areaStyle: { |
||||||
|
color: "rgba(255,255,255,.5)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "rgba(255, 129, 109, 0.2)", |
||||||
|
width: 0.8, |
||||||
|
type: "dashed", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "hill", |
||||||
|
type: "pictorialBar", |
||||||
|
barCategoryGap: "0%", |
||||||
|
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z", |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: "top", |
||||||
|
distance: 15, |
||||||
|
color: "#DB5E6A", |
||||||
|
fontWeight: "bolder", |
||||||
|
fontSize: 15, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(232, 94, 106, .8)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(232, 94, 106, .1)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
opacity: 1, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: this.taskList, |
||||||
|
z: 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
myChart2.setOption(option); |
||||||
|
window.addEventListener("resize", () => { myChart2.resize(); }); |
||||||
|
}, |
||||||
|
// 列表滚动 |
||||||
|
scrollList() { |
||||||
|
const swiperList = document.getElementsByClassName("swiperlist"); |
||||||
|
this.animate = setInterval(() => { |
||||||
|
for (let i = 0; i < swiperList.length; i++) { |
||||||
|
let maxtop = swiperList[i].scrollHeight - swiperList[i].offsetHeight; |
||||||
|
if (maxtop === 0) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
swiperList[i].scrollTop += 1 |
||||||
|
if (swiperList[i].scrollTop >= (maxtop - 1)) { |
||||||
|
swiperList[i].scrollTop = 0 |
||||||
|
} |
||||||
|
} |
||||||
|
}, 80); |
||||||
|
}, |
||||||
|
// 日期清空 |
||||||
|
handleReset() { |
||||||
|
this.form.startTimeRange = '' |
||||||
|
this.init() |
||||||
|
this.drawBar(this.barParams.type, this.barParams.name) |
||||||
|
}, |
||||||
|
// 日期搜索 |
||||||
|
handleSubmit(form, done) { |
||||||
|
if (form.startTimeRange) { |
||||||
|
this.init() |
||||||
|
this.drawBar(this.barParams.type, this.barParams.name) |
||||||
|
} else this.$message.error('请选择时间'); |
||||||
|
setTimeout(() => { |
||||||
|
done() |
||||||
|
}, 1000) |
||||||
|
|
||||||
|
}, |
||||||
|
// col点击 |
||||||
|
handleCol(type, name) { |
||||||
|
this.barParams = { |
||||||
|
type, |
||||||
|
name, |
||||||
|
} |
||||||
|
this.drawBar(this.barParams.type, this.barParams.name) |
||||||
|
}, |
||||||
|
}, |
||||||
|
deactivated() { |
||||||
|
clearInterval(this.animate) |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
clearInterval(this.animate) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.statistics-container { |
||||||
|
padding: 0 10px 30px !important; |
||||||
|
.flex-one { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
.mb20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.cursor { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.justify-between { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.col { |
||||||
|
cursor: pointer; |
||||||
|
background: rgba(255, 255, 255, 0.7); |
||||||
|
border-radius: 10px; |
||||||
|
.name { |
||||||
|
color: #17307a; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
.num { |
||||||
|
color: #2f2e4a; |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
p { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
.right-wrap { |
||||||
|
margin-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
left: 20px; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
&:nth-child(1)::before { |
||||||
|
background: #7a78ff; |
||||||
|
} |
||||||
|
&:nth-child(2)::before { |
||||||
|
background: #ffbc1b; |
||||||
|
} |
||||||
|
&:nth-child(3)::before { |
||||||
|
background: #00b6d7; |
||||||
|
} |
||||||
|
&:nth-child(4)::before { |
||||||
|
background: #ec3f3f; |
||||||
|
} |
||||||
|
.right-col { |
||||||
|
padding: 0 25px; |
||||||
|
height: 100px; |
||||||
|
&:hover { |
||||||
|
background: rgba(237, 83, 85, 0.1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.left-col { |
||||||
|
height: 128px; |
||||||
|
padding-left: 25px; |
||||||
|
&:hover { |
||||||
|
background: rgba(237, 83, 85, 0.1); |
||||||
|
} |
||||||
|
& + .left-col { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
left: 10px; |
||||||
|
width: 5px; |
||||||
|
height: 64px; |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
&:nth-child(1)::before { |
||||||
|
background: #ffcc40; |
||||||
|
} |
||||||
|
&:nth-child(2)::before { |
||||||
|
background: #302bc0; |
||||||
|
} |
||||||
|
&:nth-child(3)::before { |
||||||
|
background: #f05e5e; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin: 4px 0 6px; |
||||||
|
} |
||||||
|
.add-num { |
||||||
|
font-size: 13px; |
||||||
|
color: #9191a4; |
||||||
|
} |
||||||
|
} |
||||||
|
.ops-item { |
||||||
|
width: 100%; |
||||||
|
height: 330px; |
||||||
|
.ops-head { |
||||||
|
height: 40px; |
||||||
|
background: #f5f7f9; |
||||||
|
.th { |
||||||
|
color: #697582; |
||||||
|
font-size: 12px; |
||||||
|
// text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiperlist { |
||||||
|
width: 100%; |
||||||
|
height: 290px; |
||||||
|
overflow: hidden scroll; |
||||||
|
} |
||||||
|
.item { |
||||||
|
padding: 10px 10px; |
||||||
|
border-top: 1px solid #f0f0f0; |
||||||
|
color: #17307a; |
||||||
|
font-size: 12px; |
||||||
|
.name { |
||||||
|
font-size: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.time { |
||||||
|
width: 140px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
::v-deep .el-collapse { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
::v-deep .el-collapse-item__wrap { |
||||||
|
padding-top: 8px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
::v-deep .el-form-item--mini.el-form-item, |
||||||
|
::v-deep .el-form-item--small.el-form-item { |
||||||
|
margin-bottom: 0 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue