fzq #31
@ -19,7 +19,8 @@ export default {
|
|||||||
colors: {
|
colors: {
|
||||||
delete: '#FF5454',
|
delete: '#FF5454',
|
||||||
preview: '#f09843',
|
preview: '#f09843',
|
||||||
design: '#99089f'
|
design: '#99089f',
|
||||||
|
// 'view-trend': 'red'
|
||||||
// add more...
|
// add more...
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
@ -30,6 +31,7 @@ export default {
|
|||||||
viewAttr: i18n.t('viewattr'),
|
viewAttr: i18n.t('viewattr'),
|
||||||
preview: i18n.t('preview'),
|
preview: i18n.t('preview'),
|
||||||
design: i18n.t('design'),
|
design: i18n.t('design'),
|
||||||
|
'view-trend': '查看趋势'
|
||||||
// add more...
|
// add more...
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -46,8 +46,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
|
<transition mode="out-in" name="slide-to-left">
|
||||||
<el-pagination
|
<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
|
||||||
|
<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
|
||||||
|
<!-- v-loading="dataIsLoading " -->
|
||||||
|
</transition>
|
||||||
|
<!-- <el-pagination
|
||||||
@size-change="sizeChangeHandle"
|
@size-change="sizeChangeHandle"
|
||||||
@current-change="currentChangeHandle"
|
@current-change="currentChangeHandle"
|
||||||
:current-page="pageIndex"
|
:current-page="pageIndex"
|
||||||
@ -55,7 +59,7 @@
|
|||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:total="totalPage"
|
:total="totalPage"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
></el-pagination>
|
></el-pagination> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -64,7 +68,7 @@ import i18n from '@/i18n'
|
|||||||
import BaseTable from '@/components/base-table'
|
import BaseTable from '@/components/base-table'
|
||||||
import TableOperateComponent from '@/components/base-table/components/operationComponent'
|
import TableOperateComponent from '@/components/base-table/components/operationComponent'
|
||||||
import TableTextComponent from '@/components/base-table/components/detailComponent'
|
import TableTextComponent from '@/components/base-table/components/detailComponent'
|
||||||
|
import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
|
||||||
import { calcMaxHeight } from '@/utils'
|
import { calcMaxHeight } from '@/utils'
|
||||||
import { timeFilter } from '@/utils/filters'
|
import { timeFilter } from '@/utils/filters'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
@ -126,10 +130,13 @@ const tableConfigs = [
|
|||||||
prop: 'operations',
|
prop: 'operations',
|
||||||
name: i18n.t('handle'),
|
name: i18n.t('handle'),
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
width: 180,
|
width: 120,
|
||||||
subcomponent: TableOperateComponent,
|
subcomponent: TableTextComponent,
|
||||||
// options: ['edit', 'delete']
|
// options: ['edit', 'delete']
|
||||||
options: ['view-trend'] // 查看趋势
|
// options: ['view-trend'] // 查看趋势
|
||||||
|
buttonContent: '查看趋势',
|
||||||
|
actionName: 'view-trend',
|
||||||
|
emitFullData: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -139,10 +146,11 @@ export default {
|
|||||||
/** hfxny part */
|
/** hfxny part */
|
||||||
factoryList: [],
|
factoryList: [],
|
||||||
productLineList: [],
|
productLineList: [],
|
||||||
|
showGraph: false,
|
||||||
/** */
|
/** */
|
||||||
calcMaxHeight,
|
calcMaxHeight,
|
||||||
tableConfigs,
|
tableConfigs,
|
||||||
timeType: 'range',
|
timeType: 'date',
|
||||||
rawTime: null, // [] or datetime
|
rawTime: null, // [] or datetime
|
||||||
dataForm: {
|
dataForm: {
|
||||||
type: 1,
|
type: 1,
|
||||||
@ -159,7 +167,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
BaseTable
|
BaseTable, EquipmentEfficiencyGraph
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
@ -233,8 +241,8 @@ export default {
|
|||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const { startTime, endTime } = this.getTimeRange()
|
const { startTime, endTime } = this.getTimeRange()
|
||||||
|
this.showGraph = false
|
||||||
this.dataListLoading = true
|
// this.dataListLoading = true
|
||||||
this.$http({
|
this.$http({
|
||||||
url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
|
url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@ -243,21 +251,59 @@ export default {
|
|||||||
endTime,
|
endTime,
|
||||||
ftId: this.dataForm.ftId,
|
ftId: this.dataForm.ftId,
|
||||||
productlines: this.dataForm.productlines,
|
productlines: this.dataForm.productlines,
|
||||||
limit: this.pageIndex,
|
// limit: this.pageIndex,
|
||||||
page: this.pageSize,
|
// page: this.pageSize,
|
||||||
type: 1
|
type: 1
|
||||||
}
|
}
|
||||||
}).then(({ data: res }) => {
|
}).then(({ data: res }) => {
|
||||||
console.log('oee data:', res)
|
if (res.data && res.code !== 500) {
|
||||||
if (res.length) {
|
console.log('oee data:', res)
|
||||||
this.dataList = res
|
if (res.data.length) {
|
||||||
this.totalPage = res.length
|
this.dataList = res.data
|
||||||
|
// this.dataList = Array(20).fill(1)
|
||||||
|
} else {
|
||||||
|
this.dataList.splice(0)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.dataList.splice(0)
|
this.dataList.splice(0)
|
||||||
this.totalPage = 0
|
this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 查看趋势
|
||||||
|
viewTrend(data) {
|
||||||
|
const { startTime, endTime } = this.getTimeRange()
|
||||||
|
const injectData = {
|
||||||
|
// 时间段
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
// 设备id
|
||||||
|
equipmentId: data.eqId,
|
||||||
|
equipmentName: data.eqName,
|
||||||
|
// 时间类型, type 按年，按月，按日等
|
||||||
|
type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
|
||||||
|
// 时长数据: 工作时长， 停机时长，故障时长
|
||||||
|
workTime: data.workTime,
|
||||||
|
stopTime: data.stopTime,
|
||||||
|
downTime: data.downTime,
|
||||||
|
// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
|
||||||
|
workRate: data.workRate,
|
||||||
|
stopRate: data.stopRate,
|
||||||
|
downRate: data.downRate,
|
||||||
|
peEfficiency: data.peEfficiency,
|
||||||
|
timeEfficiency: data.timeEfficiency
|
||||||
|
}
|
||||||
|
// console.log('trends data: ', data)
|
||||||
|
|
||||||
|
this.showGraph = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// console.log('befoer graph: ', this.$refs.eegraph)
|
||||||
|
this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
|
||||||
|
}, 600) // 动画是500ms
|
||||||
|
},
|
||||||
|
|
||||||
// 每页数
|
// 每页数
|
||||||
sizeChangeHandle(val) {
|
sizeChangeHandle(val) {
|
||||||
this.pageSize = val
|
this.pageSize = val
|
||||||
@ -273,16 +319,41 @@ export default {
|
|||||||
selectionChangeHandle(val) {
|
selectionChangeHandle(val) {
|
||||||
this.dataListSelections = val
|
this.dataListSelections = val
|
||||||
},
|
},
|
||||||
handleOperations({ type, data: id }) {
|
|
||||||
|
handleOperations({ type, data }) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'view-detail':
|
case 'view-trend':
|
||||||
return this.addOrUpdateHandle(id, true)
|
return this.viewTrend(data)
|
||||||
case 'edit':
|
// return this.addOrUpdateHandle(id, true)
|
||||||
return this.addOrUpdateHandle(id)
|
// case 'edit':
|
||||||
case 'delete':
|
// return this.addOrUpdateHandle(id)
|
||||||
return this.deleteHandle(id)
|
// case 'delete':
|
||||||
|
// return this.deleteHandle(id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.slide-to-left-enter-active,
|
||||||
|
.slide-to-left-leave-active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-to-left-enter {
|
||||||
|
transform: translateX(10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-to-left-leave-to {
|
||||||
|
transform: translateX(-10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-to-left-leave,
|
||||||
|
.slide-to-left-enter-to {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
308
src/views/modules/monitoring/equipmentEfficiencyGraph.vue
Normal file
308
src/views/modules/monitoring/equipmentEfficiencyGraph.vue
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
<!--
|
||||||
|
/*
|
||||||
|
* @Author: lb
|
||||||
|
* @Date: 2022-07-24 13:30:00
|
||||||
|
* @LastEditTime: 2022-07-28 09:30:00
|
||||||
|
* @LastEditors: lb
|
||||||
|
* @Description: 设备效率分析-echarts图
|
||||||
|
*/
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="graph-area">
|
||||||
|
<span class="close-btn" @click="close">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="close-row" style="padding-left: 8px;">
|
||||||
|
<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
|
||||||
|
<el-radio-button label="百分比" />
|
||||||
|
<el-radio-button label="时间" />
|
||||||
|
</el-radio-group>
|
||||||
|
|
||||||
|
<el-radio-group v-if="1" v-model="searchType" class="head-radio-group" style="margin-left: 8px;" size="small" @change="handleRadioGroupChanged">
|
||||||
|
<el-radio-button v-for="(opt, index) in searchRadioOptions" :key="index" :label="opt" />
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="trend-graph" class="real-graph" style="width: 100%; height: 500px;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import moment from 'moment'
|
||||||
|
import { pick } from 'lodash/object'
|
||||||
|
|
||||||
|
class EchartConfigs {
|
||||||
|
constructor() {
|
||||||
|
this.color = ['#e91e63', '#4caf50', '#3f51b5', '#ffc107', '#607d8b']
|
||||||
|
this.title = {
|
||||||
|
text: '时间区间走势',
|
||||||
|
top: 0,
|
||||||
|
left: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
lineHeight: 18
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.tooltip = {
|
||||||
|
trigger: 'axis',
|
||||||
|
// 将axisPointer设置得更显眼一点
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// legend
|
||||||
|
this.legend = {
|
||||||
|
icon: 'circle',
|
||||||
|
top: 24,
|
||||||
|
left: 'center',
|
||||||
|
padding: 8,
|
||||||
|
itemGap: 8,
|
||||||
|
data: [] // 动态设置
|
||||||
|
}
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'category',
|
||||||
|
data: [] // 动态设置
|
||||||
|
// https://tushuo.baidu.com/wave/index#/manufacture/dta9pydmexfdhc0sg/999
|
||||||
|
}
|
||||||
|
this.yAxis = {
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
this.series = [] // 动态设置
|
||||||
|
}
|
||||||
|
|
||||||
|
setTitle(val) {
|
||||||
|
this.title.text = val
|
||||||
|
}
|
||||||
|
|
||||||
|
setLegend(val) {
|
||||||
|
this.legend.data.splice(0)
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
this.legend.data = val
|
||||||
|
} else {
|
||||||
|
console.error('setLegend() 只接受数组参数')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setXAxis(val) {
|
||||||
|
// console.log('in setXAxis(): ', val)
|
||||||
|
this.xAxis.data.splice(0)
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
this.xAxis.data = val
|
||||||
|
} else {
|
||||||
|
console.error('setXAxis() 只接受数组参数')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSeries(val) {
|
||||||
|
this.series.splice(0)
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
this.series = val
|
||||||
|
} else {
|
||||||
|
console.error('setSeries() 只接受数组参数')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EquipmentEfficiencyGraph',
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchType: '无间隔',
|
||||||
|
searchRadioOptions: ['无间隔', '按月', '按周', '按天'],
|
||||||
|
dataType: '时间',
|
||||||
|
dataRadioOptions: ['时间', '百分比'],
|
||||||
|
config: new EchartConfigs(),
|
||||||
|
chart: null,
|
||||||
|
rateList: [], // 对请求来的数据分流
|
||||||
|
timeList: [],
|
||||||
|
xAxis: [], // 动态设置
|
||||||
|
injectData: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async initChart() {
|
||||||
|
this.config.setTitle(this.injectData.equipmentName + ' 时间区间走势')
|
||||||
|
await this.getList()
|
||||||
|
this.setLegend()
|
||||||
|
},
|
||||||
|
|
||||||
|
init(data) {
|
||||||
|
this.injectData = data
|
||||||
|
if (!this.chart) {
|
||||||
|
this.chart = echarts.init(document.getElementById('trend-graph'))
|
||||||
|
// this.chart.setOption(this.config)
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.$emit('close-graph')
|
||||||
|
},
|
||||||
|
|
||||||
|
makeQuerys() {
|
||||||
|
const searchTypeMap = {
|
||||||
|
无间隔: 1,
|
||||||
|
按月: 2,
|
||||||
|
按周: 3,
|
||||||
|
按天: 4
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// current: 1,
|
||||||
|
// size: 999,
|
||||||
|
// ftId: this.injectData.factoryId , // 工厂id
|
||||||
|
// wsId: this.injectData.workSequenceId , // 工段id
|
||||||
|
// productlines: ['1409788336610934786'], // 产线ids， 这几项都暂时不需要
|
||||||
|
type: searchTypeMap[this.searchType],
|
||||||
|
eqId: this.injectData.equipmentId,
|
||||||
|
startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
|
||||||
|
endTime: this.injectData.endTime
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// getOEE
|
||||||
|
getOEE(params) {},
|
||||||
|
|
||||||
|
getList() {
|
||||||
|
const params = this.makeQuerys()
|
||||||
|
// 发起请求
|
||||||
|
return this.getOEE(params).then(res => {
|
||||||
|
this.timeList.splice(0)
|
||||||
|
this.rateList.splice(0)
|
||||||
|
this.xAxis.splice(0)
|
||||||
|
if (res.data) {
|
||||||
|
// 分流
|
||||||
|
res.data.map(item => {
|
||||||
|
const time = moment(item.time)
|
||||||
|
if (this.searchType === '按月') {
|
||||||
|
this.xAxis.push(`${time.year()}年${time.month() + 1}月`)
|
||||||
|
} else if (this.searchType === '按周') {
|
||||||
|
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
||||||
|
} else if (this.searchType === '按天') {
|
||||||
|
this.xAxis.push(`${time.format('YY-M-D')}`)
|
||||||
|
} else {
|
||||||
|
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
||||||
|
}
|
||||||
|
this.timeList.push(pick(item, ['workTime', 'stopTime', 'downTime']))
|
||||||
|
this.rateList.push(pick(item, ['workRate', 'stopRate', 'downRate', 'peEfficiency', 'timeEfficiency', 'oee', 'teep']))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 设置横轴
|
||||||
|
this.config.setXAxis(JSON.parse(JSON.stringify(this.xAxis)))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleRadioGroupChanged() {
|
||||||
|
// 获取数据且设置横轴
|
||||||
|
await this.getList()
|
||||||
|
// 设置legend和数据
|
||||||
|
this.setLegend()
|
||||||
|
},
|
||||||
|
|
||||||
|
setLegend() {
|
||||||
|
// 设置legend
|
||||||
|
const legendMap = {
|
||||||
|
百分比: ['工作时长比率', '停机时长比率', '故障时长比率', '速度开动率', '时间开动率', 'OEE', 'TEEP'],
|
||||||
|
时间: ['工作时长', '停机时长', '故障时长']
|
||||||
|
}
|
||||||
|
this.config.setLegend(legendMap[this.dataType])
|
||||||
|
this.setData()
|
||||||
|
// 重新绘制
|
||||||
|
this.renderGraph()
|
||||||
|
},
|
||||||
|
|
||||||
|
setData() {
|
||||||
|
if (this.dataType === '时间') {
|
||||||
|
const workTimeList = []
|
||||||
|
const stopTimeList = []
|
||||||
|
const downTimeList = []
|
||||||
|
this.timeList.map(item => {
|
||||||
|
workTimeList.push(item.workTime)
|
||||||
|
stopTimeList.push(item.stopTime)
|
||||||
|
downTimeList.push(item.downTime)
|
||||||
|
})
|
||||||
|
this.config.setSeries([
|
||||||
|
{ name: '工作时长', type: 'bar', data: workTimeList },
|
||||||
|
{ name: '停机时长', type: 'bar', data: stopTimeList },
|
||||||
|
{ name: '故障时长', type: 'bar', data: downTimeList }
|
||||||
|
])
|
||||||
|
} else {
|
||||||
|
// 百分比
|
||||||
|
const workRateList = []
|
||||||
|
const stopRateList = []
|
||||||
|
const downRateList = []
|
||||||
|
const peEfficiencyList = []
|
||||||
|
const timeEfficiencyList = []
|
||||||
|
const oeeList = []
|
||||||
|
const teepList = []
|
||||||
|
this.rateList.map(item => {
|
||||||
|
workRateList.push(item.workRate)
|
||||||
|
stopRateList.push(item.stopRate)
|
||||||
|
downRateList.push(item.downRate)
|
||||||
|
peEfficiencyList.push(item.peEfficiency)
|
||||||
|
timeEfficiencyList.push(item.timeEfficiency)
|
||||||
|
oeeList.push(item.oee)
|
||||||
|
teepList.push(item.teep)
|
||||||
|
})
|
||||||
|
this.config.setSeries([
|
||||||
|
{ name: '工作时长比率', type: 'bar', data: workRateList },
|
||||||
|
{ name: '停机时长比率', type: 'bar', data: stopRateList },
|
||||||
|
{ name: '故障时长比率', type: 'bar', data: downRateList },
|
||||||
|
{ name: '速度开动率', type: 'bar', data: peEfficiencyList },
|
||||||
|
{ name: '时间开动率', type: 'bar', data: timeEfficiencyList },
|
||||||
|
{ name: 'OEE', type: 'bar', data: oeeList },
|
||||||
|
{ name: 'TEEP', type: 'bar', data: teepList }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重新绘制图形
|
||||||
|
renderGraph() {
|
||||||
|
// console.log('latest config: ', this.config)
|
||||||
|
this.chart.setOption(this.config)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.graph-area {
|
||||||
|
margin-top: 18px;
|
||||||
|
/* background: #f0f0f0; */
|
||||||
|
width: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-row {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
color: #0b58ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||||
|
background-color: #0b58ff;
|
||||||
|
border-color: #0b58ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user