dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

褓座智慧大屏幕

This commit is contained in:
ljx 2025-03-05 13:19:18 +08:00
parent bbc17ce1c5
commit aed3919aee
14 changed files with 7237 additions and 6942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.eslintrc.js
View File

@ -9,7 +9,39 @@ module.exports = {
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/no-unused-components': 'off',
"indent": "off",
"no-multi-spaces": "off",
"no-trailing-spaces": "off",
"space-before-blocks": "off",
"keyword-spacing": "off",
"space-before-function-paren": "off",
"space-infix-ops": "off",
"no-whitespace-before-property": "off",
"object-curly-spacing": "off",
"array-bracket-spacing": "off",
"computed-property-spacing": "off",
"template-curly-spacing": "off",
"block-spacing": "off",
"spaced-comment": "off",
"space-in-parens": "off",
"no-multiple-empty-lines": "off",
"no-unexpected-multiline": "off",
"no-unreachable": "off",
"no-undef": "off",
"no-unused-vars": "off",
"no-extra-semi": "off",
"semi": "off",
"quotes": "off",
"no-console": "off",
"key-spacing": "off",
"eqeqeq": "off",
'comma-dangle':'off',
'comma-spacing':'off',
'arrow-spacing':'off',
'padded-blocks':'off',
'eol-last':'off'
},
parserOptions: {
parser: 'babel-eslint'

59
src/components/baozuo-demo/CenterCmp.vue
View File

@ -14,21 +14,35 @@
<div class="cc-main-container">
<div class="ccmc-left">
<div class="ccmc-title">
测试数据可视化模型
</div>
<div class="ccmc-items">
<div class="station-info" v-for="(item, index) in leftData" :key="index">
<img :src="item.icon" alt="icon" class="station-icon">
<div class="station-name">{{ item.name }}</div>
<div class="station-value">{{ item.value }}</div>
<div class="station-name">{{ item.name }}</div>
</div>
</div>
</div>
<dv-active-ring-chart class="ccmc-middle" :config="config" />
<div class="ccmc-right">
<div class="ccmc-title">
测试数据可视化模型2
</div>
<!-- <div class="ccmc-items">
<div class="station-info" v-for="(item, index) in rightData" :key="index">
<img :src="item.icon" alt="icon" class="station-icon">
<div class="station-name">{{ item.name }}</div>
<div class="station-value">{{ item.value }}</div>
</div>
</div> -->
<PieChart></PieChart>
</div>
<LabelTag :config="labelConfig" />
@ -38,11 +52,11 @@
<script>
import LabelTag from './LabelTag'
import PieChart from './pieChart.vue'
export default {
name: 'CenterCmp',
components: {
LabelTag
LabelTag,PieChart
},
props: {
dataType: {
@ -135,22 +149,22 @@ export default {
flex-direction: column;
.station-icon {
width: 80px;
height: 80px;
margin-bottom: 18px;
width: 220px;
// height: 80px;
// margin-bottom: 18px;
}
.station-name {
font-size: 16px;
color: #ffffff;
font-size: 25px;
color: #0777e0;
text-align: center;
margin-bottom: 4px;
}
.station-value {
font-size: 20px;
font-size: 30px;
font-weight: bold;
color: #0777e0;
color: #ffffff;
text-align: center;
}
@ -197,12 +211,29 @@ export default {
}
.ccmc-left, .ccmc-right {
position: relative;
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url('./img/bg2.png');
background-repeat: no-repeat;
background-size: contain;
.ccmc-title{
position: absolute;
top: 45px;
left: 120px;
font-size: 32px;
font-weight: bold;
}
.ccmc-items{
width: 100%;
position: absolute;
box-sizing: border-box;
top: 120px;
// left: 50px;
padding:0 80px;
display: flex;
justify-content: space-between;
.station-info {
display: flex;
flex-direction: column;
@ -211,6 +242,8 @@ export default {
}
}
}
.ccmc-left {
margin-top: -100px;
}

BIN
src/components/baozuo-demo/img/bg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/components/baozuo-demo/img/icons/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/components/baozuo-demo/img/icons/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/components/baozuo-demo/img/icons/3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

2
src/components/baozuo-demo/index.vue
View File

@ -4,8 +4,6 @@
<top-header Name="褓座数字化智能工厂制造执行系统(MES)" style="height:5%;" />
<dv-border-box-1 class="main-container" style="height: 50%;">

279
src/components/baozuo-demo/pieChart.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<div id="pie-chart" style="height: 100%;width: 100%;">
<div id="pieId-new" class="pie-chart-container"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'RoseChart',
props: {
pieId: {
type: String,
},
chartData: {
type: Object,
},
dataType: {
}
},
data() {
return {
option: {}
}
},
mounted() {
const { createData } = this
createData()
// setInterval(createData, 100000)
},
methods: {
createData() {
const chartData = [
{
value: 520,
name: "保养台数",
},
{
value: 280,
name: "今天产量",
},
{
value: 100,
name: "直通率",
},
{
value: 100,
name: "今日不良数",
},
{
value: 100,
name: "返工数",
},
{
value: 100,
name: "机芯备料进度",
},
{
value: 100,
name: "盖板备料进度",
},
];
const colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#CA8CCA",
},
{
offset: 1,
color: "#8A2BE2",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FF3333",
},
{
offset: 1,
color: "#FF3333",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#A8AAE5",
},
{
offset: 1,
color: "#BEA3E3",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#F0F4F8",
},
{
offset: 1,
color: "#E5F2A7",
},
]),
'#FF6B35','#2ECC71','#CCD6DD',
];
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
const gap = (1 * sum) / 100;
const pieData1 = [];
const pieData2 = [];
const gapData = {
name: "",
value: gap,
itemStyle: {
color: "transparent",
},
};
for (let i = 0; i < chartData.length; i++) {
pieData1.push({
...chartData[i],
itemStyle: {
borderRadius: 100,
shadowColor: "#2a2a34",
shadowBlur: 5,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: "#2a2a34",
borderWidth: 2,
},
});
pieData1.push(gapData);
pieData2.push({
...chartData[i],
itemStyle: {
borderRadius: 10,
color: colorList[i],
opacity: 0.1,
shadowColor: "#000",
shadowBlur: 1,
shadowOffsetY: 5,
shadowOffsetX: 0,
},
});
pieData2.push(gapData);
}
var myChart = echarts.init(document.getElementById('pieId-new'));
this.option = {
title: [
{
text: sum,
x: "30%",
y: "43%",
textAlign: "center",
textStyle: {
fontSize: "50",
fontWeight: "500",
color: "#98b5d2",
textAlign: "center",
textShadowColor: "#000",
textShadowBlur: "1",
textShadowOffsetX: 2,
textShadowOffsetY: 2,
},
},
{
text: "数据展示",
left: "30%",
top: "52%",
textAlign: "center",
textStyle: {
fontSize: "25",
fontWeight: "400",
color: "#c4c4c4",
textAlign: "center",
textShadowColor: "#000",
textShadowBlur: "1",
textShadowOffsetX: 1,
textShadowOffsetY: 1,
},
},
],
legend: {
right: "10%",
top: 'middle',
align: "left",
width:'200',
// orient: 'vertical',
itemGap: 30,
itemWidth: 20,
itemHeight: 20,
shadowBlur: 10,
shadowOffsetY: 0,
shadowOffsetX: 0,
borderColor: "#2a2a34",
borderWidth: 2,
textStyle: {
color: "#D8DDE3",
rich: {
name: {
verticalAlign: "right",
align: "left",
fontSize: 24,
color: "#D8DDE3",
},
percent: {
padding: [0, 0, 0, 10],
color: "#08e5ff",
fontSize: 25,
fontWeight:'bold'
},
},
},
formatter: (name) => {
const item = chartData.find((i) => {
return i.name === name;
});
//是否计算为百分比
// const p = ((item.value / sum) * 100).toFixed(0);
// return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
// const p = ((item.value / sum) * 100).toFixed(0);
return "{name|" + name + "}" + "{percent|" + item.value + "}";
},
},
color: colorList,
series: [
{
type: "pie",
z: 3,
roundCap: true,
radius: ["44%", "51%"],
center: ["30%", "50%"],
label: {
show: false,
},
labelLine: {
show: false,
},
data: pieData1,
},
{
type: "pie",
z: 2,
radius: ["40%", "55%"],
center: ["30%", "50%"],
label: {
show: false,
},
labelLine: {
show: false,
},
silent: true,
data: pieData2,
},
],
};
myChart.setOption(this.option);
},
},
}
</script>
<style lang="less">
#pie-chart {
box-sizing: border-box;
color: white;
.pie-chart-container {
width: 100%;
height: 100%
}
}
</style>

