Merge branch 'projects/mesxc-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mesxc-test
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-11 15:54:37
|
||||
* @LastEditTime: 2024-01-18 13:59:40
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
@@ -22,12 +22,21 @@
|
||||
</template>
|
||||
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<div v-if="title" class="bar-title" ds>
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||||
{{ time +'-'+ time2 }}
|
||||
</span> -->
|
||||
</div>
|
||||
<!-- <div v-if="true" class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
||||
<slot />
|
||||
</div>
|
||||
@@ -83,21 +92,39 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0,
|
||||
time: null,
|
||||
time2:null
|
||||
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.back);
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
|
||||
// })
|
||||
// console.log(this.$refs.baseContainer.style)
|
||||
},
|
||||
mounted () {
|
||||
this.time = this.format(new Date().setHours(7,0,0));
|
||||
// console.log(time);
|
||||
//前一天时间
|
||||
this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||||
console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||||
},
|
||||
methods: {
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
format(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
var d = time.getDate();
|
||||
var h = time.getHours();
|
||||
var mm = time.getMinutes();
|
||||
var s = time.getSeconds();
|
||||
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
|
||||
},
|
||||
changeTab(num) {
|
||||
this.curIndex = num
|
||||
this.$emit('tabSelect', num)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -198,11 +225,13 @@ export default {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
padding: 0.67em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
// padding: 1em;
|
||||
padding: 1em;
|
||||
flex: 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-08 14:09:05
|
||||
* @LastEditTime: 2024-01-12 14:30:46
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
@@ -110,12 +110,12 @@ export default {
|
||||
},
|
||||
classOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.list
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleHeight: 0/1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
|
||||
292
src/views/OperationalOverview/components/coldDoubleYChart.vue
Normal file
292
src/views/OperationalOverview/components/coldDoubleYChart.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-01-17 15:26:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as 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: 'linearBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
borderRadius: {
|
||||
type: Array,
|
||||
default: () => [9, 9, 0, 0]
|
||||
},
|
||||
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: [{
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 6
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, passRateList, outputNumList) {
|
||||
console.log(nameList, passRateList)
|
||||
let series= [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DD5FF' },
|
||||
{ offset: 0.3, color: '#1295FF' }
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ced1d5',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
}
|
||||
// barBorderRadius: this.borderRadius
|
||||
},
|
||||
barWidth: 12,
|
||||
data: outputNumList
|
||||
},
|
||||
{
|
||||
name: '产线良品率',
|
||||
symbol: 'circle', //变为实心圆
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 209, 96, 0.18)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 234, 153, 0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: passRateList
|
||||
}
|
||||
]
|
||||
// const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
// color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: '1%',
|
||||
right: '20px',
|
||||
data: ['产线产量', '产线良品率'],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
data: nameList
|
||||
},
|
||||
// yAxis: {
|
||||
|
||||
// },
|
||||
yAxis: [
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '良品率/%',
|
||||
nameTextStyle: {// y轴上方单位的颜色
|
||||
color: '#fff',
|
||||
align: "left",
|
||||
},
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ced1d5', // 坐标值得具体的颜色
|
||||
formatter: '{value}%'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
}
|
||||
// type: 'value'
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: colors[0]
|
||||
// }
|
||||
// },
|
||||
},
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '产量/㎡', // y轴上方的单位
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
// fontSize: 10,
|
||||
align: "right",
|
||||
},
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||
formatter: '{value} 片'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
}
|
||||
// type: 'value'
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: colors[1]
|
||||
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
|
||||
// },
|
||||
}
|
||||
],
|
||||
series: series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.productChart{
|
||||
top: -40px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-01-11 15:52:09
|
||||
* @LastEditTime: 2024-01-17 13:56:46
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -70,9 +70,9 @@ export default {
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
@@ -83,6 +83,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, passRateList, outputNumList) {
|
||||
console.log(nameList, passRateList)
|
||||
let series= [
|
||||
{
|
||||
name: '产线产量',
|
||||
@@ -151,11 +152,12 @@ export default {
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
width: 'auto',
|
||||
height: "auto",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
right: '20px',
|
||||
data: ['产线产量', '产线良品率'],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
@@ -281,3 +283,8 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.productChart{
|
||||
top: -40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -173,3 +173,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2023-12-29 16:28:26
|
||||
* @LastEditTime: 2024-01-17 10:09:36
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||
<div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -133,14 +133,17 @@ export default {
|
||||
// }
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// top: '2.5%',
|
||||
// right: '20px',
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top:'80',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
// bottom: '3%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
containLabel: true
|
||||
@@ -213,3 +216,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user