root/screen-lnsh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

error提示

Browse Source
This commit is contained in:
xiangxy
2023-05-30 14:33:51 +08:00
parent 499a6ea256 8983bf908f
commit 656f23743a
3 changed files with 470 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Testscreen.vue
View File

@@ -5,6 +5,8 @@
<p>b: {{b}}</p> <p>b: {{b}}</p>
<p>c: {{c}}</p> <p>c: {{c}}</p>
<p>d: {{d}}</p> <p>d: {{d}}</p>
<p>e: {{ e }}</p>
<p>f: {{ f }}</p>
</div> </div>
</div> </div>
</template> </template>
@@ -17,7 +19,9 @@ export default {
a: '', a: '',
b: '', b: '',
c: '', c: '',
d: '' d: '',
e: '',
f: ''
} }
}, },
mounted () { mounted () {
@@ -29,6 +33,8 @@ export default {
this.b = document.body.clientHeight this.b = document.body.clientHeight
this.c = window.screen.width this.c = window.screen.width
this.d = window.screen.height this.d = window.screen.height
this.e = window.screen.width * window.devicePixelRatio
this.f = window.screen.height * window.devicePixelRatio
} }
} }
</script> </script>

356
src/pages/modules/homepage/one.vue
View File

@@ -127,6 +127,180 @@ export default {
this.setEchart06() this.setEchart06()
}, },
methods: { methods: {
setEchart01 () {
let value = Number(this.finishRate1)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d01')
// if (this.myCharts01 !== '') {
// this.myCharts01.dispose()
// }
if (echart !== null) {
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
},
setEchart02 () {
let value = Number(this.finishRate2)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d02')
// if (this.myCharts02 !== '') {
// this.myCharts02.dispose()
// }
if (echart !== null) {
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
}
},
setEchart03 () { setEchart03 () {
let date = [] let date = []
let data1 = [] let data1 = []
@@ -171,8 +345,8 @@ export default {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 16 fontSize: 16
}, }
rotate: 50 // rotate: 50
}, },
data: date data: date
}, },
@@ -418,8 +592,8 @@ export default {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 16 fontSize: 16
}, }
rotate: 50 // rotate: 50
}, },
data: date data: date
}, },
@@ -736,180 +910,6 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts10.resize() this.myCharts10.resize()
}) })
},
setEchart01 () {
let value = Number(this.finishRate1)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d01')
// if (this.myCharts01 !== '') {
// this.myCharts01.dispose()
// }
if (echart !== null) {
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
},
setEchart02 () {
let value = Number(this.finishRate2)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d02')
// if (this.myCharts02 !== '') {
// this.myCharts02.dispose()
// }
if (echart !== null) {
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
}
} }
} }
} }

569
src/pages/modules/homepage/two.vue
View File