100
src/components/baozuo-demo/text.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<title>科技蓝饼图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:500px;"></div>
<script>
// 数据配置
const data = [
{ value: 335, name: '数据A' },
{ value: 310, name: '数据B' },
{ value: 234, name: '数据C' },
{ value: 135, name: '数据D' }
];
// 计算总数
const total = data.reduce((sum, item) => sum + item.value, 0);
console.log(echarts)
// 初始化图表
const chart = echarts.init(document.getElementById('main'));
// 配置项
const option = {
// 科技蓝背景
backgroundColor: '#001F3F',
// 图形元素（中间总计）
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'center',
style: {
text: total.toString(),
fill: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
},{
type: 'text',
left: 'center',
top: '55%',
style: {
text: '总计',
fill: '#7EC8E3',
fontSize: 16
}
}]
},
// 颜色配置（科技感配色）
color: ['#00FFFF', '#1E90FF', '#00BFFF', '#7FFFAA'],
// 饼图系列配置
series: [{
type: 'pie',
radius: ['40%', '60%'],
center: ['30%', '50%'], // 饼图靠左
label: { show: false }, // 隐藏默认标签
data: data,
itemStyle: {
borderColor: '#001F3F',
borderWidth: 3
}
}],
// 右侧图例配置
legend: {
orient: 'vertical',
right: '10%',
top: 'center',
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
formatter: (name) => {
const value = data.find(item => item.name === name).value;
return `${name} ${value} (${((value/total)*100).toFixed(1)}%)`;
}
},
// 标题样式
title: {
text: '数据分布图',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 20
}
}
};
chart.setOption(option);
</script>
</body>
</html>

13
src/components/datav/index.vue
View File

@ -2,10 +2,7 @@
<div id="data-view">
<!-- <dv-full-screen-container> -->
<div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
<top-header :Name = "showData.name" :Times = "showData.times"/>
<div class="main-content" v-if="loadingDone">
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
<div class="block-left-right-content">
@ -168,11 +165,7 @@
</div>
<!-- <scroll-board :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
<div class="block-top-bottom-content" style="flex: 1;">
</div>
<div class="block-top-bottom-content" style="flex: 1;"></div>
</div>
<!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
</div>
@ -218,12 +211,12 @@ export default {
},
data () {
return {
Aid:'',
Aid: '',
type: '',
setting: {},
totalData: [],
todayData: [],
notices:[],
notices: [],
showNotices:false,
showData: {
name: '永盛陶瓷智能数据看榜',

BIN
src/img/icons/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/img/icons/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/img/icons/3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

13660
yarn.lock
View File

File diff suppressed because it is too large Load Diff