添加打孔大屏显示界面

ZengTao

2023-07-26 a7add1cb363850b4fa85a895ac7e399eb88851fc

添加打孔大屏显示界面

 gmms/WebContent/dapingxianshi/dakongdaping.jsp

@@ -29,6 +29,14 @@

<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../js/static/css/element.css">
<!-- <link rel="stylesheet" href="../js/static/css/style.css"> -->
<script src="../js/static/js/vue.js"></script>
<script src="../js/mixins.js"></script>
<!-- import JavaScript -->

<script src="../js/static/js/element.js"></script>
<script src="../js/static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
@@ -44,15 +52,15 @@
        padding:0;
    }
    #top{
        height:30%;
        height:25%;
        display:flex;
    }
    #center{
        height:40%;
        height:50%;
        display:flex;
    }
    #bottom{
        height:30%;
        height:25%;
        display:flex;
    }
    .top_div{
@@ -60,13 +68,13 @@
        htight:100%;
    }
    .center_div{
        width:30%;
        width:28%;
        htight:100%;
        display:flex;
        flex-wrap: wrap;
    }
    .center_divs{
        width:40%;
        width:46%;
        htight:100%;
    }
    .center_div_details{
@@ -84,37 +92,97 @@
    <div  id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
        <div id="top">
            <div class="top_div">打孔机1产品图</div>
            <div class="top_div" id="qw">打孔机1电耗</div>
            <div class="top_div">打孔机2电耗</div>
            <div class="top_div" id="Histogram1">打孔机1电耗</div>
            <div class="top_div" id="Histogram2">打孔机2电耗</div>
            <div class="top_div">打孔机2产品图</div>
        </div>
        <div id="center">
            <div class="center_div">
                <div class="center_div_details">打孔机1用水</div>
                <div class="center_div_details">打孔机3用水</div>
                <div class="center_div_details" id="Histogram5">打孔机1用水</div>
                <div class="center_div_details" id="Histogram6">打孔机3用水</div>
            </div>
            <div class="center_divs">
                查询
            </div>
                <div id="app" style="display:width:100%" class="center_divs">
                     <el-table border
                      :data="machine"
                      height='100%'
                      style="width: 100%;"
                       :cell-class-name="tableRowClassName"
                      >
                      <el-table-column
                        prop="name"
                        label="设备">
                      </el-table-column>
                      <el-table-column
                        prop="ip"
                        label="订单号">
                      </el-table-column>
                      <el-table-column
                        prop="port"
                        label="已加工数量">
                      </el-table-column>
                      <el-table-column
                        prop="st"
                        label="待加工数量">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="破损数量">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="更换周期">
                      </el-table-column>
                      <el-table-column
                        prop="count"
                        label="更换倒计时">
                      </el-table-column>
                     </el-table>
                </div>
            <div class="center_div">
                <div class="center_div_details">打孔机2用水</div>
                <div class="center_div_details">打孔机4用水</div>
                <div class="center_div_details" id="Histogram7">打孔机2用水</div>
                <div class="center_div_details" id="Histogram8">打孔机4用水</div>
            </div>
        </div>
        <div id="bottom">
            <div class="bottom_div">打孔机1产品图</div>
            <div class="bottom_div">打孔机1电耗</div>
            <div class="bottom_div">打孔机2电耗</div>
            <div class="bottom_div" id="Histogram3">打孔机1电耗</div>
            <div class="bottom_div" id="Histogram4">打孔机2电耗</div>
            <div class="bottom_div">打孔机2产品图</div>
        </div>
    </div>
    <script>
    Vue.prototype.$echarts = echarts
    let app =new Vue({
      el: '#app',
      mixins:[mixin],
      data:{
        machine:"",
      },
      methods:{
          tableRowClassName({row,column,rowIndex,columnIndex}) {
    		  
               if (row['st'] == '未连接' && columnIndex==3 ) {
                 return 'success-row';
               }else{
                 return ''; 
               }
   	        
          }
      }
     })
    window.onload=function(){
        zhutu();
        zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"电耗");
        zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"水耗");
        zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"水耗");
    }
    function zhutu () {
    function zhutu (Cname,datas,Tname) {

            var chartDom = document.getElementById('qw');
            var chartDom = document.getElementById(Cname);
            var myChart = echarts.init(chartDom);
            var option;

@@ -143,7 +211,7 @@
              yAxis: [
                {
                  type: "value",
                  name: "水耗",
                  name: Tname,
                  nameTextStyle: {
                    color: "rgb(30, 144, 255)",
                    fontSize: 12,
@@ -171,7 +239,7 @@
                  name: '电耗',
                  type: 'bar',
                  barWidth: '80%',
                  data: [10, 52, 200, 334, 390, 330, 220],
                  data: datas,
                  itemStyle: { color: 'rgb(30, 144, 255)' }
                },