修改看板

haiwei-admin/src/main/resources/static/board/board.css

@@ -11,7 +11,7 @@ body {
     width: 7.5vw;
     height: 2.5vw;
     position: absolute;
-    top: 2.8vw;
+    top: 6%;
     line-height: 2.5vw;
     font-size: 1.2vw;
     text-align: center;
@@ -60,7 +60,7 @@ body {
     background-repeat: no-repeat;
     position: absolute;
     right: 9vw;
-    top: 13vh;
+    top: 19%;
     width: 16vw;
     height: 22.9vw;
 }
@@ -124,7 +124,7 @@ body {
     background-size: 100% 100%;
     background-repeat: no-repeat;
     position: absolute;
-    top: 63%;
+    top: 68%;
     right: 12%;
     width: 10vw;
     height: 4vw;
@@ -230,7 +230,22 @@ body {
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
-    width: 35vw;
-    height: 21.85vw;
+    width: 70vw;
+    height: 43.7vw;
     z-index: 101;
 }
+.centerModalInfo{
+    position: absolute;
+    top: 10%;
+    left: 4%;
+    width: 94%;
+    height: 87%;
+    overflow: hidden;
+}
+.chart1{
+    position: absolute;
+    top: 17%;
+    left: 4%;
+    width: 94%;
+    height: 80%;
+}

haiwei-admin/src/main/resources/static/board/board.js

@@ -1,3 +1,128 @@
-$(()=>{
+$(() => {
+  tableAnimation('#chart2')
+
+  $.get(ctx + 'broad/home/queryParam', {}, (e) => {
+    console.log(e)
+    let arr = [
+      {
+        name: "一体机切刀A",
+        top: '1%',
+        left: '15%',
+        data1: '转速',
+        data2: '电流'
+      },
+      {
+        name: "一体机A机头",
+        top: '35%',
+        left: '40%',
+        data1: '温度',
+        data2: '压力'
+      },
+      {
+        name: "一体机A",
+        top: '45%',
+        left: '71%',
+        data1: '转速',
+        data2: '电流'
+      },
+    ]
+    arr.forEach(val => {
+      let html = `
+      <div class="centerInfo" style="top: ${val.top};left:${val.left}">
+        <div class="win">
+          <div class="title">${val.name}</div>
+          <div class="span1">转速: ${e.data.find(res => res.name === val.name && res.pointname === val.data1)?.data || 0}n/s</div>
+          <div class="span2">电流: ${e.data.find(res => res.name === val.name && res.pointname === val.data2)?.data || 0}A</div>
+        </div>
+        <div class="icon"></div>
+      </div>
+      `
+      $("#centerInfoDiv").append(html)
+    })
+
+  })
 })
 
+let chart1 = (el, data) => {
+  console.log(data)
+  let xData = Object.keys(data[0]).filter(e => e !== 'time')
+  let series = xData.map(e => {
+    return {
+      name: e,
+      type: "line",
+      smooth: true,
+      symbol: "circle",
+      symbolSize: 5,
+      showSymbol: false,
+      data: data.map(val => val[e]),
+    }
+  })
+  let chart = echarts.init(el);
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#57617B",
+        },
+      },
+    },
+    legend: {
+      icon: "rect",
+      itemWidth: 14,
+      itemHeight: 5,
+      itemGap: 13,
+      data: xData,
+      right: "4%",
+      textStyle: {
+        fontSize: 12,
+        color: "#F1F1F3",
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        data: data.map(e => e.time),
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "转速（n/s）",
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        axisLabel: {
+          margin: 10,
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+      },
+    ],
+    series: series,
+  };
+  chart.setOption(option)
+}

haiwei-admin/src/main/resources/static/board/board2.css

@@ -11,7 +11,7 @@ body {
     width: 7.5vw;
     height: 2.5vw;
     position: absolute;
-    top: 2.8vw;
+    top: 6%;
     line-height: 2.5vw;
     font-size: 1.2vw;
     text-align: center;

haiwei-admin/src/main/resources/static/js/scrollTable.js

@@ -0,0 +1,203 @@
+/**
+ * dynamicTable1 动态表格
+ * @param { Object }  resource
+ * @param { String }  el : 指定元素
+ * @param { Array }   header : 表头
+ * @param { Array }   data : 数据行
+ * @param { Number }  rowNum : 显示行数
+ * @param { Boolean } index : 是否显示索引列
+ * @param { Number }  timeout : 滚动动画延时
+ * @param { String }  headerBGC : 标题栏背景颜色
+ * @param { String }  oddRowBGC : 奇数行背景颜色
+ * @param { String }  evenRowBGC : 偶数行背景颜色
+ * @param { String }  fontColor : 字体颜色
+ * @param { String }  indexBGC : 索引列背景颜色
+ * @param { Array }   colWidth : 每列的宽度
+ */
+var dynamicTable = (resource) => {
+	// 'use strict';
+
+	//检查参数类型
+	if (typeof resource !== 'object') {
+		console.error('未传入参数,或者参数不是Object类型');
+		return
+	}
+
+	// 检查是否传入元素
+	const ele = resource.el;
+	if (!ele) {
+		console.error('元素获取不正确！');
+		return
+	}
+	/**
+	 * 检查是否传入动画触发时长
+	 * 当时间小于 10 计算为秒级单位，
+	 * 大于 10 计算为毫秒级单位
+	 */
+	let timeout = resource.timeout;
+	if (!timeout) {
+		timeout = 2000
+	} else if (timeout < 10) {
+		timeout = timeout * 1000
+	}
+
+	// 检查 配置元素是否传入数据
+	const colName = resource.header === undefined ? '' : resource.header;
+	const rowData = resource.data === undefined ? '' : resource.data;
+	const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%';
+	const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC;
+	const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC;
+	const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC;
+	const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor;
+	const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC;
+	const colIndex = resource.index === undefined ? true : resource.index;
+	const colWidth = resource.colWidth === undefined ? false : resource.colWidth;
+	const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor;
+
+	//基本table html
+	const html = `
+                <div class="table">
+                    <div class="thead">
+                        <div class="tr"></div>
+                    </div>
+                    <div class="tbody"></div>
+                </div>
+            `;
+	//Css样式集
+	const boxCSS = {
+		overflow: 'hidden',
+		backgroundColor: headerBGC
+	};
+	const tableCSS = {
+		color: fontColor,
+		width: '100%',
+		height: '100%'
+	};
+	const theadCSS = {
+		width: '100%',
+		height: rowNum,
+		borderRadius:'2px',
+		backgroundColor:'#1354B0',
+		color: '#DFE3F1',
+	};
+	const thead_trCSS = {
+		display: "flex",
+		flexWrap: "nowrap",
+		width: "100%",
+		height: "100%",
+		justifyContent: "space-around"
+	};
+	const thCSS = {
+		justifyContent: "space-around",
+		fontWeight: "bold",
+		fontSize: '0.7vw',
+	};
+	const tbodyCSS = {
+		width: "100%",
+		height: resource.rowNum === undefined ? '80%' :(100- 100 / resource.rowNum) + '%',
+		boxSizing: 'border-box',
+		overflow:'auto'
+	};
+	const tbody_trCSS = {
+		flexWrap: "nowrap",
+		width: "99%",
+		height: rowNum,
+		justifyContent: "space-around",
+		backgroundColor:'#0B3392',
+		borderRadius:'2px',
+	};
+	const trOddCSS = {
+		display: "flex",
+	};
+	const trEvenCSS = {
+		display: "flex",
+	};
+	const th_tdCSS = {
+		margin: 'auto',
+		whiteSpace: 'nowrap',
+		overflow: "hidden",
+		textOverflow: 'ellipsis',
+		textAlign: 'center',
+		padding: '0 4px 0 4px',
+	};
+	const indexCSS = {
+		display: 'inline-block',
+		width: '90%',
+		height: "90%",
+		backgroundColor: indexBGC,
+		color: indexColor,
+		borderRadius: '20%',
+		margin: 'auto'
+	};
+	//插入table元素
+	$(ele).append(html);
+
+	//核心代码
+	//遍历插入数据 表头
+	// if (colIndex) {
+	// 	$(ele + '>.table>.thead>.tr').append('<div class="th"><span>排序</span></div>')
+	// }
+	colName.forEach(element => {
+		$(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`)
+	});
+
+	//遍历插入数据 数据行
+	for (let i = 0; i <rowData.length; i++) {
+		$(ele + '>.table>.tbody').append('<div class="tr" style="border: 1px solid #126FB9;margin: 5px 0;"></div>');
+		rowData[i].forEach(element => {
+			$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`)
+
+		})
+
+	}
+
+	//设置CSS样式
+	$(ele).css(boxCSS);
+	$(ele + '>.table').css(tableCSS);
+	$(ele + '>.table>.thead').css(theadCSS);
+	$(ele + '>.table>.thead>.tr').css(thead_trCSS);
+	$(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS);
+	$(ele + '>.table>.tbody').css(tbodyCSS);
+	$(ele + '>.table>.tbody>.tr').css(tbody_trCSS);
+	$(ele + '>.table>.tbody>.tr:odd').css(trOddCSS);
+	$(ele + '>.table>.tbody>.tr:even').css(trEvenCSS);
+	$(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS);
+	$(ele + '>.table span.index').css(indexCSS)
+
+	//统一计量单位
+	const emptyUnit = element => element.replace(/[^0-9]/g, '');
+	const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length;
+	const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length;
+	const ceil = Math.ceil;
+
+	/**
+	 * 设置每列的宽度
+	 * eq() 是在匹配的元素中取下标为n的元素
+	 * nth-child() 是在匹配元素的父元素中选择第n个元素
+	 */
+	if (!colWidth) {
+		$(`${ele}>.table>.thead>.tr>.th`).css({
+			width: ceil(100 / hendlen) + '%'
+		});
+		$(`${ele}>.table>.tbody>.tr>.td`).css({
+			width: ceil(100 / bodylen) + '%'
+		});
+	} else {
+		for (let i = 0; i < colWidth.length; i++) {
+			let emptyUnitColWidth = emptyUnit(colWidth[i]);
+			$(`${ele} > .table > .thead > .tr > .th:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`);
+			$(`${ele} > .table > .tbody > .tr > .td:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`);
+		}
+	}
+
+	//奇偶校验 --> 处理最后一行是奇数的问题
+	let oddORevenCheck = $(`${ele}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
+	//滚动动画
+
+	// 组件销毁钩子
+	$(`${ele}`).bind('DOMNodeRemoved', (e) => {
+		if (e.target.classList[0] === 'asit-table') {
+			clearInterval(timer);
+		}
+	});
+}

haiwei-admin/src/main/resources/static/js/tableAnimation.js

@@ -0,0 +1,28 @@
+const tableAnimation = (el) => {
+    const evenRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#ddd' : 'rgba(8,36,75,0.2)';
+    const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#ddd' : 'rgba(8,36,75,0.2)';
+    const trEvenCSS = {
+        display: "flex",
+        // backgroundColor: evenRowBGC
+    };
+    const trOddCSS = {
+        display: "flex",
+        // backgroundColor: oddRowBGC
+    };
+    let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
+    setInterval(function () {
+        $(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
+            switch (oddORevenCheck) {
+                case 'even':
+                    $(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
+                    oddORevenCheck = 'odd';
+                    break;
+                case 'odd':
+                    $(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
+                    oddORevenCheck = 'even';
+                    break;
+            }
+            $(this).remove();
+        });
+    }, 2000);
+}

haiwei-admin/src/main/resources/templates/board/board1.html

@@ -5,19 +5,109 @@
 </head>
 <body class="white-bg">
 <link href="../../board/board.css" rel="stylesheet">
+<script src="../../js/echarts.js"></script>
+<script src="../../js/scrollTable.js"></script>
+<script src="../../js/tableAnimation.js"></script>
 <script>
 
+  let status = {
+    rightInfoS: false,
+    bottomBtn1S: false,
+    bottomBtn2S: false,
+    bottomBtn3S: false,
+  }
   const routerSkip = (e) => {
-    $.modal.openTab('设备智能驾驶舱', ctx + e);
+    try {
+      $.modal.openTab('看板1', ctx + e);
+    } catch (val) {
+      location.href = ctx + e
+    }
   }
 
   const showModal = () => {
     $("#eqModal").show()
   }
-
-  const hideModal = () => {
+  const hideModal1 = () => {
     $("#eqModal").hide()
   }
+
+  const hideModal = (e, el) => {
+    status[`bottomBtn${e}S`] = false
+    $($(el)[0].parentNode).hide()
+    $("#bottomBtn" + e).css({
+      backgroundImage: status[`bottomBtn${e}S`] ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
+    })
+  }
+  const toggleInfo = () => {
+    $("#rightInfo").toggle()
+    status.rightInfoS = !status.rightInfoS
+    $("#toggleInfoBtn").css({
+      backgroundImage: status.rightInfoS ? 'url("../../board/img/click.png")' : 'url("../../board/img/click1.png")'
+    })
+  }
+  const bottomBtnInfo = (e, el) => {
+    $("#modal" + e).toggle()
+    switch (e) {
+      case 1:
+        status.bottomBtn1S = !status.bottomBtn1S
+        $(el).css({
+          backgroundImage: status.bottomBtn1S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
+        })
+        break
+
+      case 2:
+        status.bottomBtn2S = !status.bottomBtn2S
+        $(el).css({
+          backgroundImage: status.bottomBtn2S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
+        })
+        break
+
+      case 3:
+        status.bottomBtn3S = !status.bottomBtn3S
+        $(el).css({
+          backgroundImage: status.bottomBtn3S ? 'url("../../board/img/btn1bg.png")' : 'url("../../board/img/btnbg.png")'
+        })
+        break
+
+    }
+  }
+  const Modal1Search = () => {
+    let params = {}
+    if ($('#startTime1').val()) {
+      params.beginTime = new Date($('#startTime1').val())
+    }
+    if ($('#endTime1').val()) {
+      params.endTime = new Date($('#endTime1').val())
+    }
+    $.get(ctx + 'broad/home/queryParamList', params, (e) => {
+      chart1(document.getElementById('chart1'), e.data)
+    })
+  }
+  const Modal2Search = () => {
+    let params = {}
+    if ($('#startTime1').val()) {
+      params.beginTime = new Date($('#startTime2').val())
+    }
+    if ($('#endTime1').val()) {
+      params.endTime = new Date($('#endTime2').val())
+    }
+    $.get(ctx + 'broad/home/queryParamList', params, (e) => {
+      $("#chart2").empty()
+      dynamicTable({
+        el: '#chart2',
+        rowNum: 10,
+        timeout: 5,
+        header: ['序号', '采集日期', '一体机A转速', '一体机A电流'],
+        data: e.data.map((val, i) => [i, val.time, val['一体机A转速'], val['一体机A电流']]),
+        index: true,
+        fontColor: '#03BCD4 ',
+        indexBGC: '#86F3FF',
+        headerBGC: '#092A77',
+        oddRowBGC: '#092A77',
+        evenRowBGC: '#092A77',
+      })
+    })
+  }
 </script>
 <div>
   <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
@@ -25,65 +115,115 @@
   <div class="topBtn" style="left: 25vw;">60型一体机</div>
   <div class="topBtn" style="left: 71vw;">视频展示</div>
   <div class="topBtn" style="left: 83vw;">文档归档</div>
+  <div class="topBtn" id="toggleInfoBtn" onclick="toggleInfo()" style="left: 83vw;top:13%">设备介绍</div>
 
-  <div class="bottomBtn bottomBtnClick" style="left: 22.5vw;">历史趋势</div>
-  <div class="bottomBtn" style="left: 42.5vw;">数据记录</div>
-  <div class="bottomBtn" style="left: 62.5vw;">实时监控</div>
+  <div class="bottomBtn" id="bottomBtn1" onclick="bottomBtnInfo(1,this)" style="left: 22.5vw;">历史趋势</div>
+  <div class="bottomBtn" id="bottomBtn2" onclick="bottomBtnInfo(2,this)" style="left: 42.5vw;">数据记录</div>
+  <div class="bottomBtn" id="bottomBtn3" onclick="bottomBtnInfo(3,this)" style="left: 62.5vw;">实时监控</div>
 
   <div class="centerImg">
-    <div>
-      <div class="centerInfo" onclick="showModal()" style="top: 1%;left:15%">
-        <div class="win">
-          <div class="title">位置1</div>
-          <div class="span1">转速: 50n/s</div>
-          <div class="span2">电流: 45A</div>
-        </div>
-        <div class="icon"></div>
-      </div>
+    <div id="centerInfoDiv">
 
-      <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">
-        <div class="win">
-          <div class="title">位置1</div>
-          <div class="span1">转速: 50n/s</div>
-          <div class="span2">电流: 45A</div>
-        </div>
-        <div class="icon"></div>
-      </div>
+<!--      <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">-->
+<!--        <div class="win">-->
+<!--          <div class="title">位置1</div>-->
+<!--          <div class="span1">转速: 50n/s</div>-->
+<!--          <div class="span2">电流: 45A</div>-->
+<!--        </div>-->
+<!--        <div class="icon"></div>-->
+<!--      </div>-->
 
-      <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">
-        <div class="win">
-          <div class="title">位置1</div>
-          <div class="span1">转速: 50n/s</div>
-          <div class="span2">电流: 45A</div>
-        </div>
-        <div class="icon"></div>
-      </div>
+<!--      <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">-->
+<!--        <div class="win">-->
+<!--          <div class="title">位置1</div>-->
+<!--          <div class="span1">转速: 50n/s</div>-->
+<!--          <div class="span2">电流: 45A</div>-->
+<!--        </div>-->
+<!--        <div class="icon"></div>-->
+<!--      </div>-->
     </div>
+
   </div>
 
-  <div class="winDiv">
-    <div class="title">基本信息</div>
-    <div class="title1">设备描述:</div>
-    <div class="bg1">
-      <p>规格型号: PG -300</p>
-      <p>功能描述:利用膨化闪蒸原理，使胶料通过单螺杆的挤压输由高温高压到常温常压状态，利用胶料膨化闪蒸去除胶料内部的水分。</p>
+  <div id="rightInfo" style="display: none">
+    <div class="winDiv">
+      <div class="title">基本信息</div>
+      <div class="title1">设备描述:</div>
+      <div class="bg1">
+        <p>规格型号: PG -300</p>
+        <p>功能描述:利用膨化闪蒸原理，使胶料通过单螺杆的挤压输由高温高压到常温常压状态，利用胶料膨化闪蒸去除胶料内部的水分。</p>
+      </div>
+      <div class="title2">技术参数:</div>
+      <div class="bg2">
+        <p>功率:800kw</p>
+        <p>电压:10000V</p>
+        <p>转速: 1480rpm</p>
+        <p>转速: 0~276rpr</p>
+      </div>
+    </div>
+
+    <div class="status">
+      <div class="icon"></div>
+      <span>运行正常</span>
     </div>
-    <div class="title2">技术参数:</div>
-    <div class="bg2">
-      <p>功率:800kw</p>
-      <p>电压:10000V</p>
-      <p>转速: 1480rpm</p>
-      <p>转速: 0~276rpr</p>
+  </div>
+  <div class="eqModal" id="eqModal">
+    <div class="shade" onclick="hideModal1()"></div>
+    <div class="centerModal"></div>
+  </div>
+
+  <div id="modal1" style="display:none;">
+    <div class="shade" onclick="hideModal(1,this)"></div>
+    <div class="centerModal">
+      <div class="centerModalInfo">
+        <span style="font-size: 1vw;color: #fff">起止时间： </span>
+        <input class="time-input" id="startTime1" placeholder="开始时间"
+               style="width: 10vw;height:2vw;display: inline-block"
+               type="text"/>
+        <span>-</span>
+        <input class="time-input" id="endTime1" placeholder="结束时间" style="width: 10vw;height:2vw;display: inline-block"
+               type="text"/>
+        <a class="btn btn-primary btn-rounded btn-sm" onclick="Modal1Search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+        <a class="btn btn-warning btn-rounded btn-sm"><i class="fa fa-download"></i>&nbsp;导出</a>
+      </div>
+      <div class="chart1" id="chart1"></div>
     </div>
   </div>
 
-  <div class="status">
-    <div class="icon"></div>
-    <span>运行正常</span>
+  <div id="modal2" style="display:none;">
+    <div class="shade" onclick="hideModal(2,this)"></div>
+    <div class="centerModal">
+      <div class="centerModalInfo">
+        <div style="position:relative;">
+          <div style="display: inline-block">
+            <span style="font-size: 1vw;color: #fff">客户名称： </span>
+            <input name="loginName" style="width: 10vw;height:2vw;display: inline-block" type="text"/>
+          </div>
+          <div style="display: inline-block">
+            <span style="font-size: 1vw;color: #fff">实验胶种： </span>
+            <input name="loginName" style="width: 10vw;height:2vw;display: inline-block" type="text"/>
+          </div>
+          <div style="display: inline-block">
+            <span style="font-size: 1vw;color: #fff">起止时间： </span>
+            <input class="time-input" id="startTime2" placeholder="开始时间"
+                   style="width: 10vw;height:2vw;display: inline-block"
+                   type="text"/>
+            <span>-</span>
+            <input class="time-input" id="endTime2" placeholder="结束时间"
+                   style="width: 10vw;height:2vw;display: inline-block"
+                   type="text"/>
+          </div>
+          <a class="btn btn-primary btn-rounded btn-sm" onclick="Modal2Search()"><i
+                  class="fa fa-search"></i>&nbsp;搜索</a>
+          <a class="btn btn-warning btn-rounded btn-sm"><i class="fa fa-download"></i>&nbsp;导出</a>
+        </div>
+        <div class="chart1" id="chart2" style="position:relative;top:2%;left: 0;height: 92%"></div>
+      </div>
+    </div>
   </div>
 
-  <div class="eqModal" id="eqModal">
-    <div class="shade" onclick="hideModal()"></div>
+  <div id="modal3" style="display:none;">
+    <div class="shade" onclick="hideModal(3,this)"></div>
     <div class="centerModal"></div>
   </div>
 </div>

haiwei-admin/src/main/resources/templates/board/board2.html

@@ -7,15 +7,19 @@
 <link href="../../board/board2.css" rel="stylesheet">
 <script>
   const routerSkip = (e) => {
-    $.modal.openTab('设备智能驾驶舱',ctx+e);
+    try {
+      $.modal.openTab('看板1', ctx + e);
+    } catch (val) {
+      location.href = ctx + e
+    }
   }
-  const toLink = (e) =>{
+  const toLink = (e) => {
     window.open(e);
   }
 </script>
 <div>
-  <div class="topBtn topBtnClick" style="left: 4vw;" onclick="routerSkip('board/board2')">首页</div>
-  <div class="topBtn" style="left: 14.5vw;" onclick="routerSkip('board/board1')">60型脱水机</div>
+  <div class="topBtn topBtnClick" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
+  <div class="topBtn" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
   <div class="topBtn" style="left: 25vw;">60型一体机</div>
   <div class="topBtn" style="left: 71vw;">视频展示</div>
   <div class="topBtn" style="left: 83vw;">文档归档</div>