mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

projects/mesxc-zhp #161

Closed
zhp wants to merge 119 commits from projects/mesxc-zhp into projects/mes-test
pull from: projects/mesxc-zhp
merge into: mt-fe-group:projects/mes-test
Conversation 0 Commits 119 Files Changed 261 +246 -3
3 changed files with 246 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b62d0e4096 - Show all commits

4
src/views/databoard/components/Container.vue
View File

@@ -90,4 +90,8 @@ export default {
background-position: 0 0;
}
}
.container-body {
flex: 1;
}
</style>

235
src/views/databoard/components/ISRAChart.vue Normal file
View File

@@ -0,0 +1,235 @@
<!--
filename: ISRAChart.vue
author: liubin
date: 2023-12-12 09:05:25
description:
-->
<template>
<div class="isra-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'ISRAChart',
components: {},
props: {},
data() {
return {
chart: null,
option: {
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
tooltip: {
trigger: 'item',
},
title: {
text: 11234,
subtext: '总数',
top: '43%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
lineHeight: 16,
color: '#fff',
},
subtextStyle: {
fontSize: 16,
color: '#fff7',
},
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '85%'],
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
formatter: ({ dataIndex, percent }) => {
// console.log(
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
// percent
// );
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
return `{${styleName}|${percent}%}`;
},
rich: {
a: {
color: '#2760ff',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
b: {
color: '#518eec',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
c: {
color: '#0ee8e4',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
d: {
color: '#ddb523',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
},
},
labelLine: {
show: true,
},
itemStyle: {
borderRadius: 12,
// borderColor: 'transparent',
// borderWidth: 20
},
data: [
{
value: 1048,
name: '缺陷1',
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#2760ff', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#2760ff33', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 735,
name: '缺陷2',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#518eec', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#518eec33', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 580,
name: '缺陷3',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0ee8e4', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 80% 处的颜色
// },
{
offset: 1,
color: '#0ee8e433', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
value: 484,
name: '缺陷4',
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#ddb523', // 0% 处的颜色
},
// {
// offset: 0.6,
// color: 'transparent', // 70% 处的颜色
// },
{
offset: 1,
color: '#ddb52333', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
},
],
},
};
},
mounted() {
this.initChart();
},
activated() {
// this.initChart();
},
computed: {},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
},
};
</script>
<style scoped lang="scss">
.isra-chart {
width: 100%;
height: 100%;
}
</style>

10
src/views/databoard/kiln/IsraCheck.vue
View File

@@ -7,8 +7,10 @@
<template>
<Container name="ISRA缺陷检测" size="middle" style="">
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px">
<div class="f" style="flex: 9"></div>
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
<div class="f" style="flex: 9;">
<ISRAChart />
</div>
<ul
class="legend"
style="
@@ -32,9 +34,11 @@
<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
import ISRAChart from '../components/ISRAChart.vue';
export default {
name: 'IsraCheck',
components: { Container, ShadowRect },
components: { Container, ShadowRect, ISRAChart },
props: {},
data() {
return {};