feat: 图标

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-20 17:47:55
+ * @Last Modified time: 2023-10-23 11:19:55
  */
 
 @import url("../../themes/themes.less");
@@ -323,7 +323,7 @@
 
         .topMsg {
           width: 100%;
-          height: 20%;
+          height: 22%;
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
           /* border-radius: 26px; */
           /* padding: 16px; */
@@ -370,6 +370,24 @@
         }
 
         .center_box {
+          .topMsg_content {
+            width: 100%;
+            height: 100%;
+
+            .eacharView {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              #echarts4,
+              #echarts6 {
+                width: 45%;
+                height: 80%;
+              }
+
+            }
+          }
+
           width: 100%;
           height: 30%;
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
@@ -381,6 +399,7 @@
         .bottomContent {
           width: 100%;
           height: 35%;
+
           .topMsg_content {
             width: 100%;
             height: 100%;
@@ -415,6 +434,27 @@
           margin-right: 5px;
         }
       }
+      .rightContent .bottomContent{
+        width: 100%;
+        height: 28%;
+      }
+
+      .topMsg_content {
+        width: 100%;
+        height: 100%;
+
+        .eacharView {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+
+          #echarts5 {
+            width: 100%;
+            height: 80%;
+          }
+        }
+      }
 
       .bigDivPd {}
 
@@ -460,12 +500,14 @@
         width: 28%;
         height: 88%;
         z-index: 9;
-
+        .topMsg_2 .topMsg_content{
+          height: 80%;
+        }
         .topMsg_2,
         .topMsg_3,
         .topMsg_4 {
           width: 100%;
-          height: 20%;
+          height: 22%;
           margin-bottom: 3%;
         }
 
@@ -600,9 +642,25 @@
 
         .bottomContent {
           height: 30%;
+          width: 100%;
           position: absolute;
           left: 0;
-          bottom: 0;
+          bottom: 5%;
+
+          .topMsg_content {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .eacharView{
+              justify-content: center;
+            }
+            #echarts2 {
+              width: 80%;
+              height: 75%;
+            }
+          }
         }
 
         .center_li {
@@ -808,4 +866,20 @@
   .ant-btn-primary {
     color: #fff !important;
   }
+  #echarts8{
+    width: 50%;
+    height: 80%;
+  }
+  #echarts9 {
+    width: 40%;
+    height: 80%;
+  }
+
+  .leftContent .bottomContent {
+    height: 42%!important;
+    .eacharView {
+      display: flex;
+      align-items: end;
+    }
+  }
 }

src/pages/tqcDataVHome/component/bottomLineForSend.jsx

