恒通达数据导入

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-// import datav from './components/baozuo-demo/index.vue' 
+import datav from './components/baozuo-demo/index.vue' 
 // import datav from './components/datav/index.vue' 
-import datav from './components/zidingyi/index.vue' 
+// import datav from './components/zidingyi/index.vue' 
 
 export default {
   name: 'app',

src/components/baozuo-demo/BottomCharts.vue

@@ -29,6 +29,7 @@
 
 <script>
 import LabelTag from './LabelTag'
+import testRes from './test'
 let timer = null;
 export default {
   name: 'BottomCharts',
@@ -228,10 +229,64 @@ export default {
   },
   created() {
     let that = this;
+    this.checkData();
     timer = setInterval(() => {
       that.isChange = !that.isChange
     }, 60000)
   },
+  methods:{
+    checkData(){
+      console.log(testRes)
+      function createProgressCircle(percentage) {
+          let color, content;
+          if (percentage === 0) {
+            color = 'gray';
+            content = '0%';
+            return `
+              <div class="circle-progress" style="border-color: ${color}; ">
+                <div class="circle-content" style="color: ${color}; ">${content}</div>
+              </div>
+            `;
+          } else if (percentage === 100) {
+            color = '#1afa29';
+            content = '√';
+            return `
+            <div class="circle-progress" style="border-color: ${color}; ">
+              <div class="circle-img"></div>
+            </div>
+          `;
+          } else {
+            color = '#08e5ff';
+            content = `${percentage}%`;
+            return `
+            <div class="circle-progress" style="border-color: ${color}; ">
+              <div class="circle-content" style="color: ${color}; ">${content}</div>
+            </div>
+          `;
+          }
+
+
+
+        }
+        
+        let data = testRes.data.yx_v_pgjd.map(item=>{
+          return [
+          item["工单号"],
+          item["产品名称"],
+          item["派工日期"],
+          item["派工数量"],
+          createProgressCircle(item["工序进度"]*100),
+          createProgressCircle(item["进水调节"]*100),
+          createProgressCircle(item["按钮调解"]*100),
+          createProgressCircle(item["桶身调节"]*100),
+          createProgressCircle(item["桶身装底座"]*100),
+          createProgressCircle(item["包装"]*100),
+          item["剩余数量"],
+        ]
+        })
+        this.config4.data = data
+    }
+  },
   beforeDestroy() {
     clearInterval(timer)
   }

src/components/baozuo-demo/CenterCmp.vue

@@ -6,12 +6,11 @@
 
     <div class="cc-details" v-if="dataType == '3'">
       <div style="font-weight: bold;font-size: 40px;">本月总产量</div>
-      <div class="card">1</div>
+      <div class="card">4</div>
-      <div class="card">1</div>
+      <div class="card">8</div>
-      <div class="card">3</div>
+      <div class="card">4</div>
-      <div class="card">3</div>
+      <div class="card">5</div>
-      <div class="card">7</div>
+      <div class="card">4</div>
-      <div class="card">7</div>
     </div>
     <div class="cc-details" v-else>
       <div style="font-weight: bold;font-size: 40px;">本月总产量</div> 
@@ -117,6 +116,9 @@
 import LabelTag from './LabelTag'
 import PieChart from './pieChart.vue'
 import * as echarts from 'echarts';
+import testRes from './test'
+
+console.log(testRes)
 export default {
   name: 'CenterCmp',
   components: {
@@ -138,9 +140,9 @@ export default {
       { icon: require(`@/img/icons/12.png`), name: '派工完成率', value: '92.6%' }
     ];
     const originalLeftData2 = [
-      { icon: require(`@/img/icons/12.png`), name: '派工数量', value: '1120' },
+      { icon: require(`@/img/icons/12.png`), name: '派工数量', value: testRes.data.yx_v_scgdgk[0]["派工数量"] },
-      { icon: require(`@/img/icons/12.png`), name: '未完工数量', value: '600' },
+      { icon: require(`@/img/icons/12.png`), name: '未完工数量', value: testRes.data.yx_v_scgdgk[0]["未完成数量"] },
-      { icon: require(`@/img/icons/12.png`), name: '工单订成率', value: '100%' }
+      { icon: require(`@/img/icons/12.png`), name: '工单订成率', value: testRes.data.yx_v_scgdgk[0]["工单完成率"] }
     ];
 
     const originalRightData = [
@@ -151,10 +153,10 @@ export default {
       { icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
     ];
     const originalRightData2 = [
-      { icon: require(`@/img/icons/12.png`), name: '水件', value: '12000' },
+      { icon: require(`@/img/icons/12.png`), name: '水件', value: testRes.data.yx_v_wwcscdd[0]["水件"] },
-      { icon: require(`@/img/icons/12.png`), name: '排水阀', value: '8000' },
+      { icon: require(`@/img/icons/12.png`), name: '排水阀', value: testRes.data.yx_v_wwcscdd[0]["排水阀"] },
-      { icon: require(`@/img/icons/12.png`), name: '进水阀', value: '6200' },
+      { icon: require(`@/img/icons/12.png`), name: '进水阀', value: testRes.data.yx_v_wwcscdd[0]["进水阀"] },
-      { icon: require(`@/img/icons/12.png`), name: '按钮', value: '3300' }
+      { icon: require(`@/img/icons/12.png`), name: '按钮', value: testRes.data.yx_v_wwcscdd[0]["按钮"] }
     ];
 
 
@@ -199,7 +201,7 @@ export default {
         series: [
           {
             type: 'gauge',
-            data: [ { name: 'itemA', value: 100 } ],
+            data: [ { name: 'itemA', value: testRes.data.yx_v_scgdgk[0]["工单完成率"] } ],
             center: ['50%', '55%'],
             axisLabel: {
               formatter: '{value}%',

src/components/baozuo-demo/LeftChart1.vue

@@ -26,6 +26,8 @@ function getRecentWeekDates() {
 }
 
 import * as echarts from 'echarts';
+import testRes from './test';
+console.log(testRes)
 export default {
   name: 'RoseChart',
   props: {
@@ -178,18 +180,145 @@ export default {
       };
       myChart.setOption(this.option);
     },
-    // randomExtend (minNum, maxNum) {
+    createData2() {
-    //   if (arguments.length === 1) {
+      var myChart = echarts.init(document.getElementById(this.pieId));
-    //     return parseInt(Math.random() * minNum + 1, 10)
+      console.log(myChart)
-    //   } else {
+      this.option = {
-    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+        title: {
-    //   }
+          text: '近一周产量趋势',
+          textStyle: {
+            fontSize:30,
+            fontWight:'bold',
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 20, // 色块宽度
+          itemHeight: 20, // 色块高度
+          itemGap: 40, // 图例之间的间距
+          data:['水件', '进水阀', '排水阀','按钮'],
+          textStyle: {
+            color: '#fff',
+            fontSize:30,
+            fontWight:'bold'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          
+          axisLabel: {
+            fontSize: 35, // 设置 Y 轴字体大小
+            color: '#fff', // 可选：设置字体颜色
+            onZero: false ,// 确保 y 轴不与第一个数据点对齐
+            // 只显示奇数索引的 x 轴标签
+            // formatter: function (value, index) {
+            //     return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
             // }
           },
-  mounted() {
-    const { createData } = this
         
+          data:  testRes.data.yx_v_bzcl1w.map(item=>{return item["日期"]})
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: true, // 显示 y 轴辅助线
+            lineStyle: {
+                type: 'dashed', // 设置为虚线
+                color: '#999', // 虚线颜色
+                width: 2, // 虚线宽度
+                height:1,
+                dashArray: [15, 5]
+            }
+        },
+          axisLabel: {
+            fontSize: 35, // 设置 Y 轴字体大小
+            color: '#fff', // 可选：设置字体颜色
+            // 只显示偶数的 y 轴标签
+            formatter: function (value) {
+                return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
+            }
+          },
+        },
+        series:
+            [
+              {
+                name: '水件',
+                type: 'line',
+                // stack: 'null',
+                smooth: true,
+                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["水件"]}),
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
+              },
+              {
+                name: '进水阀',
+                type: 'line',
+                // stack: 'null',
+                smooth: true,
+                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["进水阀"]}),
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
+              },
+              {
+                name: '排水阀',
+                type: 'line',
+                // stack: 'null',
+                smooth: true,
+                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["排水阀"]}),
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
+              },
+              {
+                name: '按钮',
+                type: 'line',
+                // stack: 'null',
+                smooth: true,
+                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["按钮"]}),
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
+              },
+                    
+                  ]
+            };
+            myChart.setOption(this.option);
+            },
+  },
+  mounted() {
+    const { createData,createData2 } = this
+    if(this.dataType == 3){
+      createData2()
+    }else{
       createData()
+    }
 
     // setInterval(createData, 100000)
   }

src/components/baozuo-demo/LeftChart2.vue

@@ -23,6 +23,8 @@ function getRecentSixMonths() {
 
     return months;
 }
+import testRes from './test';
+console.log(testRes)
 export default {
   name: 'RoseChart',
   props: {
@@ -187,6 +189,141 @@ export default {
       };
       myChart.setOption(this.option);
     },
+    createData2() {
+
+      var myChart = echarts.init(document.getElementById(this.pieId));
+      console.log(myChart)
+      this.option = {
+        title: {
+          text: '近半年产量情况',
+          // subtext: '完成率',
+          // subtextStyle:{
+          //   fontSize:20,
+          //   fontWight:'bold',
+          //   color:'#fff'
+          // },
+
+          textStyle:{
+            fontSize:30,
+            fontWight:'bold',
+            color:'#fff'
+          }
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 20, // 色块宽度
+          itemHeight: 20, // 色块高度
+          itemGap: 40, // 图例之间的间距
+          data:['水件', '进水阀', '排水阀','按钮'],
+          textStyle: {
+            color: '#fff',
+            fontSize:30,
+            fontWight:'bold'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        toolbox: { 
+        },
+        calculable: true,
+        xAxis:[
+        {
+            type: 'category',
+            axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
+            axisLabel: {
+            fontSize: 30, // 设置 Y 轴字体大小
+            color: '#fff' // 可选：设置字体颜色
+          },
+            // prettier-ignore
+            data:getRecentSixMonths(),
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
+            axisLabel: {
+            fontSize: 30, // 设置 Y 轴字体大小
+            color: '#fff' // 可选：设置字体颜色
+          },
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '7%',
+          bottom: '3%',
+          containLabel: true
+        },
+        series:[
+          {
+            name: '水件',
+            type: 'bar',
+            data: testRes.data.yx_v_bzcl6m.map(item=>{return item["水件"]}),
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
+          },
+          {
+            name: '进水阀',
+            type: 'bar',
+            data: testRes.data.yx_v_bzcl6m.map(item=>{return item["进水阀"]}),
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
+          },
+          {
+            name: '排水阀',
+            type: 'bar',
+            data: testRes.data.yx_v_bzcl6m.map(item=>{return item["排水阀"]}),
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
+          },
+          {
+            name: '按钮',
+            type: 'bar',
+            data: testRes.data.yx_v_bzcl6m.map(item=>{return item["按钮"]}),
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
+          }
+        ],
+      };
+      myChart.setOption(this.option);
+      },
     // randomExtend (minNum, maxNum) {
     //   if (arguments.length === 1) {
     //     return parseInt(Math.random() * minNum + 1, 10)
@@ -196,10 +333,12 @@ export default {
     // }
   },
   mounted() {
-    const { createData } = this
+    const { createData,createData2 } = this
-
+    if(this.dataType == 3){
+      createData2()
+    }else{
       createData()
-
+    }
     // setInterval(createData, 100000)
   }
 }

src/components/baozuo-demo/pieChart.vue

@@ -36,6 +36,8 @@
   
   <script>
   import * as echarts from 'echarts';
+  import testRes from './test'
+  console.log(testRes)
   export default {
     name: 'RoseChart',
     props: {
@@ -108,37 +110,37 @@
     if(dataTypeParam == '3'){
       this.config.data = [
             {
-            value: 520,
+            value:testRes.data.yx_v_byzcl[0]["水件"],
             name: "水件",
             },
             {
-            value: 280,
+            value: testRes.data.yx_v_byzcl[0]["排水阀"],
             name: "排水阀",
             },
             {
-            value: 100,
+            value: testRes.data.yx_v_byzcl[0]["进水阀"],
             name: "进水阀",
             },
             {
-            value: 100,
+            value: testRes.data.yx_v_byzcl[0]["按钮"],
             name: "按钮",
             },
         ];
       this.testchartData = [
       {
-            value: 520,
+            value:testRes.data.yx_v_byzcl[0]["水件"],
             name: "水件",
             },
             {
-            value: 280,
+            value: testRes.data.yx_v_byzcl[0]["排水阀"],
             name: "排水阀",
             },
             {
-            value: 100,
+            value: testRes.data.yx_v_byzcl[0]["进水阀"],
             name: "进水阀",
             },
             {
-            value: 100,
+            value: testRes.data.yx_v_byzcl[0]["按钮"],
             name: "按钮",
             },
         ];