update items

css/index.css

@@ -124,8 +124,8 @@ body {
   margin-top: 12px;
   width: 100%;
   border-bottom: 1px dashed rgba(26, 202, 204, 0.4);
-  background: url('../imgs/Normal1@2x.png') no-repeat;
-  background-size: 100% 100%;
+  background: url('../imgs/灯@2x.png') no-repeat;
+  background-size: 8% 100%;
   font-size: 12px;
   padding-left: 50px;
   box-sizing: border-box;

index.html

@@ -89,9 +89,9 @@
         <div class="item">
           <div class="item_header item_alarm" >
             <div class="item_title_alarm" >报警信息</div>
-            <div class="item_subTitle" >当前报警数：<span class="red" >1</span></div>
+            <div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div>
           </div>
-          <div class="item_wrap item_alarm_wrap" >
+          <div class="item_wrap item_alarm_wrap" id="alarm" >
             <!-- 渲染报警信息 -->
             <div class="list">
               <span>2021-11-11  12:36:30  越限报警越限报警...</span>
@@ -112,5 +112,6 @@
 </body>
 <script src="./js/jquery.min.js"></script>
 <script src="./js/echarts.js"></script>
+<script src="./js/day.js"></script>
 <script src="./js/index.js"></script>
 </html>
\ No newline at end of file

js/day.js

+!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.dayjs = e() }(this, function () { "use strict"; const t = 60, e = 60 * t, s = 24 * e, r = 7 * s, n = (t, e, s) => !t || t.length >= e ? t : `${Array(e + 1 - t.length).join(s)}${t}`; class i { constructor(t) { this.utc = !1; const e = this.parseConfig(t); this.date = new Date(e), this.timeZone = this.date.getTimezoneOffset() / 60, this.timeZoneString = n(String(-1 * this.timeZone).replace(/^(.)?(\d)/, "$10$200"), 5, "+"), this.mYear = this.date.getFullYear(), this.mMonth = this.date.getMonth(), this.mDay = this.date.getDate(), this.mWeek = this.date.getDay(), this.mHour = this.date.getHours(), this.mMinute = this.date.getMinutes(), this.mSecond = this.date.getSeconds() } parseConfig(t) { if (!t) return new Date; if (t instanceof Date) return t; if (/^(\d){8}$/.test(t)) { return this.utc = !0, `${t.substr(0, 4)}-${t.substr(4, 2)}-${t.substr(6, 2)}` } return t } year() { return this.mYear } month() { return this.mMonth } unix() { const t = this.utc ? 60 * this.timeZone * 60 * 1e3 : 0; return Math.floor((this.date.getTime() + t) / 1e3) } toString() { return this.date.toUTCString() } startOf(t) { switch (t) { case "year": return new i(new Date(this.year(), 0, 1)); case "month": return new i(new Date(this.year(), this.month(), 1)); default: return this } } add(n, a) { let h; switch (a) { case "m": case "minutes": h = t; break; case "h": case "hours": h = e; break; case "d": case "days": h = s; break; case "w": case "weeks": h = r; break; default: h = 1 }const u = this.unix() + n * h; return new i(1e3 * u) } subtract(t, e) { return this.add(-1 * t, e) } format(t = "YYYY-MM-DDTHH:mm:ssZ") { const e = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; return t.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g, t => { switch (t) { case "YY": return String(this.mYear).slice(-2); case "YYYY": return String(this.mYear); case "M": return String(this.mMonth + 1); case "MM": return n(String(this.mMonth + 1), 2, "0"); case "D": return String(this.mDay); case "DD": return n(String(this.mDay), 2, "0"); case "d": return String(this.mWeek); case "dddd": return e[this.mWeek]; case "H": return String(this.mHour); case "HH": return n(String(this.mHour), 2, "0"); case "m": return String(this.mMinute); case "mm": return n(String(this.mMinute), 2, "0"); case "s": return String(this.mSecond); case "ss": return n(String(this.mSecond), 2, "0"); case "Z": return `${this.timeZoneString.slice(0, -2)}:00`; case "ZZ": return this.timeZoneString; default: return t } }) } } return t => new i(t) });
\ No newline at end of file

js/index.js

-let baseUrl = 'http://192.168.1.80:8802/api/'
+let baseUrl = 'http://192.168.1.129:8802/api/'
 
 //图表1
 getIndicators()
@@ -299,3 +299,265 @@ function getTorque(){
     });
   }, 1000)
 }