@@ -0,0 +1,203 @@
+/*
+ * @Author: dayan_hjm 近30天产量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-23 10:34:12
+ */
+
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+
+@withRouter
+
+class BottomLineForSend extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    this.setData();
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts2'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          // formatter:'{c}' ,
+        },
+        grid: {
+          left: '0',
+          top: '30',
+          right: '10',
+          bottom: '-20',
+          containLabel: true
+        },
+        // legend: {
+        //   data: ['字段1', '字段2'],
+        //   right: 'center',
+        //   top: 0,
+        //   textStyle: {
+        //     color: "#fff"
+        //   },
+        //   itemWidth: 12,
+        //   itemHeight: 10,
+        //   // itemGap: 35
+        // },
+
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            rotate: -90,
+            textStyle: {
+              color: "rgba(255,255,255,.6)",
+              fontSize: 12,
+
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)'
+            }
+
+          },
+
+          data: ['17-3', '17-6', '17-9', '17-12', '18-3', '18-6', '18-9', '18-12', '19-3', '19-6', '19-9', '19-12']
+
+        }, {
+
+          axisPointer: { show: false },
+          axisLine: { show: false },
+          position: 'bottom',
+          offset: 20,
+
+
+
+        }],
+
+        yAxis: [{
+          type: 'value',
+          axisTick: { show: false },
+          // splitNumber: 6,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)'
+            }
+          },
+          axisLabel: {
+            formatter: "{value} 吨",
+            textStyle: {
+              color: "rgba(255,255,255,.6)",
+              fontSize: 14,
+            },
+          },
+
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)'
+            }
+          }
+        }],
+        series: [
+          {
+            name: '字段1',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#69FFDE',
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#69ffde5c'
+                }, {
+                  offset: 1,
+                  color: 'rgba(228, 228, 126, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(228, 228, 126, 1)',
+                borderColor: 'rgba(228, 228, 126, .1)',
+                borderWidth: 12
+              }
+            },
+            data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10]
+
+          }, 
+          // {
+          //   name: '字段2',
+          //   type: 'line',
+          //   smooth: true,
+          //   symbol: 'circle',
+          //   symbolSize: 5,
+          //   showSymbol: false,
+          //   lineStyle: {
+
+          //     normal: {
+          //       color: 'rgba(255, 128, 128, 1)',
+          //       width: 2
+          //     }
+          //   },
+          //   areaStyle: {
+          //     normal: {
+          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          //         offset: 0,
+          //         color: 'rgba(255, 128, 128,.2)'
+          //       }, {
+          //         offset: 1,
+          //         color: 'rgba(255, 128, 128, 0)'
+          //       }], false),
+          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
+          //     }
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'rgba(255, 128, 128, 1)',
+          //       borderColor: 'rgba(255, 128, 128, .1)',
+          //       borderWidth: 12
+          //     }
+          //   },
+          //   data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
+          // },
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 200)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts2"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -0,0 +1,254 @@
+/*
+ * @Author: dayan_hjm 库存金额
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-23 10:14:04
+ */
+
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+
+@withRouter
+
+class LeftMenoyView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    this.setData();
+    this.setData2();
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts4'));
+      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
+      var option = {
+
+        grid: {
+          left: '2%',
+          top: '1%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          offset: '7',
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,.6)',
+              fontSize: '14',
+            }
+          },
+          data: ['字段1', '字段2', '字段3', '字段4']
+
+        }, 
+        // {
+        //   axisTick: 'none',
+        //   axisLine: 'none',
+        //   axisLabel: {
+        //     textStyle: {
+        //       color: 'rgba(255,255,255,.6)',
+        //       fontSize: '14',
+        //     }
+        //   },
+        //   data: [1514, 1619, 1623, 1968]
+
+        // }, 
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
+          label: {
+            normal: {
+              show: true,
+              position: 'right',
+              formatter: function (param) {
+                return param.value + '%';
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,.8)',
+                fontSize: '12',
+              }
+            }
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                offset: 0,
+                color: '#03c893'
+              },
+              {
+                offset: 1,
+                color: '#0091ff'
+              }
+              ]),
+              barBorderRadius: 15,
+            }
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,0,0,.2)',
+              barBorderRadius: 15,
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 200)
+  }
+
+  setData2() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts6'));
+      var option = {
+        title: {
+          text: '16%',
+          subtext: '氢氧化锂',
+          x: 'center',
+          y: '40%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 15,
+            lineHeight: 10,
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: 12,
+            lineHeight: 10,
+
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b} : {c} ({d}%)"
+        },
+
+        visualMap: {
+          show: false,
+          min: 500,
+          max: 600,
+          inRange: {
+            //colorLightness: [0, 1]
+          }
+        },
+        series: [{
+          name: '访问来源',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          center: ['50%', '50%'],
+          color: ['rgb(131,249,103)', '#8D93FF', '#2FD2FF', '#FFCE00'], //'#FBFE27','rgb(11,228,96)','#FE5050'
+          data: [{
+            "value": 1924,
+            "name": ""
+          }, {
+            "value": 1055,
+            "name": ""
+          }, {
+            "value": 1532,
+            "name": ""
+          }
+          ].sort(function (a, b) {
+            return a.value - b.value
+          }),
+          roseType: 'radius',
+
+          label: {
+            normal: {
+              formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
+              rich: {
+                c: {
+                  color: 'rgb(241,246,104)',
+                  fontSize: 12,
+                  fontWeight: 'bold',
+                  lineHeight: 5
+                },
+                b: {
+                  color: 'rgb(98,137,169)',
+                  fontSize: 12,
+                  height: 44
+                },
+              },
+            }
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                color: 'rgb(98,137,169)',
+              },
+              smooth: 0.2,
+              length: 10,
+              length2: 20,
+
+            }
+          }
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 200)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbLeftMenoyView"]}>
+        <div id="echarts6"></div>
+        <div id="echarts4"></div>
+      </div>
+    )
+  }
+}
+export default LeftMenoyView;

