style: style

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: 2024-10-14 17:23:10
+ * @Last Modified time: 2024-10-16 17:08:51
  */
 
 @import url("../../themes/themes.less");
@@ -527,13 +527,13 @@
               }
 
 
-              #echarts4,
+              #echarts4,#echarts41,
               #echarts6_box {
                 width: 45%;
                 height: 90%;
               }
 
-              #echarts4 {
+              #echarts4,#echarts41 {
                 width: 55%;
               }
 
@@ -568,7 +568,7 @@
                   }
                 }
 
-                #echarts6 {
+                #echarts6,#echarts61 {
                   width: 100%;
                   height: 100%;
                 }
@@ -604,7 +604,7 @@
             align-items: center;
             justify-content: center;
 
-            #chartmain {
+            #chartmain,#chartmain2 {
               min-width: 300px;
               width: 90%;
               height: 100%;
@@ -649,7 +649,7 @@
           display: flex;
           align-items: center;
 
-          #echarts5 {
+          #echarts5,#echarts51 {
             min-width: 400px;
             width: 100%;
             height: 80%;
@@ -928,7 +928,7 @@
               justify-content: center;
             }
 
-            #echarts2 {
+            #echarts2,#echarts21 {
               min-width: 600px;
               width: 95%;
               height: 90%;

src/pages/gvc/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm  产供销价值链
  * @Date: 2023-11-10 10:19:34 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-08-14 16:41:44
+ * @Last Modified time: 2024-10-16 17:00:24
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -387,9 +387,9 @@ class Gvc extends Component {
           window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
         }
         {/* 右键切换大屏 */}
-        <Tooltip placement="bottom" title={"数据运营中心"}>
+        <Tooltip placement="bottom" title={"TLK运营数据中心 / TLK Plant Dashboard"}>
           <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