+
+/* 右侧图表 */
+/* 右侧第一个 */
+getRight1()
+function getRight1 () {
+  let rightChart1 = echarts.init(document.getElementById('right1'));
+  let legendData = ['转矩1', '转矩2']
+  let xData = []
+  let seriesData1 = []
+  let seriesData2 = []
+  let rightOption1 = {
+    // tooltip: {
+    //   trigger: 'axis'
+    // },
+    legend: {
+      data: legendData,
+      textStyle: {
+        color:'#fff'
+      },
+      right: 0,
+    },
+    grid: {
+      top: 30,
+      left: 35,
+      bottom: 40,
+      right: 20,
+    },
+    xAxis: {
+      type: 'category',
+      // boundaryGap: false,//这里表示是否补齐空白
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      axisLine: {
+        show: false,//不显示坐标轴线
+      },
+      data: xData,
+    },
+    yAxis: [{
+      type: 'value',
+      axisTick: {
+        show:false
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      axisLine: {
+        show: false,//不显示坐标轴线
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#2A3F61'
+        }
+      }
+    }],
+    series: [
+      {
+        name: '转矩1',
+        data: seriesData1,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 2,
+        hoverAnimation: false,
+        areaStyle: {
+          opacity: 0.1,
+        },
+        itemStyle: {
+          color: '#FEB767'
+        }
+      },
+      {
+        name: '转矩2',
+        data: seriesData2,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 2,
+        hoverAnimation: false,
+        areaStyle: {
+          opacity: 0.1,
+        },
+        itemStyle: {
+          color: '#2978C8'
+        }
+      }
+    ]
+  }
+  rightChart1.setOption(rightOption1)
+  setInterval(()=>{
+    $.ajax({
+      type :"POST",
+      url : baseUrl + "/Base/PostRediusTest",
+      dataType :"json",
+      contentType: "application/json",
+      data: JSON.stringify( ["TORQUE1", "TORQUE2"]),
+      success :function(res) {
+        if(xData.length === 6){
+          seriesData1.shift()
+          seriesData2.shift()
+          xData.shift()
+        }
+        seriesData1.push(res.data[0].Value)
+        seriesData2.push(res.data[1].Value)
+        // let now = new Date();
+        xData.push(/* now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() */ dayjs(new Date()).format('HH:mm:ss'))
+        rightChart1.setOption({
+          xAxis:{
+            data: xData
+          },
+          series: [
+            {
+              data: seriesData1
+            },{
+              data: seriesData2
+            }
+          ]
+        });
+      },
+    });
+  }, 1000)
+}
+
+
+/* 右侧第二个 */
+getRight2()
+function getRight2() {
+  let rightChart2 = echarts.init(document.getElementById('right2'));
+  let xData = ['电机转矩1', '电机转矩2', '电机转矩3', '电机转矩4', '电机转矩5']
+  let valueData = []
+  let rightOption2= {
+    // tooltip: {
+    //   trigger: 'axis',
+    //   axisPointer: {
+    //     type: 'none'
+    //   }
+    // },
+    xAxis: {
+      show: false,
+      type: 'value',
+      boundaryGap: [0, 0.01]
+    },
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#fff',
+        },
+        data: xData
+      },
+      {
+        type: 'category',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          inside: false,
+          color: '#F5BD5F',
+        },
+        splitArea: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        data: valueData
+      }
+  ],
+    grid: {
+      top: 0,
+      left: 80,
+      bottom: 10,
+      right: 60,
+    },
+    series: [
+      {
+        barWidth: 4,
+        showBackground: true,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+            offset: 0,
+            color: '#F1912E'
+          }, {
+            offset: 1,
+            color: "#ECB85F"
+          }], false),
+        },
+        data: valueData
+      }
+    ]
+  }
+  rightChart2.setOption(rightOption2);
+  setInterval(function () {
+    $.ajax({
+      type :"POST",
+      url : baseUrl + "/Base/PostRediusTest",
+      dataType :"json",
+      contentType: "application/json",
+      data: JSON.stringify( ["ACT_TORQUE1","ACT_TORQUE2","ACT_TORQUE3","ACT_TORQUE4", "ACT_TORQUE5"]),
+      success :function(res) {
+        let data = []
+        xData.forEach((item, i)=>{
+          data.push(res.data[i].Value)
+        })
+        rightChart2.setOption({
+          yAxis: [
+            {},{
+              data: data
+            }
+          ],
+          series: [
+            {
+              data: data
+            }
+          ]
+        });
+      },
+    });
+  }, 1000);
+}
+
+/* 右侧第三个 */
+getRight3()
+function getRight3() {
+  let alarm = document.getElementById('alarm')
+  let alarmData = document.getElementById('alarmData')
+  let count = 0
+  let items = []
+  $.ajax({
+    type :"POST",
+    url : baseUrl + "/HMI/HMI_GstAlarms",
+    dataType :"json",
+    contentType: "application/json",
+    data: JSON.stringify({Lang: 'Main_Language_ZH', AlarmFormat: '报警时间 报警文本', Variables: ["ALARM1","ALARM2"] }),
+    success :function(res) {
+      console.log(res.data)
+      debugger
+      // let items = res.data.map(item => ({
+      //   Date: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
+      //   ...item
+      // }))
+    },
+  });
+}