褓座智慧大屏幕

.eslintrc.js

@@ -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'

src/components/baozuo-demo/CenterCmp.vue

@@ -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;
+    width: 220px;
-    height: 80px;
+    // height: 80px;
-    margin-bottom: 18px;
+    // margin-bottom: 18px;
   }
 
   .station-name {
-    font-size: 16px;
+    font-size: 25px;
-    color: #ffffff;
+    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;
     }

src/components/baozuo-demo/index.vue

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

src/components/baozuo-demo/pieChart.vue

@@ -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>
+  

src/components/baozuo-demo/text.html

@@ -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>

src/components/datav/index.vue

@@ -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 class="block-top-bottom-content" style="flex: 1;"></div>
-           
-           
-          </div>
-          
         </div>
         <!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
       </div>