src/pages/tqcDataVHome/component/moodSendView.jsx

@@ -0,0 +1,155 @@
+/*
+ * @Author: dayan_hjm 月度产量/发货量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-23 09:42:34
+ */
+
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+
+@withRouter
+
+class MoodSendView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    this.setData();
+  }
+
+  setData() {
+    setTimeout(() => {
+      var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
+      var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
+      var yMax = 500;
+      var dataShadow = [];
+      for (var i = 0; i < data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      var option = {
+        title: {
+          text: '',
+          subtext: ''
+        },
+        grid: {
+          x: 40,
+          y: 40,
+          x2: 20,
+          y2: 20,
+
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            /*inside: true,*/
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
+
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            symbol: ['none', 'arrow'],
+            symbolOffset: 12,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          z: 10
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：元',
+          axisLine: {
+            show: true,
+            symbol: ['none', 'arrow'],
+            symbolOffset: 12,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
+            }
+          }
+        },
+
+        dataZoom: [
+          {
+            type: 'inside'
+          }
+        ],
+        series: [
+          { // For shadow
+            type: 'bar',
+            itemStyle: {
+              color: 'rgba(0,0,0,0.05)'
+            },
+            barGap: '-100%',
+            barCategoryGap: '40%',
+            data: dataShadow,
+            animation: false
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: '#0efdff' },
+                  { offset: 0.5, color: '#188df0' },
+                  { offset: 1, color: '#188df0' }
+                ]
+              )
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    { offset: 0, color: '#2378f7' },
+                    { offset: 0.7, color: '#2378f7' },
+                    { offset: 1, color: '#0efdff' }
+                  ]
+                )
+              }
+            },
+            data: data
+          }
+        ]
+      };
+      var myChart = echarts.init(document.getElementById('chartmain'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 200)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbMoodSendView"]}>
+        <div id="chartmain"></div>
+      </div>
+    )
+  }
+}
+export default MoodSendView;

src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -0,0 +1,153 @@
+/*
+ * @Author: dayan_hjm 一次合格率
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-23 10:47:46
+ */
+
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+
+@withRouter
+
+class BottomLineForSend extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    this.setData();
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts5'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+        }, "grid": {
+          "top": "15%",
+          "right": "10%",
+          "bottom": "20",
+          "left": "10%",
+        },
+        legend: {
+          data: ['目标一次及格率', '实际一次及格率'],
+          right: 'center',
+          top: 0,
+          textStyle: {
+            color: "#fff"
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+        },
+        "xAxis": [
+          {
+            "type": "category",
+
+            data: ['2016', '2017', '2018', '2019'],
+            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+            axisLabel: {
+              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
+            },
+
+          },
+        ],
+        "yAxis": [
+          {
+            "type": "value",
+            "name": "单位1",
+            "show": true,
+            axisTick: { show: false },
+            "axisLabel": {
+              "show": true,
+              color: "rgba(255,255,255,.6)"
+
+            },
+            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
+
+          },
+          {
+            "type": "value",
+            "name": "单位2",
+            "show": true,
+            axisTick: { show: false },
+            "axisLabel": {
+              "show": true,
+              formatter: "{value}",
+              color: "rgba(255,255,255,.6)"
+            },
+            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
+            splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
+          },
+        ],
+        "series": [
+          {
+            "name": "目标一次及格率",
+            "type": "line",
+            "yAxisIndex": 1,
+
+            "data": [66, 16.8, 1.33, 12.65],
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#69FFDE",
+
+              }
+            },
+            "smooth": true
+          },
+          {
+            "name": "实际一次及格率",
+            "type": "line",
+            "yAxisIndex": 1,
+
+            "data": [0, 11.48, 18.00, 25.65],
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#FFCE00",
+
+              }
+            },
+            "smooth": true
+          }
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 200)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts5"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/tqcDataVHome/component/rightBottomView.jsx

