projects/mesxc-zhp #274
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-29 16:50:26
|
* @Date: 2024-01-29 16:50:26
|
||||||
* @LastEditTime: 2024-03-25 18:33:48
|
* @LastEditTime: 2024-03-26 09:25:08
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -137,10 +137,10 @@ import baseTable1 from './components/baseTable'
|
|||||||
// import baseContainer1 from './components/baseContainer/indexcopy'
|
// import baseContainer1 from './components/baseContainer/indexcopy'
|
||||||
// import baseTable2 from './components/baseTable'
|
// import baseTable2 from './components/baseTable'
|
||||||
// import baseTable3 from './components/baseTable'
|
// import baseTable3 from './components/baseTable'
|
||||||
import TopRadioGroup from './components/topRadioGroup'
|
// import TopRadioGroup from './components/topRadioGroup'
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
// import BaseVideo from './components/baseVideo.vue'
|
// import BaseVideo from './components/baseVideo.vue'
|
||||||
import alarmLevel from './components/alarmLevel'
|
// import alarmLevel from './components/alarmLevel'
|
||||||
import pileBarChart from './components/pileBarChart'
|
import pileBarChart from './components/pileBarChart'
|
||||||
import colorDiv from './components/colorDiv'
|
import colorDiv from './components/colorDiv'
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
@ -251,7 +251,7 @@ export default {
|
|||||||
baseContainer,
|
baseContainer,
|
||||||
baseTable1,
|
baseTable1,
|
||||||
pileBarChart,
|
pileBarChart,
|
||||||
TopRadioGroup,
|
// TopRadioGroup,
|
||||||
doubleYChart,
|
doubleYChart,
|
||||||
LinearBarChart,
|
LinearBarChart,
|
||||||
ISRAChart
|
ISRAChart
|
||||||
|
|||||||
@ -1,127 +0,0 @@
|
|||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 10,
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar',
|
|
||||||
showBackground: true,
|
|
||||||
backgroundStyle: {
|
|
||||||
color: 'rgba(180, 180, 180, 0.2)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 16:50:39
|
|
||||||
* @LastEditTime: 2022-01-25 15:43:52
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from '../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '10%',
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
x: 'right', // 可设定图例在左、右、居中
|
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
|
||||||
itemWidth: 10,
|
|
||||||
show: this.showLegend,
|
|
||||||
data: this.legendData,
|
|
||||||
right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
scale: true,
|
|
||||||
max: 12,
|
|
||||||
min: 0,
|
|
||||||
splitNumber: 5,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
boundaryGap: [0.2, 0.2],
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} h',
|
|
||||||
textStyle: {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.legendData[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[0].data,
|
|
||||||
markLine: {
|
|
||||||
data: [{ type: 'average', name: 'Avg' }]
|
|
||||||
},
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[0].itemStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.legendData[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[1].data,
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[1].itemStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 16:50:39
|
|
||||||
* @LastEditTime: 2022-01-25 15:44:26
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from '../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '10%',
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
x: 'right', // 可设定图例在左、右、居中
|
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
|
||||||
itemWidth: 10,
|
|
||||||
show: this.showLegend,
|
|
||||||
data: this.legendData,
|
|
||||||
right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
scale: true,
|
|
||||||
max: 12,
|
|
||||||
min: 0,
|
|
||||||
splitNumber: 5,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
boundaryGap: [0.2, 0.2],
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} h',
|
|
||||||
textStyle: {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.legendData[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[0].data,
|
|
||||||
markLine: {
|
|
||||||
data: [{ type: 'average', name: 'Avg' }]
|
|
||||||
},
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[0].itemStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.legendData[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[1].data,
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[1].itemStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,144 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-19 15:58:17
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2022-01-24 09:01:07
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px'}">
|
|
||||||
<div class="line" />
|
|
||||||
<div class="line line-vertical" />
|
|
||||||
<div class="line line-right" />
|
|
||||||
<div class="line line-right-vertical" />
|
|
||||||
<div class="line line-bottom" />
|
|
||||||
<div class="line line-bottom-vertical" />
|
|
||||||
<div class="line line-bottom-right" />
|
|
||||||
<div class="line line-bottom-right-vertical" />
|
|
||||||
<div class="bar-item">
|
|
||||||
<div v-if="title" class="bar-title">
|
|
||||||
<span>
|
|
||||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
||||||
{{ title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="bar-content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseContainer',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
titleIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
baseSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curIndex: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTab(num) {
|
|
||||||
this.curIndex = num
|
|
||||||
this.$emit('tabSelect', num)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.base-container {
|
|
||||||
color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
|
||||||
position: relative;
|
|
||||||
padding: .5em;
|
|
||||||
border: 2px solid;
|
|
||||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
|
||||||
.line {
|
|
||||||
position: absolute;
|
|
||||||
border-top: 4px solid #52FFF1;
|
|
||||||
width: 2em;
|
|
||||||
top: -.25em;
|
|
||||||
left: -.25em;
|
|
||||||
&-vertical {
|
|
||||||
top: calc(-5em / 12);
|
|
||||||
left: calc(-1em / 12);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
&-right {
|
|
||||||
top: -.25em;
|
|
||||||
right: -.25em;
|
|
||||||
left: inherit;
|
|
||||||
}
|
|
||||||
&-right-vertical {
|
|
||||||
top: calc(-5em / 12);
|
|
||||||
right: calc(-1em / 12);
|
|
||||||
left: inherit;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transform-origin: right;
|
|
||||||
}
|
|
||||||
&-bottom {
|
|
||||||
top: inherit;
|
|
||||||
left: -.25em;
|
|
||||||
bottom: -.25em;
|
|
||||||
}
|
|
||||||
&-bottom-vertical {
|
|
||||||
top: inherit;
|
|
||||||
left: calc(-1em / 12);
|
|
||||||
bottom: calc(-5em / 12);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
&-bottom-right {
|
|
||||||
top: inherit;
|
|
||||||
left: inherit;
|
|
||||||
right: -.25em;
|
|
||||||
bottom: -.25em;
|
|
||||||
}
|
|
||||||
&-bottom-right-vertical {
|
|
||||||
top: inherit;
|
|
||||||
left: inherit;
|
|
||||||
right: calc(-1em / 12);
|
|
||||||
bottom: calc(-5em / 12);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
transform-origin: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bar-title {
|
|
||||||
width: 100%;
|
|
||||||
color: #52FFF1;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: .1em;
|
|
||||||
}
|
|
||||||
.bar-content{
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,170 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-13 16:41:13
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="visual-base-table-container">
|
|
||||||
<el-table
|
|
||||||
v-loading="isLoading"
|
|
||||||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 + 'px',padding: 0}"
|
|
||||||
:row-style="setRowStyle"
|
|
||||||
:data="renderData"
|
|
||||||
border
|
|
||||||
style="width: 100%; background: transparent"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
v-for="item in renderTableHeadList"
|
|
||||||
:key="item.prop"
|
|
||||||
:show-overflow-tooltip="showOverflow"
|
|
||||||
v-bind="item"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
|
|
||||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
|
||||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<slot name="content" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { isObject, isString } from 'lodash'
|
|
||||||
export default {
|
|
||||||
name: 'BaseTable',
|
|
||||||
filters: {
|
|
||||||
commonFilter: (source, filterType = a => a) => {
|
|
||||||
return filterType(source)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tableData: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
|
||||||
},
|
|
||||||
tableConfig: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
|
||||||
},
|
|
||||||
isLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
page: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 5
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
showOverflow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableConfigBak: [],
|
|
||||||
selectedBox: new Array(20).fill(true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
renderData() {
|
|
||||||
if (this.tableData && !this.tableData[0]._pageIndex) {
|
|
||||||
this.tableData.forEach((item, index) => {
|
|
||||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
|
||||||
},
|
|
||||||
renderTableHeadList() {
|
|
||||||
return this.tableConfig.filter((item, index) => {
|
|
||||||
return this.selectedBox[index]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
this.selectedBox = new Array(20).fill(true)
|
|
||||||
},
|
|
||||||
// mounted() {
|
|
||||||
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
|
|
||||||
// return {
|
|
||||||
// ...item,
|
|
||||||
// selected: true
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
methods: {
|
|
||||||
emitData(val) {
|
|
||||||
this.$emit('emitFun', val)
|
|
||||||
},
|
|
||||||
setRowStyle(v) {
|
|
||||||
if (v.rowIndex % 2 === 0) {
|
|
||||||
return {
|
|
||||||
background: 'rgba(76,97,123,0.2)',
|
|
||||||
color: '#fff',
|
|
||||||
height: 26 * this.beilv + 'px',
|
|
||||||
padding: 0
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
background: 'rgba(79,114,136,0.29)',
|
|
||||||
color: '#fff',
|
|
||||||
height: 26 * this.beilv + 'px',
|
|
||||||
padding: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
@import "~@/styles/index.scss";
|
|
||||||
.visual-base-table-container {
|
|
||||||
.el-table {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.el-table::before,.el-table--border::after {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.el-table th,td{
|
|
||||||
border-color: #0D1728 !important;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.el-table tr {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.el-table__row:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row--striped:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .setting {
|
|
||||||
// text-align: right;
|
|
||||||
// padding: 15px;
|
|
||||||
// .setting-box {
|
|
||||||
// width: 100px;
|
|
||||||
// }
|
|
||||||
// i {
|
|
||||||
// color: #aaa;
|
|
||||||
// @extend .pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 21:02:57
|
|
||||||
* @LastEditTime: 2022-01-23 21:08:21
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
style=" width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin:auto"
|
|
||||||
:style="{background:injectData.colour}"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
emitClick() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-22 18:05:45
|
|
||||||
* @LastEditTime: 2022-01-23 10:50:29
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div style="width:100%,text-align:center">
|
|
||||||
<div style="text-align:center">
|
|
||||||
<el-radio-group v-model="dateType" size="mini">
|
|
||||||
<el-radio-button v-for="item in labelList" :key="item.index" :label="item.index">
|
|
||||||
{{ item.label }}
|
|
||||||
</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'TopGroup',
|
|
||||||
props: {
|
|
||||||
dateType: {
|
|
||||||
type: String,
|
|
||||||
default: '0'
|
|
||||||
},
|
|
||||||
labelList: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .el-radio-button__inner {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
background: #133648;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: -0.5em;
|
|
||||||
color: white;
|
|
||||||
line-height: 14px;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
||||||
background: #3eb0ae;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-20 14:12:10
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2022-01-25 16:57:00
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionLineMonitoringCockpit\nowTeam.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="now-team">
|
|
||||||
<el-row style="margin-bottom: 3em">
|
|
||||||
<p class="now-team-title">- 开始时间 -</p>
|
|
||||||
<p class="now-team-content blue">2021.1.26 13:30:21</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row style="margin-bottom: 1em">
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 班组名称 -</p>
|
|
||||||
<p style="font-size:2em" class="now-team-content blue">中班执行一组</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 原片投入(片) -</p>
|
|
||||||
<p class="now-team-content blue">122</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 投入面积(㎡) -</p>
|
|
||||||
<p class="now-team-content blue">12000</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 产品规格 -</p>
|
|
||||||
<p class="now-team-content blue">110</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 执行工单 -</p>
|
|
||||||
<p class="now-team-content blue">110</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 成品率 -</p>
|
|
||||||
<p class="now-team-content blue">98.8%</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ProductionMonitoringCockpit',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.now-team{
|
|
||||||
width: 100%;
|
|
||||||
.now-team-title{
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 2em;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.now-team-content{
|
|
||||||
font-size: 2.5em;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1em;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
color: #52FFF1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,229 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: lb
|
|
||||||
* @Date: 2022-01-21 14:43:06
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-02-07 13:46:05
|
|
||||||
* @Description: 简单折线图
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
const AxisLine = {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341',
|
|
||||||
width: '1'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AxisLabel = {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 2022.8.23 TODO:
|
|
||||||
* 1.一份数据三张表
|
|
||||||
* 2.切换选项卡时只更新一张表的数据
|
|
||||||
* 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
|
|
||||||
*/
|
|
||||||
|
|
||||||
class ChartOption {
|
|
||||||
constructor() {
|
|
||||||
this.color = [
|
|
||||||
'#3574a8',
|
|
||||||
'#9f3476',
|
|
||||||
'#30959d',
|
|
||||||
'#5255be',
|
|
||||||
'#8b4449',
|
|
||||||
'#a29848',
|
|
||||||
'#FF6600',
|
|
||||||
'#FFFF00',
|
|
||||||
'#91cc75',
|
|
||||||
'#fac858',
|
|
||||||
'#ee6666',
|
|
||||||
'#73c0de',
|
|
||||||
'#3ba272',
|
|
||||||
'#fc8452',
|
|
||||||
'#9a60b4',
|
|
||||||
'#ea7ccc'
|
|
||||||
]
|
|
||||||
this.tooltip = { trigger: 'axis' }
|
|
||||||
this.grid = {
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '5%',
|
|
||||||
height: '80%',
|
|
||||||
containLabel: true
|
|
||||||
}
|
|
||||||
this.legend = {
|
|
||||||
itemHeight: 10,
|
|
||||||
itemWidth: 10,
|
|
||||||
y: 'top',
|
|
||||||
x: 'center',
|
|
||||||
top: 0,
|
|
||||||
// right: '1%',
|
|
||||||
data: [
|
|
||||||
/** dynamic */
|
|
||||||
],
|
|
||||||
// right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.xAxis = {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLine: AxisLine,
|
|
||||||
axisLabel: { ...AxisLabel, rotate: 20 },
|
|
||||||
data: [
|
|
||||||
/** dynamic */
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.yAxis = {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLine: AxisLine,
|
|
||||||
axisLabel: AxisLabel
|
|
||||||
}
|
|
||||||
this.series = [
|
|
||||||
/** dynmaic */
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setLegend(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
const data = Object.keys(rawdata)
|
|
||||||
this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setCategory(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
if (Object.keys(rawdata).length > 0) {
|
|
||||||
const first = rawdata[Object.keys(rawdata)[0]]
|
|
||||||
this.xAxis.data = Object.keys(first)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setData(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
this.series = []
|
|
||||||
for (const key in rawdata) {
|
|
||||||
this.series.push({
|
|
||||||
name: key,
|
|
||||||
type: 'line',
|
|
||||||
data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clearOptions() {
|
|
||||||
this.legend.data.splice(0)
|
|
||||||
this.xAxis.data.splice(0)
|
|
||||||
this.series.splice(0)
|
|
||||||
}
|
|
||||||
// add more...
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'SimpleLineChart',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
caty: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
defaultOpts: new ChartOption()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
showLegend() {
|
|
||||||
return this.legend.length > 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dataList: {
|
|
||||||
handler: function(val) {
|
|
||||||
this.updateChartOptions()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
if (!this.chart) {
|
|
||||||
this.chart = echarts.init(this.$refs.SimpleLineChart)
|
|
||||||
this.updateChartOptions()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateChartOptions() {
|
|
||||||
if (!this.chart) return
|
|
||||||
this.defaultOpts.clearOptions()
|
|
||||||
/** set */
|
|
||||||
this.defaultOpts.setLegend(this.dataList)
|
|
||||||
this.defaultOpts.setCategory(this.dataList)
|
|
||||||
this.defaultOpts.setData(this.dataList)
|
|
||||||
/** log */
|
|
||||||
this.chart.setOption({ ...this.defaultOpts })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
margin-top: -3em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-23 00:14:53
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<span class="alarm-level">
|
|
||||||
<span
|
|
||||||
style="display: inline-block; height: .6em;width: .6em; border-radius: .3em; position: relative;"
|
|
||||||
:style="{background: colorList[injectData.level].back, boxShadow: `0px 0px 2px 2px ${colorList[injectData.level].border}`}"
|
|
||||||
/>
|
|
||||||
{{ injectData.level }}级
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'NextDay',
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
colorList: {
|
|
||||||
1: {
|
|
||||||
back: 'rgba(255, 12, 12, 1)',
|
|
||||||
border: 'rgba(255, 12, 12, .5)'
|
|
||||||
},
|
|
||||||
2: {
|
|
||||||
back: 'rgba(255, 183, 12, 1)',
|
|
||||||
border: 'rgba(255, 183, 12, .5)'
|
|
||||||
},
|
|
||||||
3: {
|
|
||||||
back: 'rgba(39, 96, 255, 1)',
|
|
||||||
border: 'rgba(39, 96, 255, .5)'
|
|
||||||
},
|
|
||||||
4: {
|
|
||||||
back: 'rgba(12, 255, 30, 1)',
|
|
||||||
border: 'rgba(12, 255, 30, .5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,187 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-19 15:58:17
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-09-21 16:15:14
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="base-container"
|
|
||||||
:style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
|
|
||||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
|
|
||||||
>
|
|
||||||
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
|
|
||||||
<template v-if="showLine">
|
|
||||||
<div class="line" />
|
|
||||||
<div class="line line-vertical" />
|
|
||||||
<div class="line line-right" />
|
|
||||||
<div class="line line-right-vertical" />
|
|
||||||
<div class="line line-bottom" />
|
|
||||||
<div class="line line-bottom-vertical" />
|
|
||||||
<div class="line line-bottom-right" />
|
|
||||||
<div class="line line-bottom-right-vertical" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="bar-item">
|
|
||||||
<div v-if="title" class="bar-title">
|
|
||||||
<span>
|
|
||||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
||||||
{{ title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseContainer',
|
|
||||||
props: {
|
|
||||||
showLine: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
noPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
noContentPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
titleIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
baseSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curIndex: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
changeTab(num) {
|
|
||||||
this.curIndex = num
|
|
||||||
this.$emit('tabSelect', num)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.base-container {
|
|
||||||
color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
|
||||||
position: relative;
|
|
||||||
// border: 2px solid;
|
|
||||||
background: url('../../../../assets/img/bg-bottom-item.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
// border-radius: 40px 0px 40px 0px;
|
|
||||||
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
|
|
||||||
// .line {
|
|
||||||
// position: absolute;
|
|
||||||
// border-top: 4px solid #52fff1;
|
|
||||||
// width: 2em;
|
|
||||||
// top: -0.25em;
|
|
||||||
// left: -0.25em;
|
|
||||||
// &-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-right {
|
|
||||||
// top: -0.25em;
|
|
||||||
// right: -0.25em;
|
|
||||||
// left: inherit;
|
|
||||||
// }
|
|
||||||
// &-right-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// left: inherit;
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// &-bottom {
|
|
||||||
// top: inherit;
|
|
||||||
// left: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-bottom-right {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-right-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
.bar-item {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-title {
|
|
||||||
width: 100%;
|
|
||||||
color: #52fff1;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 0.67em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-content {
|
|
||||||
padding: 1em;
|
|
||||||
flex: 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-padding {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-0 {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.border-none {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Date: 2020-12-14 09:07:03
|
* @Author: zhp
|
||||||
|
* @Date: 2024-03-26 09:20:18
|
||||||
|
* @LastEditTime: 2024-03-26 09:20:18
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-01-12 14:30:46
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -158,7 +158,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../styles/index.scss";
|
// @import "../styles/index.scss";
|
||||||
.visual-base-table-container {
|
.visual-base-table-container {
|
||||||
.el-table {
|
.el-table {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|||||||
@ -1,40 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-13 16:41:28
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="base-video-container">
|
|
||||||
<!-- <video id="v1" :style="{height: videoHeight + 'px'}" :src="require('../../../assets/video/3d.mkv')" autoplay loop muted /> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseVideo',
|
|
||||||
props: {
|
|
||||||
videoHeight: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 200
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.base-video-container{
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-23 00:14:53
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="next-day" :style="{background: injectData.nextLong < 0 ? 'rgba(255, 84, 76, 0.6)' : injectData.nextLong < 10 ? 'rgba(251, 211, 80, 0.6)' : 'rgba(142, 254, 83, 0.6)'}">
|
|
||||||
{{ injectData.nextLong }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'NextDay',
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.next-day{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,237 +0,0 @@
|
|||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height + 'px', width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'threeBarChart'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
nameList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
series: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.dataList.length > 1) {
|
|
||||||
this.series = [
|
|
||||||
{ // 柱体
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 30,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{ // 柱顶
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 20,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: [0, '-50%'],
|
|
||||||
symbolSize: [30, 12],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: { color: this.dataList[0].topColor },
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{ // 柱底
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 20,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolOffset: [0, '50%'],
|
|
||||||
symbolSize: [30, 15],
|
|
||||||
itemStyle: { color: this.dataList[0].bottomColor },
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{ // 柱体
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 30,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data
|
|
||||||
},
|
|
||||||
{ // 柱顶
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 20,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: [0, '-50%'],
|
|
||||||
symbolSize: [30, 12],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: { color: this.dataList[1].topColor },
|
|
||||||
data: this.dataList[1].data
|
|
||||||
},
|
|
||||||
{ // 柱底
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 20,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolOffset: [0, '50%'],
|
|
||||||
symbolSize: [30, 15],
|
|
||||||
itemStyle: { color: this.dataList[1].topColor },
|
|
||||||
data: this.dataList[1].data
|
|
||||||
}
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
this.series = [
|
|
||||||
{ // 柱体
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 12,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{ // 柱顶
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 12,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: [0, '-50%'],
|
|
||||||
symbolSize: [12, 6],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: { color: this.dataList[0].topColor },
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{ // 柱底
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 12,
|
|
||||||
symbol: 'diamond',
|
|
||||||
symbolOffset: [0, '50%'],
|
|
||||||
symbolSize: [12, 6],
|
|
||||||
itemStyle: { color: this.dataList[0].bottomColor },
|
|
||||||
data: this.dataList[0].data
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
console.log(this.series)
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 10,
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#213259', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: this.nameList
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#213259', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: this.series
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zwq
|
|
||||||
* @Date: 2022-01-21 14:27:34
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-21 15:55:08
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="top-radio-group" style="width:100%;text-align:center;">
|
|
||||||
<el-radio-group v-model="radioModel" size="mini" @change="handleChange">
|
|
||||||
<el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
|
|
||||||
{{ item.name }}
|
|
||||||
</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'TopRadioGroup',
|
|
||||||
props: {
|
|
||||||
dateType: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
radioList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [{ value: '0', name: '当天' }, { value: '1', name: '本周' }, { value: '2', name: '本月' }]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
radioModel: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.radioModel = this.dateType
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange(v) {
|
|
||||||
this.$emit('change-time-range', v)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.top-radio-group >>> .el-radio-group {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-radio-group >>> .el-radio-button {
|
|
||||||
flex: 1 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-radio-group >>> .el-radio-button__inner {
|
|
||||||
padding: 4px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-radio-button__inner {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
background: #133648;
|
|
||||||
padding: 3px 2em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: -0.5em;
|
|
||||||
color: white;
|
|
||||||
line-height: 14px;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
||||||
background: #3eb0ae;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-23 00:14:53
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<el-row class="util-chart">
|
|
||||||
<el-col :span="20" class="chart-main-box">
|
|
||||||
<div class="chart-main">
|
|
||||||
<div class="chart-cover" :style="{width: percent + '%', backgroundImage: `linear-gradient(to right, ${leftColor}, ${rightColor})`}" />
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" :offset="1">
|
|
||||||
{{ percent }}%
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UtilChart',
|
|
||||||
props: {
|
|
||||||
percent: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 0
|
|
||||||
},
|
|
||||||
leftColor: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'rgba(18, 149, 255, 1)'
|
|
||||||
},
|
|
||||||
rightColor: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'rgba(157, 213, 255, 1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.util-chart{
|
|
||||||
width: 100%;
|
|
||||||
.chart-main-box {
|
|
||||||
position: relative;
|
|
||||||
height: 1em;
|
|
||||||
.chart-main {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(30, 45, 69, 1);
|
|
||||||
border-radius: 1em;
|
|
||||||
.chart-cover {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-23 00:14:53
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<el-row class="base-footer-container" :style="{height: 36 + 'px'}">
|
|
||||||
<el-col v-for="item in footerList" :key="item" :span="4" class="base-footer-item" :style="{lineHeight: 36 + 'px', fontSize: 18 + 'px'}" :class="check === item ? 'isActive' : ''" @click.native="handleCheck(item)">
|
|
||||||
{{ item }}
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseFooter',
|
|
||||||
props: {
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
footerList: ['钢1线', '钢2线', '钢3线', '钢4线', '钢5线', '钢6线'],
|
|
||||||
check: '钢1线'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleCheck(name) {
|
|
||||||
this.check = name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.base-footer-container{
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
.base-footer-item {
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
background: rgba($color: #133648, $alpha: 0.29);
|
|
||||||
}
|
|
||||||
.isActive {
|
|
||||||
background: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.isActive::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: 0;
|
|
||||||
height:0;
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
transform-origin: 50% 100% 0;
|
|
||||||
transform: perspective(40px) rotateX(45deg);
|
|
||||||
background-image: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-03-25 16:54:49
|
* @LastEditTime: 2024-03-26 09:23:44
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -135,14 +135,14 @@ import baseContainer from './components/baseContainer'
|
|||||||
import baseTable1 from './components/baseTable'
|
import baseTable1 from './components/baseTable'
|
||||||
// import baseTable2 from './components/baseTable'
|
// import baseTable2 from './components/baseTable'
|
||||||
// import baseTable3 from './components/baseTable'
|
// import baseTable3 from './components/baseTable'
|
||||||
import TopRadioGroup from './components/topRadioGroup'
|
// import TopRadioGroup from './components/topRadioGroup'
|
||||||
// import pieChart1 from './components/PieChart'
|
// import pieChart1 from './components/PieChart'
|
||||||
// import pieChart2 from './components/PieChart'
|
// import pieChart2 from './components/PieChart'
|
||||||
// import pieChart3 from './components/PieChart'
|
// import pieChart3 from './components/PieChart'
|
||||||
// import { mapGetters } from 'vuex'
|
// import { mapGetters } from 'vuex'
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
// import BaseVideo from './components/baseVideo.vue'
|
// import BaseVideo from './components/baseVideo.vue'
|
||||||
import alarmLevel from './components/alarmLevel'
|
// import alarmLevel from './components/alarmLevel'
|
||||||
// import axios from '@/utils/request'
|
// import axios from '@/utils/request'
|
||||||
import doubleYChart from './components/doubleYChart '
|
import doubleYChart from './components/doubleYChart '
|
||||||
// import elementResizeDetectorMaker from 'element-resize-detector';
|
// import elementResizeDetectorMaker from 'element-resize-detector';
|
||||||
@ -514,7 +514,7 @@ export default {
|
|||||||
baseTable1,
|
baseTable1,
|
||||||
// baseTable2,
|
// baseTable2,
|
||||||
// baseTable3,
|
// baseTable3,
|
||||||
TopRadioGroup,
|
// TopRadioGroup,
|
||||||
doubleYChart,
|
doubleYChart,
|
||||||
LinearBarChart
|
LinearBarChart
|
||||||
// pieChart1,
|
// pieChart1,
|
||||||
|
|||||||
@ -1,99 +0,0 @@
|
|||||||
@import './variables.scss';
|
|
||||||
|
|
||||||
@mixin colorBtn($color) {
|
|
||||||
background: $color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $color;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-btn {
|
|
||||||
@include colorBtn($blue)
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-blue-btn {
|
|
||||||
@include colorBtn($light-blue)
|
|
||||||
}
|
|
||||||
|
|
||||||
.red-btn {
|
|
||||||
@include colorBtn($red)
|
|
||||||
}
|
|
||||||
|
|
||||||
.pink-btn {
|
|
||||||
@include colorBtn($pink)
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-btn {
|
|
||||||
@include colorBtn($green)
|
|
||||||
}
|
|
||||||
|
|
||||||
.tiffany-btn {
|
|
||||||
@include colorBtn($tiffany)
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow-btn {
|
|
||||||
@include colorBtn($yellow)
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-btn {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
padding: 14px 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
transition: 600ms ease all;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
width: 100%;
|
|
||||||
transition: 600ms ease all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 2px;
|
|
||||||
width: 0;
|
|
||||||
transition: 400ms ease all;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
right: inherit;
|
|
||||||
top: inherit;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-button {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
color: #fff;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
@ -1,173 +0,0 @@
|
|||||||
// cover some element-ui styles
|
|
||||||
|
|
||||||
.el-breadcrumb__inner,
|
|
||||||
.el-breadcrumb__inner a {
|
|
||||||
font-weight: 400 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload {
|
|
||||||
input[type="file"] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload__input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
.el-tag {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-container {
|
|
||||||
.el-table {
|
|
||||||
.cell {
|
|
||||||
line-height: 1.2em !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-container {
|
|
||||||
.el-table th>.cell {
|
|
||||||
color: rgb(0, 0, 0,0.85);
|
|
||||||
}
|
|
||||||
.el-table__body tr.current-row>td {
|
|
||||||
background-color: #EAF1FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.el-table--medium th, .el-table--medium td {
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-table__fixed-right {
|
|
||||||
right: 0 !important;
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
.el-button--mini {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
.small-padding {
|
|
||||||
.cell {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-width {
|
|
||||||
.el-button--mini {
|
|
||||||
padding: 7px 10px;
|
|
||||||
min-width: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-col {
|
|
||||||
.cell {
|
|
||||||
padding: 0 10px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.el-tag {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--primary {
|
|
||||||
background-color: #0B58FF !important;
|
|
||||||
border-color: #0B58FF !important;
|
|
||||||
}
|
|
||||||
// to fixed https://github.com/ElemeFE/element/issues/2461
|
|
||||||
.el-dialog {
|
|
||||||
transform: none;
|
|
||||||
left: 0;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__header {
|
|
||||||
padding: 12px 24px 8px;
|
|
||||||
border-bottom: 1px solid #E9E9E9;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item__label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__headerbtn {
|
|
||||||
top: 16px;
|
|
||||||
right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item--medium .el-form-item__label {
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--medium {
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-select {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-switch.is-checked .el-switch__core {
|
|
||||||
background-color: #0B58FF;
|
|
||||||
border-color: #0B58FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-radio__input.is-checked .el-radio__inner {
|
|
||||||
background-color: #0B58FF;
|
|
||||||
border-color: #0B58FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--text{
|
|
||||||
color:#0B58FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__item.is-active {
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tooltip__popper.is-dark {
|
|
||||||
max-width: 1100px;
|
|
||||||
}
|
|
||||||
// refine element ui upload
|
|
||||||
.upload-container {
|
|
||||||
.el-upload {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.el-upload-dragger {
|
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// dropdown
|
|
||||||
.el-dropdown-menu {
|
|
||||||
a {
|
|
||||||
display: block
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// fix date-picker ui bug in filter-item
|
|
||||||
.el-range-editor.el-input__inner {
|
|
||||||
display: inline-flex !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// to fix el-date-picker css style
|
|
||||||
.el-range-separator {
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
/**
|
|
||||||
* I think element-ui's default theme color is too light for long-term use.
|
|
||||||
* So I modified the default color and you can modify it to your liking.
|
|
||||||
**/
|
|
||||||
|
|
||||||
/* theme color */
|
|
||||||
$--color-primary: #1890ff;
|
|
||||||
$--color-success: #13ce66;
|
|
||||||
$--color-warning: #ffba00;
|
|
||||||
$--color-danger: #ff4949;
|
|
||||||
// $--color-info: #1E1E1E;
|
|
||||||
|
|
||||||
$--button-font-weight: 400;
|
|
||||||
|
|
||||||
// $--color-text-regular: #1f2d3d;
|
|
||||||
|
|
||||||
$--border-color-light: #dfe4ed;
|
|
||||||
$--border-color-lighter: #e6ebf5;
|
|
||||||
|
|
||||||
$--table-border: 1px solid #dfe6ec;
|
|
||||||
|
|
||||||
/* icon font path, required */
|
|
||||||
$--font-path: "~element-ui/lib/theme-chalk/fonts";
|
|
||||||
|
|
||||||
@import "~element-ui/packages/theme-chalk/src/index";
|
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
|
||||||
:export {
|
|
||||||
theme: $--color-primary;
|
|
||||||
}
|
|
||||||
@ -1,319 +0,0 @@
|
|||||||
@import './variables.scss';
|
|
||||||
@import './mixin.scss';
|
|
||||||
@import './transition.scss';
|
|
||||||
@import './element-ui.scss';
|
|
||||||
@import './sidebar.scss';
|
|
||||||
@import './btn.scss';
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*:before,
|
|
||||||
*:after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-padding {
|
|
||||||
padding: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-content {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:focus,
|
|
||||||
a:active {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:focus,
|
|
||||||
a:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fr {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fl {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr-5 {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl-5 {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inlineBlock {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
&:after {
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
|
||||||
background: #eef1f6;
|
|
||||||
padding: 8px 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: block;
|
|
||||||
line-height: 32px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
||||||
color: #2c3e50;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #337ab7;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: rgb(32, 160, 255);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//main-container全局样式
|
|
||||||
.app-container {
|
|
||||||
margin:0 16px 0;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 16px 16px 0;
|
|
||||||
height: calc(100vh - 134px);
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-container {
|
|
||||||
margin: 30px 50px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 覆盖原有的分页样式-start
|
|
||||||
|
|
||||||
.el-pagination {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next,.el-pagination.is-background .el-pager li {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination__jump {
|
|
||||||
margin-left: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination__sizes {
|
|
||||||
position: absolute;
|
|
||||||
right: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
||||||
background-color: #0B58FF;
|
|
||||||
}
|
|
||||||
.el-pagination .el-select .el-input .el-input__inner {
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
.el-badge__content {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
// 覆盖原有的分页样式-end
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-navbar {
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 20px;
|
|
||||||
transition: 600ms ease position;
|
|
||||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.draft {
|
|
||||||
background: #d0d0d0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.deleted {
|
|
||||||
background: #d0d0d0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-type,
|
|
||||||
.link-type:focus {
|
|
||||||
color: #337ab7;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: rgb(32, 160, 255);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-container {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//refine vue-multiselect plugin
|
|
||||||
.multiselect {
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect--active {
|
|
||||||
z-index: 1000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 业务代码中
|
|
||||||
.content-row {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog {
|
|
||||||
width: 1000px;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 30px 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__wrapper {
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background-color:rgba(144,147,153,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background-color:rgba(144,147,153,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
width: 6px;
|
|
||||||
background: rgba(144,147,153,0);
|
|
||||||
-webkit-border-radius: 2em;
|
|
||||||
-moz-border-radius: 2em;
|
|
||||||
border-radius: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgba(144,147,153,.5);
|
|
||||||
background-clip: padding-box;
|
|
||||||
min-height: 28px;
|
|
||||||
-webkit-border-radius: 2em;
|
|
||||||
-moz-border-radius: 2em;
|
|
||||||
border-radius: 2em;
|
|
||||||
transition: background-color .3s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: rgba(144,147,153,.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据分析单选框样式覆盖
|
|
||||||
|
|
||||||
.app-container{
|
|
||||||
.data-analysis-radio{
|
|
||||||
.el-radio-button__inner {
|
|
||||||
border: 0;
|
|
||||||
padding: 7px 0;
|
|
||||||
margin: 0 15px;
|
|
||||||
}
|
|
||||||
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
|
||||||
background-color: transparent;
|
|
||||||
color: #606266;
|
|
||||||
box-shadow: 0 0 0 0 transparent;
|
|
||||||
border-bottom: 2px solid #0B58FF;
|
|
||||||
}
|
|
||||||
.el-radio-button:first-child .el-radio-button__inner,
|
|
||||||
.el-radio-button:last-child .el-radio-button__inner {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table--group, .el-table--border {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全局loading样式覆盖
|
|
||||||
.el-loading-mask{
|
|
||||||
z-index: 99999;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
input::-webkit-input-placeholder {
|
|
||||||
/* WebKit browsers */
|
|
||||||
font-size:12px;
|
|
||||||
}
|
|
||||||
input::-moz-placeholder {
|
|
||||||
/* Mozilla Firefox 19+ */
|
|
||||||
font-size:12px;
|
|
||||||
}
|
|
||||||
input:-ms-input-placeholder {
|
|
||||||
font-size:12px;
|
|
||||||
}
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
@mixin clearfix {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin scrollBar {
|
|
||||||
&::-webkit-scrollbar-track-piece {
|
|
||||||
background: #d3dce6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #99a9bf;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin relative {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin pct($pct) {
|
|
||||||
width: #{$pct};
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin triangle($width, $height, $color, $direction) {
|
|
||||||
$width: $width/2;
|
|
||||||
$color-border-style: $height solid $color;
|
|
||||||
$transparent-border-style: $width solid transparent;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
@if $direction==up {
|
|
||||||
border-bottom: $color-border-style;
|
|
||||||
border-left: $transparent-border-style;
|
|
||||||
border-right: $transparent-border-style;
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if $direction==right {
|
|
||||||
border-left: $color-border-style;
|
|
||||||
border-top: $transparent-border-style;
|
|
||||||
border-bottom: $transparent-border-style;
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if $direction==down {
|
|
||||||
border-top: $color-border-style;
|
|
||||||
border-left: $transparent-border-style;
|
|
||||||
border-right: $transparent-border-style;
|
|
||||||
}
|
|
||||||
|
|
||||||
@else if $direction==left {
|
|
||||||
border-right: $color-border-style;
|
|
||||||
border-top: $transparent-border-style;
|
|
||||||
border-bottom: $transparent-border-style;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,209 +0,0 @@
|
|||||||
#app {
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
min-height: 100%;
|
|
||||||
transition: margin-left .28s;
|
|
||||||
// margin-left: $sideBarWidth;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-container {
|
|
||||||
transition: width 0.28s;
|
|
||||||
// width: $sideBarWidth !important;
|
|
||||||
// background-color: $menuBg;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
font-size: 0px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1001;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// reset element-ui css
|
|
||||||
.horizontal-collapse-transition {
|
|
||||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-wrapper {
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-scrollbar__bar.is-vertical {
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-scrollbar {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-logo {
|
|
||||||
.el-scrollbar {
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-horizontal {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// menu hover
|
|
||||||
.submenu-title-noDropdown,
|
|
||||||
.el-submenu__title {
|
|
||||||
&:hover {
|
|
||||||
// background-color: $menuHover !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-active>.el-submenu__title {
|
|
||||||
// color: $subMenuActiveText !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
& .el-submenu .el-menu-item {
|
|
||||||
// min-width: $sideBarWidth !important;
|
|
||||||
// background-color: $subMenuBg !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
// background-color: $subMenuHover !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hideSidebar {
|
|
||||||
.sidebar-container {
|
|
||||||
width: 54px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
margin-left: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu-title-noDropdown {
|
|
||||||
padding: 0 !important;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.el-tooltip {
|
|
||||||
padding: 0 !important;
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-submenu {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&>.el-submenu__title {
|
|
||||||
padding: 0 !important;
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-submenu__icon-arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu--collapse {
|
|
||||||
.el-submenu {
|
|
||||||
&>.el-submenu__title {
|
|
||||||
&>span {
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu--collapse .el-menu .el-submenu {
|
|
||||||
// min-width: $sideBarWidth !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// mobile responsive
|
|
||||||
.mobile {
|
|
||||||
.main-container {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-container {
|
|
||||||
transition: transform .28s;
|
|
||||||
// width: $sideBarWidth !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hideSidebar {
|
|
||||||
.sidebar-container {
|
|
||||||
pointer-events: none;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
// transform: translate3d(-$sideBarWidth, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.withoutAnimation {
|
|
||||||
|
|
||||||
.main-container,
|
|
||||||
.sidebar-container {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// when menu collapsed
|
|
||||||
.el-menu--vertical {
|
|
||||||
&>.el-menu {
|
|
||||||
.svg-icon {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
.el-menu-item {
|
|
||||||
&:hover {
|
|
||||||
// you can use $subMenuHover
|
|
||||||
// background-color: $menuHover !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// the scroll bar appears when the subMenu is too long
|
|
||||||
>.el-menu--popup {
|
|
||||||
max-height: 100vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track-piece {
|
|
||||||
background: #d3dce6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #99a9bf;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
// global transition css
|
|
||||||
|
|
||||||
/* fade */
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 0.28s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter,
|
|
||||||
.fade-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* fade-transform */
|
|
||||||
.fade-transform-leave-active,
|
|
||||||
.fade-transform-enter-active {
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-transform-enter {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-transform-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* breadcrumb transition */
|
|
||||||
.breadcrumb-enter-active,
|
|
||||||
.breadcrumb-leave-active {
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-enter,
|
|
||||||
.breadcrumb-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-move {
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-leave-active {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
// base color
|
|
||||||
$blue:#324157;
|
|
||||||
$light-blue:#3A71A8;
|
|
||||||
$red:#C03639;
|
|
||||||
$pink: #E65D6E;
|
|
||||||
$green: #30B08F;
|
|
||||||
$tiffany: #4AB7BD;
|
|
||||||
$yellow:#FEC171;
|
|
||||||
$panGreen: #30B08F;
|
|
||||||
|
|
||||||
// sidebar
|
|
||||||
$menuText:#bfcbd9;
|
|
||||||
$menuActiveText:#409EFF;
|
|
||||||
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
|
||||||
|
|
||||||
$menuBg:#304156;
|
|
||||||
$menuHover:#263445;
|
|
||||||
|
|
||||||
$subMenuBg:#0B253F;
|
|
||||||
$subMenuHover:#001528;
|
|
||||||
|
|
||||||
$sideBarWidth: 248px;
|
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
|
||||||
:export {
|
|
||||||
menuText: $menuText;
|
|
||||||
menuActiveText: $menuActiveText;
|
|
||||||
subMenuActiveText: $subMenuActiveText;
|
|
||||||
// menuBg: $menuBg;
|
|
||||||
menuHover: $menuHover;
|
|
||||||
subMenuBg: $subMenuBg;
|
|
||||||
subMenuHover: $subMenuHover;
|
|
||||||
sideBarWidth: $sideBarWidth;
|
|
||||||
}
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-01-24 15:15:24
|
* @Date: 2024-01-24 15:15:24
|
||||||
* @LastEditTime: 2024-03-22 17:05:51
|
* @LastEditTime: 2024-03-26 09:34:12
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -40,7 +40,7 @@ import inputTable from './inputTable.vue';
|
|||||||
import { getCorePLList } from '@/api/base/coreProductionLine';
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
export default {
|
export default {
|
||||||
components: { inputTable },
|
components: { inputTable },
|
||||||
data() {
|
data() {
|
||||||
@ -223,12 +223,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -247,6 +248,9 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -30,7 +30,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
|
|||||||
import inputTable from './inputTable.vue';
|
import inputTable from './inputTable.vue';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine';
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
export default {
|
export default {
|
||||||
components: { inputTable },
|
components: { inputTable },
|
||||||
data() {
|
data() {
|
||||||
@ -225,12 +225,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -249,6 +250,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -32,7 +32,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
|
|||||||
import inputTable from './inputTable.vue';
|
import inputTable from './inputTable.vue';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine';
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
export default {
|
export default {
|
||||||
components: { inputTable },
|
components: { inputTable },
|
||||||
data() {
|
data() {
|
||||||
@ -288,12 +288,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -312,6 +313,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -27,7 +27,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
|
|||||||
import inputTable from './inputTable.vue';
|
import inputTable from './inputTable.vue';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine';
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
export default {
|
export default {
|
||||||
components: { inputTable },
|
components: { inputTable },
|
||||||
data() {
|
data() {
|
||||||
@ -197,12 +197,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -221,6 +222,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-12 13:45:25
|
* @Date: 2023-12-12 13:45:25
|
||||||
* @LastEditTime: 2024-03-22 09:36:12
|
* @LastEditTime: 2024-03-26 09:41:07
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -177,7 +177,7 @@ import {
|
|||||||
// import Editor from '@/components/Editor';
|
// import Editor from '@/components/Editor';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
// import DialogForm from './dialogForm.vue';
|
// import DialogForm from './dialogForm.vue';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine';
|
import { getCorePLList } from '@/api/base/coreProductionLine';
|
||||||
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
@ -492,12 +492,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -516,6 +517,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// timeSelect() {
|
// timeSelect() {
|
||||||
// // switch (this.queryParams.timeDim) {
|
// // switch (this.queryParams.timeDim) {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-12 13:45:25
|
* @Date: 2023-12-12 13:45:25
|
||||||
* @LastEditTime: 2024-03-22 09:56:14
|
* @LastEditTime: 2024-03-26 09:41:33
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -180,7 +180,7 @@ import moment from 'moment';
|
|||||||
import { parseTime } from '../../core/mixins/code-filter';
|
import { parseTime } from '../../core/mixins/code-filter';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine'
|
import { getCorePLList } from '@/api/base/coreProductionLine'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@ -470,12 +470,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -494,6 +495,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
},
|
},
|
||||||
getCurrentMonthFirst() {
|
getCurrentMonthFirst() {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-12 13:45:25
|
* @Date: 2023-12-12 13:45:25
|
||||||
* @LastEditTime: 2024-03-22 09:47:20
|
* @LastEditTime: 2024-03-26 09:41:51
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -488,12 +488,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -512,6 +513,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
},
|
},
|
||||||
startWeek() {
|
startWeek() {
|
||||||
// console.log(this.weekValue1);
|
// console.log(this.weekValue1);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-12-12 13:45:25
|
* @Date: 2023-12-12 13:45:25
|
||||||
* @LastEditTime: 2024-03-22 09:47:09
|
* @LastEditTime: 2024-03-26 09:42:08
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -185,7 +185,7 @@ import moment from 'moment';
|
|||||||
import { parseTime } from '../../core/mixins/code-filter';
|
import { parseTime } from '../../core/mixins/code-filter';
|
||||||
import { getCorePLList } from '@/api/base/coreProductionLine'
|
import { getCorePLList } from '@/api/base/coreProductionLine'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
// width: 128,
|
// width: 128,
|
||||||
@ -422,12 +422,13 @@ export default {
|
|||||||
// 处理查询参数
|
// 处理查询参数
|
||||||
var xlsxParam = { raw: true };
|
var xlsxParam = { raw: true };
|
||||||
/* 从表生成工作簿对象 */
|
/* 从表生成工作簿对象 */
|
||||||
var wb = XLSX.utils.table_to_book(
|
import('xlsx').then(excel => {
|
||||||
|
var wb = excel.utils.table_to_book(
|
||||||
document.querySelector("#exportTable"),
|
document.querySelector("#exportTable"),
|
||||||
xlsxParam
|
xlsxParam
|
||||||
);
|
);
|
||||||
/* 获取二进制字符串作为输出 */
|
/* 获取二进制字符串作为输出 */
|
||||||
var wbout = XLSX.write(wb, {
|
var wbout = excel.write(wb, {
|
||||||
bookType: "xlsx",
|
bookType: "xlsx",
|
||||||
bookSST: true,
|
bookSST: true,
|
||||||
type: "array",
|
type: "array",
|
||||||
@ -446,6 +447,8 @@ export default {
|
|||||||
if (typeof console !== "undefined") console.log(e, wbout);
|
if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
}
|
}
|
||||||
return wbout;
|
return wbout;
|
||||||
|
//do something......
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// startYear() {
|
// startYear() {
|
||||||
// if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
|
// if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user