@@ -40,7 +40,7 @@
<div class="item_title fl">成品</div> <div class="item_title fl">成品</div>
<div class="right_1_up_left" style="backgroundImage: none;"> <div class="right_1_up_left" style="backgroundImage: none;">
<div class="echart_d3_wrap"> <div class="echart_d3_wrap">
<div id="echart_02" style="width: 130%; height: 130%; top: -10px;"></div> <div id="echart_02" style="width: 130%; height: 130%; top: -12px;"></div>
</div> </div>
</div> </div>
<div class="right_1_up_right"> <div class="right_1_up_right">
@@ -126,6 +126,288 @@ export default {
this.setEchart06() this.setEchart06()
}, },
methods: { methods: {
setEchart01 () {
let value = Number(this.finishRate1)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d01')
// if (this.myCharts01 !== '') {
// this.myCharts01.dispose()
// }
if (echart !== null) {
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
},
setEchart02 () {
var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0', '#e2bb0e', '#B68845']
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
borderWidth: 10,
shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
}
}
var placeHolderStyle = {
normal: {
color: '#393d50',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#393d50'
}
}
let option = {
// backgroundColor: '#142058',
title: {
text: '库存数',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 14,
color: '#fff'
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: '{b} : <br/>{d}%',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], // 内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
textStyle: {
color: '#fff'
}
},
// legend: {
// orient: 'horizontal',
// icon: 'circle',
// position: 'top',
// top: '0',
// itemGap: 12,
// data: ['入库数', '出库数', '库存数', '04', '05', '06'],
// textStyle: {
// color: '#fff',
// }
// },
series: [
{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: [55, 65],
center: ['50%', '50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label: {
borderRadius: '10'
},
data: [
{
value: 70,
name: '入库数',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[4]
},
{
offset: 1,
color: color[5]
}
])
}
}
},
{
value: 30,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
}
]
},
{
name: 'Line 2',
type: 'pie',
clockWise: true,
radius: [45, 55],
center: ['50%', '50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [
{
value: 80,
name: '出库数',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[2]
},
{
offset: 1,
color: color[3]
}
])
}
}
},
{
value: 20,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
}
]
},
{
name: 'Line 3',
type: 'pie',
clockWise: true,
radius: [35, 45],
center: ['50%', '50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [
{
value: 100,
name: '库存数',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[6]
},
{
offset: 1,
color: color[7]
}
])
}
}
},
{
value: 0,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
}
]
}
]
}
let echart = document.getElementById('echart_02')
// if (this.myCharts02 !== '') {
// this.myCharts02.dispose()
// }
if (echart !== null) {
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
}
},
setEchart03 () { setEchart03 () {
let data1 = [] let data1 = []
let data2 = [] let data2 = []
@@ -833,288 +1115,6 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts10.resize() this.myCharts10.resize()
}) })
},
setEchart01 () {
let value = Number(this.finishRate1)
let title = '%'
let text = '完成率'
let option = {
title: [
{
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 26,
color: '#00D9FF',
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
b: {
fontSize: 16,
color: '#ffffff',
fontFamily: 'SourceHanSansCN',
foontWeight: '700',
padding: [10, 0, 0, 3]
},
c: {
color: '#FFFFFF',
fontSize: 13,
fontWeight: '700',
fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0]
}
}
}
}
],
polar: {
radius: ['75%', '83%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{name: '',
type: 'bar',
roundCap: true,
showBackground: true,
backgroundStyle: {
color: '#0a2543'
},
data: [value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00dfff'
}
}
}
]
}
let echart = document.getElementById('echart_d01')
// if (this.myCharts01 !== '') {
// this.myCharts01.dispose()
// }
if (echart !== null) {
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
}
},
setEchart02 () {
var color = ["#fb734e", "#e32f46", "#94d96c", "#0bbcb7", "#1a9bfc", "#7049f0", "#e2bb0e", "#B68845"];
var dataStyle = {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
shadowBlur: 40,
borderWidth: 10,
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
},
};
var placeHolderStyle = {
normal: {
color: "#393d50",
label: {
show: false,
},
labelLine: {
show: false,
},
},
emphasis: {
color: "#393d50",
},
};
let option = {
// backgroundColor: "#142058",
title: {
text: "库存数",
x: "center",
y: "center",
textStyle: {
fontWeight: "normal",
fontSize: 14,
color: "#fff",
},
},
tooltip: {
trigger: "item",
show: true,
formatter: "{b} : <br/>{d}%",
backgroundColor: "rgba(0,0,0,0.7)", // 背景
padding: [8, 10], //内边距
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
textStyle: {
color: "#fff"
}
},
// legend: {
// orient: "horizontal",
// icon: 'circle',
// position: 'top',
// top: "0",
// itemGap: 12,
// data: ["入库数", "出库数", "库存数", "04", "05", "06"],
// textStyle: {
// color: "#fff",
// },
// },
series: [
{
name: "Line 1",
type: "pie",
clockWise: true,
radius: [50, 60],
center: ["50%", "50%"],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label: {
borderRadius: "10",
},
data: [
{
value: 70,
name: "入库数",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[4],
},
{
offset: 1,
color: color[5],
},
]),
},
},
},
{
value: 30,
name: "",
tooltip: {
show: false,
},
itemStyle: placeHolderStyle,
},
],
},
{
name: "Line 2",
type: "pie",
clockWise: true,
radius: [40, 50],
center: ["50%", "50%"],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [
{
value: 80,
name: "出库数",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[2],
},
{
offset: 1,
color: color[3],
},
]),
},
},
},
{
value: 20,
name: "",
tooltip: {
show: false,
},
itemStyle: placeHolderStyle,
},
],
},
{
name: "Line 3",
type: "pie",
clockWise: true,
radius: [30, 40],
center: ["50%", "50%"],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [
{
value: 100,
name: "库存数",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[6],
},
{
offset: 1,
color: color[7],
},
]),
},
},
},
{
value: 0,
name: "",
tooltip: {
show: false,
},
itemStyle: placeHolderStyle,
},
],
},
],
};
let echart = document.getElementById('echart_02')
// if (this.myCharts02 !== '') {
// this.myCharts02.dispose()
// }
if (echart !== null) {
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
window.addEventListener('resize', () => {
this.myCharts02.resize()
})
}
} }
} }
} }
@@ -1135,7 +1135,8 @@ export default {
padding-left 3px padding-left 3px
.n_body_container .n_body_container
_wh(100%, calc(100% - 84px)) _wh(100%, calc(100% - 84px))
padding 40px 0 20px 54px // padding 40px 0 20px 54px
padding 40px 40px 20px 14px
.n_body_container_wraper .n_body_container_wraper
_wh(100%, 100%) _wh(100%, 100%)
.box1 .box1