@@ -0,0 +1,262 @@
+/*
+ * @Author: dayan_hjm 碳排放
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-23 11:12:30
+ */
+
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+
+@withRouter
+
+class RightBottomView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    this.setData();
+    this.setData2();
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts8'));
+      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
+      var option = {
+
+        grid: {
+          left: '2%',
+          top: '1%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          offset: '7',
+          axisLabel: {
+            textStyle: {
+              color: '#69FFDE',
+              fontSize: '16',
+            }
+          },
+          data: ['2020', '2021', '2022']
+
+        }, 
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        legend: {
+          data: '碳排放强度',
+          right: 'center',
+          top: 0,
+          textStyle: {
+            color: "#fff"
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+        },
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: [25, 30, 34],
+          label: {
+            normal: {
+              show: true,
+              position: 'right',
+              formatter: function (param) {
+                return param.value + '%';
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,.8)',
+                fontSize: '12',
+              }
+            }
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                offset: 0,
+                color: '#FFCE00'
+              },
+              {
+                offset: 1,
+                color: '#c8a20494'
+              }
+              ]),
+              barBorderRadius: 15,
+            }
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: [99.5, 99.5, 99.5],
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: '#ffffff24',
+              barBorderRadius: 15,
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 200)
+  }
+
+  setData2() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts9'));
+      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
+      var option = {
+
+        grid: {
+          left: '2%',
+          top: '1%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          offset: '7',
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,.6)',
+              fontSize: '0',
+            }
+          },
+          data: ['字段1', '字段2', '字段3']
+
+        }, 
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: [25, 30, 34],
+          label: {
+            normal: {
+              show: true,
+              position: 'right',
+              formatter: function (param) {
+                return param.value + '%';
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,.8)',
+                fontSize: '12',
+              }
+            }
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                offset: 0,
+                color: '#03c893'
+              },
+              {
+                offset: 1,
+                color: '#0091ff'
+              }
+              ]),
+              barBorderRadius: 15,
+            }
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: [99.5, 99.5, 99.5],
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: '#ffffff24',
+              barBorderRadius: 15,
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 200)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbRightBottomView"]}>
+        <div id="echarts9"></div>
+        {/* <div className="fonts">
+
+        </div> */}
+        <div id="echarts8"></div>
+      </div>
+    )
+  }
+}
+export default RightBottomView;