-            deleteCacheAndChangeUrl("/home/operation", (url) => {
+            deleteCacheAndChangeUrl("/home/tlk", (url) => {
               this.props.history.replace(url);
             })
 

src/pages/tlk/component/bottomLineForSend.jsx

@@ -51,7 +51,7 @@ class BottomLineForSend extends Component {
   setData() {
     setTimeout(() => {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echarts2'));
+      var myChart = echarts.init(document.getElementById('echarts21'));
 
       var option = {
         tooltip: {
@@ -136,10 +136,10 @@ class BottomLineForSend extends Component {
             },
           },
           axisLabel: {
-            formatter: "{value} 吨",
+            formatter: "{value}t",
             textStyle: {
               color: '#7d7d7d',
-              fontSize: 13
+              fontSize: 11
             },
           },
 
@@ -237,7 +237,7 @@ class BottomLineForSend extends Component {
 
     return (
       <div className={["eacharView cbBottomLineForSend"]}>
-        <div id="echarts2"></div>
+        <div id="echarts21"></div>
       </div>
     )
   }

src/pages/tlk/component/leftMenoyView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 库存金额
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 16:31:03
+ * @Last Modified time: 2024-10-16 16:54:35
  */
 
 
@@ -24,12 +24,12 @@ class LeftMenoyView extends Component {
     super(props, context);
     this.store = mod;
     this.state = {
-      max1:[],
-      year:["氢氧化锂（电池级）/ LHM(BG)","氢氧化锂（工业级）/ LHM(PG)",'氢氧化锂（待检验）/ LHM(PENDING)'],
-      missionsIntensity_arr:[
-        {value:0,name:"氢氧化锂（电池级）/ LHM(BG)"},
-        {value:0,name:"氢氧化锂（工业级）/ LHM(PG)"},
-        {value:0,name:'氢氧化锂（待检验）/ LHM(PENDING)'},
+      max1: [],
+      year: ["氢氧化锂（电池级）/ LHM(BG)", "氢氧化锂（工业级）/ LHM(PG)", '氢氧化锂（待检验）/ LHM(PENDING)'],
+      missionsIntensity_arr: [
+        { value: 0, name: "氢氧化锂（电池级）/ LHM(BG)" },
+        { value: 0, name: "氢氧化锂（工业级）/ LHM(PG)" },
+        { value: 0, name: '氢氧化锂（待检验）/ LHM(PENDING)' },
       ],
     };
   }
@@ -39,116 +39,116 @@ class LeftMenoyView extends Component {
   }
 
   async getUrl() {
-    let data_style= [{
-            value: 25, name: '', itemStyle: {
-              normal: {
-                // barBorderRadius: 15,
-                // borderColor: "rgba(141, 147, 255, 1)",
-                // borderWidth: 1,
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#8D93FF', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: '#8D93FF', // 100% 处的颜色
-                    },
-                  ],
-                },
+    let data_style = [{
+      value: 25, name: '', itemStyle: {
+        normal: {
+          // barBorderRadius: 15,
+          // borderColor: "rgba(141, 147, 255, 1)",
+          // borderWidth: 1,
+          color: {
+            // 完成的圆环的颜色
+            colorStops: [
+              {
+                offset: 0,
+                color: '#8D93FF', // 0% 处的颜色
               },
-            },
-
-          }, {
-            value: 33, name: '', itemStyle: {
-              normal: {
-                // barBorderRadius: 15,
-                // borderColor: "rgba(105, 255, 222, 1)",
-                // borderWidth: 1,
-
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#FFCE00', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: '#FFCE00', // 100% 处的颜色
-                    },
-                  ],
-                },
+              {
+                offset: 1,
+                color: '#8D93FF', // 100% 处的颜色
               },
-            },
-
-          }, {
-            value: 35, name: '', itemStyle: {
-              normal: {
-                // barBorderRadius: 15,
-                // borderColor: "rgba(47, 210, 255, 1)",
-                // borderWidth: 1,
-
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#69FFDE', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: '#69FFDE', // 100% 处的颜色
-                    },
-                  ],
-                },
+            ],
+          },
+        },
+      },
+
+    }, {
+      value: 33, name: '', itemStyle: {
+        normal: {
+          // barBorderRadius: 15,
+          // borderColor: "rgba(105, 255, 222, 1)",
+          // borderWidth: 1,
+
+          color: {
+            // 完成的圆环的颜色
+            colorStops: [
+              {
+                offset: 0,
+                color: '#FFCE00', // 0% 处的颜色
               },
-            },
-
-          }, {
-            value: 40, name: '', itemStyle: {
-              normal: {
-                // barBorderRadius: 15,
-                // borderColor: "rgba(255, 206, 0, 1)",
-                // borderWidth: 1,
-
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#8D93FF', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: '#8D93FF', // 100% 处的颜色
-                    },
-                  ],
-                },
+              {
+                offset: 1,
+                color: '#FFCE00', // 100% 处的颜色
               },
-            },
+            ],
+          },
+        },
+      },
+
+    }, {
+      value: 35, name: '', itemStyle: {
+        normal: {
+          // barBorderRadius: 15,
+          // borderColor: "rgba(47, 210, 255, 1)",
+          // borderWidth: 1,
+
+          color: {
+            // 完成的圆环的颜色
+            colorStops: [
+              {
+                offset: 0,
+                color: '#69FFDE', // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#69FFDE', // 100% 处的颜色
+              },
+            ],
+          },
+        },
+      },
+
+    }, {
+      value: 40, name: '', itemStyle: {
+        normal: {
+          // barBorderRadius: 15,
+          // borderColor: "rgba(255, 206, 0, 1)",
+          // borderWidth: 1,
+
+          color: {
+            // 完成的圆环的颜色
+            colorStops: [
+              {
+                offset: 0,
+                color: '#8D93FF', // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#8D93FF', // 100% 处的颜色
+              },
+            ],
+          },
+        },
+      },
 
-          }]
+    }]
     await momeyService().then(({ data = [], resultCode }) => {
-      
+
       if (+resultCode === 0) {
-        let year = [], missionsIntensity_arr = [],max1=[],num=[];
+        let year = [], missionsIntensity_arr = [], max1 = [], num = [];
         data.map((x, i) => {
-          if(i > 2){return}
+          if (i > 2) { return }
           num.push(x.indexValue)
           // year.unshift(x.prodCatgory);
           data_style[i].value = x.indexValue;
-          data_style[i].name =  this.state.year[i]// x.prodCatgory;
+          data_style[i].name = this.state.year[i]// x.prodCatgory;
           missionsIntensity_arr.push(data_style[i])
         });
         const max_1 = getArrMax(num);
         for (let index = 0; index < data.length; index++) {
-          if(index > 2){break}
-          max1.unshift(max_1/0.7)
+          if (index > 2) { break }
+          max1.unshift(max_1 / 0.7)
         }
-        this.setState({  missionsIntensity_arr,max1 });
+        this.setState({ missionsIntensity_arr, max1 });
         this.setData();
         this.setData2();
       }
@@ -160,7 +160,7 @@ class LeftMenoyView extends Component {
   setData() {
     setTimeout(() => {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echarts4'));
+      var myChart = echarts.init(document.getElementById('echarts41'));
       var option = {
 
         grid: {
@@ -271,110 +271,88 @@ class LeftMenoyView extends Component {
   }
 
   setData2() {
+    var data = [
+      {
+        value: 55, name: '氢氧化锂（电池级）/ LHM(BG)', itemStyle: {
+          borderRadius: '30%',
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+              offset: 0,
+              color: 'rgba(105, 255, 222, 0.3)'
+            }, {
+              offset: 1,
+              color: 'rgba(105, 255, 222, 1)'
+            }]),
+          }
+        }
+      },
+      {
+        value: 38, name: '氢氧化锂（工业级）/ LHM(PG)', itemStyle: {
+          borderRadius: '30%',
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+              offset: 0,
+              color: 'rgba(141, 147, 255, 0.3)'
+            }, {
+              offset: 1,
+              color: 'rgba(141, 147, 255, 1)'
+            }]),
+          }
+        }
+      },
+      {
+        value: 32, name: '油氢氧化锂（待检验）/ LHM(PENDING)', itemStyle: {
+          borderRadius: '30%',
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+              offset: 0,
+              color: 'rgba(255, 206, 0, 0.3)'
+            }, {
+              offset: 1,
+              color: 'rgba(255, 206, 0, 1)'
+            }]),
+          }
+        }
+      },
+    ];
+
     setTimeout(() => {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echarts6'));
-      let index = 0;
-      function fun() {
-        var timer = setInterval(function () {
-          myChart.dispatchAction({
-            type: 'hideTip',
-            seriesIndex: 0,
-            dataIndex: index,
-          });
-          // 显示提示框
-          myChart.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 0,
-            dataIndex: index,
-          });
-          // 取消高亮指定的数据图形
-          myChart.dispatchAction({
-            type: 'downplay',
-            seriesIndex: 0,
-            dataIndex: index == 0 ? 3 : index - 1,
-          });
-          myChart.dispatchAction({
-            type: 'highlight',
-            seriesIndex: 0,
-            dataIndex: index,
-          });
-          index++;
-          if (index >= 4) {
-            index = 0;
-          }
-        }, 2000);
-      }
-      // fun();
-      // setTimeout(function () {
-      //   fun();
-      // }, 3000);
+      var myChart = echarts.init(document.getElementById('echarts61'));
       var option = {
-        // //标题
-        // title: {
-        //   text: '16%',
-        //   subtext: '氢氧化锂',
-        //   x: 'center',
-        //   y: '40%',
-        //   textStyle: {
-        //     color: '#fff',
-        //     fontSize: 20,
-        //     lineHeight: 10,
+        // title:{
+        // text: '208768t\n总库存',
+        //     top: '45%',
+        //     textAlign: 'center',
+        //     left: '50%',
+        //     textStyle: {
+        //         color: ' #fff',
+        //         fontSize: 22,
+        //         fontWeight: '600',
+        //         lineHeight: 60,
+        //     },
         //   },
-        //   subtextStyle: {
-        //     color: 'rgba(205, 241, 255, 1)',
-        //     fontSize: 14,
-        //     lineHeight: 10,
-        //     marginTop: 15,
-        //   },
-        // },
-
-        //图例组件
-
-        tooltip: {
-          trigger: 'item',
-          position: ['50%', '50%'],
-          formatter: function (params, ticket, callback) {
-            // $.get('detail?name=' + params.name, function (content) {
-            //   callback(ticket, toHTML(content));
-            // });
-            return `<div class="testDiv"><p class="p1">
-              ${params.percent ? params.percent.toFixed() : 0}<spanp class="p3">%</span>
-            </p>
-            <p class="p2">${params.name}</p>
-            </div>`;
-          },
-          backgroundColor: 'rgba(0,0,0,0)',
-
-          textStyle: {
-            color: '#fff',
-            fontSize: 20,
-            lineHeight: 10,
-          },
-        },
+        calculable: true,
         series: [
           {
             type: 'pie',
             radius: ['50%', '65%'],
             center: ['50%', '50%'],
-            roseType: 'area',
-            //标题与数字一行显示
-            label: {
-              show: false,
+            // roseType: 'radius',
+            data: data,
+            itemStyle: {
+              borderRadius: 70,
             },
             labelLine: {
-              show: false
-            },
-            itemStyle:{
-              borderRadius: 100
+              show: false,
+            }, label: {
+              show: false,
+              position: 'center',
             },
-            data: this.state.missionsIntensity_arr,
           },
         ],
       };
 
-
-
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
       window.addEventListener("resize", function () {
@@ -395,16 +373,23 @@ class LeftMenoyView extends Component {
             class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
           />
 
-          <div id="echarts6"></div>
+          <div id="echarts61"></div>
+          <div className="text_total">
+              <p>
+                    <span className="topMsg_number" class="shu1">445677</span>
+                    <span className="topMsg_number_2">t</span>
+              </p>
+              <span className="topMsg_number_3">总库存</span>
+          </div>
         </div>
         <ul className={"name_ul"}>
           {
-            this.state.year.map(x=>{
+            this.state.year.map(x => {
               return <li>{x}</li>
             })
           }
         </ul>
-        <div id="echarts4"></div>
+        <div id="echarts41"></div>
       </div>
     )
   }

src/pages/tlk/component/moodSendView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 月度产量/发货量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 15:37:01
+ * @Last Modified time: 2024-10-16 10:56:56
  */
 
 
@@ -80,45 +80,6 @@ class MoodSendView extends Component {
           },
           backgroundColor:"#0000008a"
         },
-        // legend: {
-        //   data: ['发货量', '产量'],
-        //   fontFamily:'DingTalkJinBuTi',
-        //   padding: [25, 0, 0, 10],
-        //   textStyle:{
-        //     color:"#fff"
-        //   },
-        //   itemWidth: 11,
-        //   itemHeight: 11,
-        // },
-        // toolbox: {
-        //   show: true,
-        //   orient: 'vertical',
-        //   left: 'right',
-        //   top: 'center',
-        //   feature: {
-        //     mark: { show: true },
-        //     dataView: { show: true, readOnly: false },
-        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
-        //     restore: { show: true },
-        //     saveAsImage: { show: true }
-        //   }
-        // },
-        //   xAxis: {
-        //     data: dataAxis,
-        //     axisTick: {
-        //       show: false,
-        //     },
-        //     axisLine: {
-        //       show: true,
-        //       symbol: ['none', 'arrow'],
-        //       symbolOffset: 12,
-        //       lineStyle: {
-        //         color: '#fff',
-        //       }
-        //     },
-        //     z: 10
-        //   },
-
         xAxis: [
           {
             type: 'category',
@@ -160,10 +121,10 @@ class MoodSendView extends Component {
             },
             axisTick: { show: false },
             axisLabel: {
-              formatter: "{value}吨",
+              formatter: "{value}t",
               textStyle: {
                 color: '#7d7d7d',
-                fontSize: 12
+                fontSize: 11
               }
             },
             splitLine:{
@@ -203,7 +164,7 @@ class MoodSendView extends Component {
           }
         ]
       }
-      var myChart = echarts.init(document.getElementById('chartmain'));
+      var myChart = echarts.init(document.getElementById('chartmain2'));
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
     }, 3000)
@@ -213,7 +174,7 @@ class MoodSendView extends Component {
 
     return (
       <div className={["eacharView cbMoodSendView"]}>
-        <div id="chartmain"></div>
+        <div id="chartmain2"></div>
       </div>
     )
   }

src/pages/tlk/component/oneQualified.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 一次合格率
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 17:19:34
+ * @Last Modified time: 2024-10-16 10:56:28
  */
 
 
@@ -66,7 +66,7 @@ class BottomLineForSend extends Component {
       var option = {
         grid: {
           left: '2%',
-          top: '18%',
+          top: '30%',
           right: '0%',
           bottom: '0%',
           containLabel: true
@@ -87,45 +87,16 @@ class BottomLineForSend extends Component {
           backgroundColor:"#0000008a"
         },
         legend: {
-          data: ['锂辉石消耗量', '锂辉石计划消耗量','锂辉石计划执行率'],
+          data: ['锂辉石消耗量\n(Spodunene Consumption)', '锂辉石计划消耗量\n(Spodumene Consumption Plan)','锂辉石计划执行率\n(Execution rate of spodumene plan)'],
           fontFamily:'DingTalkJinBuTi',
-          padding: [20, 0, 0, 10],
+          padding: [15, 0, 20, 0],
           textStyle:{
-            color:"#CDF1FF",
-            fontSize:10
+            color: "#CDF1FF",
+            fontSize:9,
           },
-          itemWidth: 8,
-          itemHeight: 8,
+          itemWidth: 6,
+          itemHeight: 6,
         },
-        // toolbox: {
-        //   show: true,
-        //   orient: 'vertical',
-        //   left: 'right',
-        //   top: 'center',
-        //   feature: {
-        //     mark: { show: true },
-        //     dataView: { show: true, readOnly: false },
-        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
-        //     restore: { show: true },
-        //     saveAsImage: { show: true }
-        //   }
-        // },
-        //   xAxis: {
-        //     data: dataAxis,
-        //     axisTick: {
-        //       show: false,
-        //     },
-        //     axisLine: {
-        //       show: true,
-        //       symbol: ['none', 'arrow'],
-        //       symbolOffset: 12,
-        //       lineStyle: {
-        //         color: '#fff',
-        //       }
-        //     },
-        //     z: 10
-        //   },
-
         xAxis: [
           {
             type: 'category',
@@ -167,10 +138,10 @@ class BottomLineForSend extends Component {
             },
             axisTick: { show: false },
             axisLabel: {
-              formatter: "{value}吨",
+              formatter: "{value}t",
               textStyle: {
                 color: '#7d7d7d',
-                fontSize: 12
+                fontSize: 11
               }
             },
             splitLine:{
@@ -192,10 +163,10 @@ class BottomLineForSend extends Component {
             },
             axisTick: { show: false },
             axisLabel: {
-              formatter: "{value}%",
+              formatter: "{value}t",
               textStyle: {
                 color: '#7d7d7d',
-                fontSize: 12
+                fontSize: 11
               }
             },
             splitLine:{
@@ -210,7 +181,7 @@ class BottomLineForSend extends Component {
         ],
         series: [
           {
-            name: '锂辉石计划消耗量',
+            name: '锂辉石计划消耗量\n(Spodumene Consumption Plan)',
             type: 'bar',
             animation:true,
             animationDuration:3000,
@@ -219,27 +190,27 @@ class BottomLineForSend extends Component {
             emphasis: {
               focus: 'series'
             },
-            barWidth: 10,
+            barWidth: 7,
 
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(255, 206, 0, 1)' },
-                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
-                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
+                { offset: 0.7, color: 'rgba(255, 206, 0, 0.5)' },
+                { offset: 1, color: 'rgba(255, 206, 0, 0.2)' },
               ])
             },
 
             data:this.state.proQty
           },
           {
-            name: '锂辉石消耗量',
+            name: '锂辉石消耗量\n(Spodunene Consumption)',
             type: 'bar',
             animation:true,
             animationDuration:3000,
             "smooth": true,
   
             barGap: 0,
-            barWidth: 10,
+            barWidth: 7,
             emphasis: {
               focus: 'series'
             },
@@ -249,8 +220,8 @@ class BottomLineForSend extends Component {
               },
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(105, 255, 222, 1)' },
-                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
-                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
+                { offset: 0.7, color: 'rgba(105, 255, 222, 0.5)' },
+                { offset: 1, color: 'rgba(105, 255, 222, 0.2)' },
               ])
             },
             data: this.state.deliveryQty
@@ -260,7 +231,7 @@ class BottomLineForSend extends Component {
             showAllSymbol: true,
             yAxisIndex: 1,
             symbolSize: 6,
-            name: '锂辉石计划执行率',
+            name: '锂辉石计划执行率\n(Execution rate of spodumene plan)',
             itemStyle: {
                 normal: {
                     color: "#8D93FF",
@@ -269,7 +240,7 @@ class BottomLineForSend extends Component {
         }
         ]
       }
-      var myChart = echarts.init(document.getElementById('echarts5'));
+      var myChart = echarts.init(document.getElementById('echarts51'));
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
     }, 3000)
@@ -279,7 +250,7 @@ class BottomLineForSend extends Component {
 
     return (
       <div className={["eacharView cbBottomLineForSend"]}>
-        <div id="echarts5"></div>
+        <div id="echarts51"></div>
       </div>
     )
   }

src/pages/tlk/component/oneSendView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 月度产量/发货量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 15:36:11
+ * @Last Modified time: 2024-10-16 10:55:36
  */
 
 
@@ -83,43 +83,14 @@ class OneSendView extends Component {
         legend: {
           data: ['预算产量(Monthly Budget)', '产量(Net Production)','计划完成率(Prodction Efflciebcy)'],
           fontFamily:'DingTalkJinBuTi',
-          padding: [10, 0, 0, 10],
+          padding: [15, 0, 0, 0],
           textStyle:{
             color:"#CDF1FF",
-            fontSize:10
+            fontSize:9
           },
-          itemWidth: 8,
-          itemHeight: 8,
+          itemWidth: 6,
+          itemHeight: 6,
         },
-        // toolbox: {
-        //   show: true,
-        //   orient: 'vertical',
-        //   left: 'right',
-        //   top: 'center',
-        //   feature: {
-        //     mark: { show: true },
-        //     dataView: { show: true, readOnly: false },
-        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
-        //     restore: { show: true },
-        //     saveAsImage: { show: true }
-        //   }
-        // },
-        //   xAxis: {
-        //     data: dataAxis,
-        //     axisTick: {
-        //       show: false,
-        //     },
-        //     axisLine: {
-        //       show: true,
-        //       symbol: ['none', 'arrow'],
-        //       symbolOffset: 12,
-        //       lineStyle: {
-        //         color: '#fff',
-        //       }
-        //     },
-        //     z: 10
-        //   },
-
         xAxis: [
           {
             type: 'category',
@@ -161,10 +132,10 @@ class OneSendView extends Component {
             },
             axisTick: { show: false },
             axisLabel: {
-              formatter: "{value}吨",
+              formatter: "{value}t",
               textStyle: {
                 color: '#7d7d7d',
-                fontSize: 12
+                fontSize: 11
               }
             },
             splitLine:{
@@ -189,7 +160,7 @@ class OneSendView extends Component {
               formatter: "{value}%",
               textStyle: {
                 color: '#7d7d7d',
-                fontSize: 12
+                fontSize: 11
               }
             },
             splitLine:{
@@ -213,13 +184,13 @@ class OneSendView extends Component {
             emphasis: {
               focus: 'series'
             },
-            barWidth: 10,
+            barWidth: 7,
 
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(255, 206, 0, 1)' },
-                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
-                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
+                { offset: 0.7, color: 'rgba(255, 206, 0, 0.5)' },
+                { offset: 1, color: 'rgba(255, 206, 0, 0.2)' },
               ])
             },
 
@@ -233,7 +204,7 @@ class OneSendView extends Component {
             "smooth": true,
   
             barGap: 0,
-            barWidth: 10,
+            barWidth: 7,
             emphasis: {
               focus: 'series'
             },
@@ -243,8 +214,8 @@ class OneSendView extends Component {
               },
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(105, 255, 222, 1)' },
-                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
-                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
+                { offset: 0.7, color: 'rgba(105, 255, 222, 0.5)' },
+                { offset: 1, color: 'rgba(105, 255, 222, 0.2)' },
               ])
             },
             data: this.state.deliveryQty

src/pages/tlk/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 近30天产量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 17:32:33
+ * @Last Modified time: 2024-10-16 10:57:51
  */
 
 
@@ -136,10 +136,10 @@ class RightBottomView extends Component {
             },
           },
           axisLabel: {
-            formatter: "{value} 吨",
+            formatter: "{value}t",
             textStyle: {
               color: '#7d7d7d',
-              fontSize: 13
+              fontSize: 11
             },
           },
 

src/pages/tlk/style.less

@@ -38,14 +38,77 @@
       height: 30%!important;
     }
     .centerCon .bottomContent3{
-      bottom: 10%!important;
+      bottom: 7%!important;
     }
+    .leftContent .bottomContent2{
+      margin-bottom: 3%!important;
+    }
+    .leftContent .center_box2{
+      margin-bottom: 0%!important;
+    }
+    
     .rightContent .topMsg_22{
-      height: 30%!important;
+      height: 31%!important;
+      margin-bottom: 3%;
       #echarts5{
         height: 100%!important;
       }
     }
+    .bottom_body .home .rightContent .topMsg_2 .topMsg_content {
+        height: 95%;
+    }
+    .rightContent{
+      width: 25%!important;
+      margin-right: 1%;
+    }
+    .leftContent{
+      width: 25%!important;
+      margin-left: 1%;
+    }
+    .rightContent .topMsg .topMsg_content .topMsg_box .topMsg_number_p{
+      margin-bottom: 0.1rem;
+      color: #84b8dc!important;
+      font-size: 0.4em!important;
+    }
+    .rightContent .topMsg .topMsg_content .topMsg_box .topMsg_number_p_big{
+      color: #CDF1FF!important;
+      font-size: 0.5em!important;
+      margin-bottom: 0.13rem;
+    }
+    .rightContent .topMsg .topMsg_content .topMsg_box{
+      width: 32%!important;
+    }
+    .topMsg_title{
+      color: #e0f6ff!important;
+      .topMsg_tips{
+        font-size: 0.7em;
+      }
+    }
+    .leftContent .center_box .topMsg_content .eacharView #echarts6_box .guanghuan {
+      top: -4%!important;
+      left: 2px!important;
+  }
+  .leftContent .center_box .topMsg_content .eacharView .name_ul {
+    width: 65%!important;
+  }
+    .text_total{
+      top: 37%;
+      position: absolute;
+      left: 50%;
+      color: #fff;
+      width: 0.5rem;
+      margin-left: -0.25rem;
+      font-size: 1.2em;
+      .topMsg_number_2{
+        font-size: 0.6em;
+      }
+      .topMsg_number_3{
+        color: rgba(205, 241, 255, 1);
+        font-size: 0.8em;
+        display: block;
+      }
+    }
+
   }
 }
 .home {

src/pages/tlk/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-14 17:16:34
+ * @Last Modified time: 2024-10-16 17:00:52
  */
 /*
  * @Author: dayan_hjm 
@@ -261,9 +261,9 @@ class Home extends Component {
           window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
         }
         {/* 右键切换大屏 */}
-        <Tooltip placement="bottom" title={"产供销价值链"}>
+        <Tooltip placement="bottom" title={"运营数据中心"}>
           <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
-            deleteCacheAndChangeUrl("/home/gvc", (url) => {
+            deleteCacheAndChangeUrl("/home/operation", (url) => {
               this.props.history.replace(url);
             })
           }} />
@@ -286,7 +286,7 @@ class Home extends Component {
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
               <div className="bottomContent bigDivPd">
                 <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
-                  <p className="topMsg_title">产品月度产量 / Monthly Net Production</p>
+                  <p className="topMsg_title">产品月度产量 <span className="topMsg_tips">/ Monthly Net Production</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
                   <OneSendView></OneSendView>
@@ -297,7 +297,7 @@ class Home extends Component {
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
               <div className="bottomContent bigDivPd">
                 <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
-                  <p className="topMsg_title">产品发货量 / Lithium Shipment</p>
+                  <p className="topMsg_title">产品发货量 <span className="topMsg_tips">/ Lithium Shipment</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
                   <MoodSendView></MoodSendView>
@@ -313,7 +313,7 @@ class Home extends Component {
                   <img src={require("@assets/imgs/dataVimg/gongshi2.png").default} alt="" style={{ width: "1.3em", margin: " -0.3em 0.5em 0 0em" }} />
                   物料1库存数*物料1移动平均价+物料2*物料2移动平均价+…
                 </p>}>
-                  <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>产品库存 / Lithium Inventory</p>
+                  <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>产品库存 <span className="topMsg_tips">/ Lithium Inventory</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
                   <LeftMenoyView></LeftMenoyView>
@@ -339,8 +339,8 @@ class Home extends Component {
                         }
                         <p className="topMsg_line"></p>
                         <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的产量合计'}>
-                        <span className="topMsg_tip">年度发货量/吨</span>
-                        <span className="topMsg_tip topMsg_tip2">Annual Shipments / t</span>
+                          <span className="topMsg_tip">年度发货量/吨</span>
+                          <span className="topMsg_tip topMsg_tip2">Annual Shipments / t</span>
                         </Tooltip>
                       </div>
                     </div>
@@ -354,12 +354,12 @@ class Home extends Component {
                         }
                         <p className="topMsg_line"></p>
                         <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的发货量合计。'}>
-                        <span className="topMsg_tip">年度产量/吨</span>
-                        <span className="topMsg_tip topMsg_tip2">Annual Production / t</span>
+                          <span className="topMsg_tip">年度产量/吨</span>
+                          <span className="topMsg_tip topMsg_tip2">Annual Production / t</span>
                         </Tooltip>
                       </div>
                     </div>
-                    <div className="center_li" style={{marginTop:'-24px',height:'78%'}}>
+                    <div className="center_li" style={{ marginTop: '-24px', height: '78%' }}>
                       {
                         !changNun && <span className="topMsg_number" class="shu1">{yearSend}</span>
                       }
@@ -368,8 +368,8 @@ class Home extends Component {
                       }
                       <p className="topMsg_line"></p>
                       <Tooltip placement="bottom" title={' ● 截止更新日期的主产品库存数量。'}>
-                      <span className="topMsg_tip">年度产品一次合格率</span>
-                      <span className="topMsg_tip topMsg_tip2">Annual First Pass Yield</span>
+                        <span className="topMsg_tip">年度产品一次合格率</span>
+                        <span className="topMsg_tip topMsg_tip2">Annual First Pass Yield</span>
                       </Tooltip>
                     </div>
                   </div>
@@ -379,7 +379,7 @@ class Home extends Component {
             <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower animate__delay-1s">
               <div className="bottomContent">
                 <Tooltip placement="bottom" title={' ● 以更新日期为节点近30天的产量数据（含外加工）。'}>
-                  <p className="topMsg_title">近90天产量 / Net Production in the last 90 days</p>
+                  <p className="topMsg_title">近90天产量 <span className="topMsg_tips">/ Net Production in the last 90 days</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
                   <BottomLineForSend></BottomLineForSend>
@@ -394,13 +394,22 @@ class Home extends Component {
             <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg bigDivPd">
                 <Tooltip placement="bottom" title={' ● 近一年的百万工时损工率。'}>
-                  <p className="topMsg_title">百万工时损工率</p>
+                  <p className="topMsg_title">计划完成率 <span className="topMsg_tips">/ Plan Completion Rate</span></p>
                 </Tooltip>
                 <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
                   <div className="topMsg_box">
-                    <span className="topMsg_number" class="shu1"></span>
-                    <span className="topMsg_number_2"></span>
-                    <p className="topMsg_number_p"></p>
+                    <p className="topMsg_number_p topMsg_number_p_big">年度产量计划完成率</p>
+                    <p className="topMsg_number_p">Completion rate of</p>
+                    <p className="topMsg_number_p" style={{marginBottom:'0.05rem'}}>annual production plan</p>
+                    <span className="topMsg_number" class="shu1">445677</span>
+                    <span className="topMsg_number_2">%</span>
+                  </div>
+                  <div className="topMsg_box">
+                    <p className="topMsg_number_p topMsg_number_p_big">年度锂辉石计划执行率</p>
+                    <p className="topMsg_number_p">Annual lithium pyroxene</p>
+                    <p className="topMsg_number_p" style={{marginBottom:'0.05rem'}}>plan execution rate</p>
+                    <span className="topMsg_number" class="shu1">97.89</span>
+                    <span className="topMsg_number_2">%</span>
                   </div>
                 </div>
               </div>
@@ -409,7 +418,7 @@ class Home extends Component {
             <div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg_2">
                 <Tooltip placement="bottom" title={' ● 近六个月的主产品一次合格率，当月的数据计算至更新日期。'}>
-                  <p className="topMsg_title">锂辉石消耗量 / Spodumene Consumption</p>
+                  <p className="topMsg_title">锂辉石消耗量 <span className="topMsg_tips">/ Spodumene Consumption</span></p>
                 </Tooltip>
 
                 <div className="topMsg_content">
@@ -421,7 +430,7 @@ class Home extends Component {
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
               <div className="bottomContent bigDivPd">
                 <Tooltip placement="bottom" title={' ● 近三年的碳排放总量、碳排放强度数据'}>
-                  <p className="topMsg_title">产品一次合格率 / First Pass Yield</p>
+                  <p className="topMsg_title">产品一次合格率 <span className="topMsg_tips">/ First Pass Yield</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
                   <RightBottomView></RightBottomView>

src/pages/tqcDataVHome/view.jsx

@@ -267,9 +267,9 @@ class Home extends Component {
             })
           }} />
         </Tooltip>
-        <Tooltip placement="bottom" title={"产供销价值链"}>
+        <Tooltip placement="bottom" title={"TLK运营数据中心 / TLK Plant Dashboard"}>
           <img src={require("@assets/imgs/iconJpg/rightJL.png").default} alt="" className={"rightJ_png rightJ_png_L"} onClick={() => {
-            deleteCacheAndChangeUrl("/home/gvc", (url) => {
+            deleteCacheAndChangeUrl("/home/tlk", (url) => {
               this.props.history.replace(url);
             })
           }} />