src/pages/chaBaiDaohome/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2022-10-27 11:40:02 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-20 17:44:10
+ * @Last Modified time: 2023-10-23 10:55:59
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -26,7 +26,7 @@ import {
   deleteById,
   insertSysComresourceAccountRelationEntityNew,
   getAccountAllCareResource,
-  getLoginUserFineResourceTree
+  getLoginUserFineResourceTreebottomLineForSend
 } from "@apis/work";
 import { cloneDeep, get } from 'lodash'
 import {
@@ -41,6 +41,11 @@ import {
   StarFilled,
 } from "@ant-design/icons";
 import ModelBox from "@components/modelBox/view.jsx";
+import BottomLineForSend from "./component/bottomLineForSend.jsx";
+import MoodSendView from "./component/moodSendView.jsx";
+import LeftMenoyView from "./component/leftMenoyView.jsx";
+import RightBottomView from "./component/rightBottomView.jsx";
+import OneQualified from "./component/oneQualified.jsx";
 
 @withRouter
 
@@ -71,121 +76,6 @@ class Home extends Component {
     setTimeout(()=>{
       $(".shu1").numScroll();
     },200)
-    setTimeout(()=>{
-      var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
-      var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
-      var yMax = 500;
-      var dataShadow = [];
-      for (var i = 0; i < data.length; i++) {
-        dataShadow.push(yMax);
-      }
-      var	option = {
-        title: {
-          text: '',
-          subtext: ''
-        },
-        grid:{
-          x:40,
-          y:40,
-          x2:20,
-          y2:20,
-  
-        },
-        xAxis: {
-          data: dataAxis,
-          axisLabel: {
-            /*inside: true,*/
-            interval:0,
-            textStyle: {
-              color: '#fff',
-              fontSize: 12
-  
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            symbol:['none', 'arrow'],
-            symbolOffset: 12,
-            lineStyle:{
-              color: '#fff',
-            }
-          },
-          z: 10
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位：元',
-          axisLine: {
-            show: true,
-            symbol: ['none', 'arrow'],
-            symbolOffset: 12,
-            lineStyle:{
-              color: '#fff',
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#fff',
-              fontSize: 12
-            }
-          }
-        },
-  
-        dataZoom: [
-          {
-            type: 'inside'
-          }
-        ],
-        series: [
-          { // For shadow
-            type: 'bar',
-            itemStyle: {
-              color: 'rgba(0,0,0,0.05)'
-            },
-            barGap: '-100%',
-            barCategoryGap: '40%',
-            data: dataShadow,
-            animation: false
-          },
-          {
-            type: 'bar',
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1,
-                [
-                  {offset: 0, color: '#0efdff'},
-                  {offset: 0.5, color: '#188df0'},
-                  {offset: 1, color: '#188df0'}
-                ]
-              )
-            },
-            emphasis: {
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1,
-                  [
-                    {offset: 0, color: '#2378f7'},
-                    {offset: 0.7, color: '#2378f7'},
-                    {offset: 1, color: '#0efdff'}
-                  ]
-                )
-              }
-            },
-            data: data
-          }
-        ]
-      };
-      var myChart = echarts.init(document.getElementById('chartmain'));
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-  
-    },200)
   }
 
   render() {
@@ -207,13 +97,13 @@ class Home extends Component {
           <div className="center_box">
             <p className="topMsg_title">库存金额</p>
             <div className="topMsg_content">
+              <LeftMenoyView></LeftMenoyView>
             </div>
           </div>
           <div className="bottomContent bigDivPd">
             <p className="topMsg_title">月度产量/发货量</p>
             <div className="topMsg_content">
-            <div id="chartmain"></div>
-
+            <MoodSendView></MoodSendView>
             </div>
           </div>
         </div>
@@ -242,6 +132,7 @@ class Home extends Component {
           <div className="bottomContent">
             <p className="topMsg_title">近30天产量</p>
             <div className="topMsg_content">
+              <BottomLineForSend></BottomLineForSend>
             </div>
           </div>
 
@@ -262,6 +153,7 @@ class Home extends Component {
           <div className="topMsg_2">
             <p className="topMsg_title">一次合格率</p>
             <div className="topMsg_content">
+              <OneQualified></OneQualified>
             </div>
           </div>
 
@@ -274,6 +166,7 @@ class Home extends Component {
           <div className="bottomContent bigDivPd">
             <p className="topMsg_title">碳排放</p>
             <div className="topMsg_content">
+              <RightBottomView></RightBottomView>
             </div>
           </div>
         </div>

src/router/router.js

@@ -13,7 +13,7 @@ import Frame from "@pages/frame/view.jsx";
 import Login from "@pages/login/view.jsx";
 import NotFound from "@pages/notFound/view.jsx";
 import Home from '@pages/home/view.jsx';
-import HomeForchaBaiDao from '@pages/chaBaiDaohome/view.jsx';
+import HomeForchaBaiDao from '@pages/tqcDataVHome/view.jsx';
 import Loading from "@components/Loading/view.jsx";
 import $store from "@store/";
 import { CacheSwitch, CacheRoute } from 'react-router-cache-route';