| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8"
|
|---|
| | | pageEncoding="UTF-8"%>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>加工中心</title>
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <script src="../js/echarts.min.js"></script>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | font-size: 14px;
|
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>加工中心</title>
|
|---|
| | | <link rel="stylesheet" href="../img/3.ico">
|
|---|
| | | <link rel="shortcut icon" href="${ctx}/img/3.ico" />
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/element.css">
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/style.css">
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <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>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | font-size: 14px;
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | |
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zs {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | | .wai_zs {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | | .wai_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | | /* |
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | |
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | | } */
|
|---|
| | |
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-suibian {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-suibian {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-yous {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-yous {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-zuoshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-zuoshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #chart-youshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -5%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-youshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -5%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-youxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -19%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | | #chart-youxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -19%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: white;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | <body>
|
|---|
| | | <div id="wai">
|
|---|
| | | <div class="wai_zs">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: #5CADFE;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | | <body>
|
|---|
| | | <div id="app">
|
|---|
| | | <div id="wai">
|
|---|
| | | <div class="wai_zs">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></div>
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-zuoshang"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_yx">
|
|---|
| | | <div id="chart-youshang"></div>
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youxia"></div>
|
|---|
| | | <div id="chart-zuoshang"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_yx">
|
|---|
| | | <div id="chart-youshang"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youxia"></div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="centdv_time"><input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | </div>
|
|---|
| | | <div class="msgtab">
|
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="centdv_time"><input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | </div>
|
|---|
| | | <table class="msgtab">
|
|---|
| | | <thead>
|
|---|
| | | <tr>
|
|---|
| | | <th>设备</th>
|
|---|
| | | <th>订单号</th>
|
|---|
| | | <th>已加工数</th>
|
|---|
| | | <th>未加工数</th>
|
|---|
| | | <th>破损数</th>
|
|---|
| | | <th>更换倒计时</th>
|
|---|
| | | <th>耗材周期</th>
|
|---|
| | | <th>更换材料</th>
|
|---|
| | | </tr>
|
|---|
| | | </thead>
|
|---|
| | | <tbody>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | </tbody>
|
|---|
| | | </table>
|
|---|
| | | </div>
|
|---|
| | | </body>
|
|---|
| | | </body>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | // 1-下 --------------------------------------------------------------------------------------------------
|
|---|
| | | function zhutu () {
|
|---|
| | |
|
|---|
| | | var chartDom = document.getElementById('chart-wrap');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | <script>
|
|---|
| | | Vue.prototype.$echarts = echarts
|
|---|
| | | let app = new Vue({
|
|---|
| | | el: '#app',
|
|---|
| | | mixins: [mixin],
|
|---|
| | | data: {
|
|---|
| | | storage: null,
|
|---|
| | | val: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu2 () {
|
|---|
| | | var chartDom = document.getElementById('chart-suibian');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzs: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu3 () {
|
|---|
| | | var chartDom = document.getElementById('chart-yous');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valys: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu4 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youx');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyx: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu5 () {
|
|---|
| | | var chartDom = document.getElementById('chart-zuoxia');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzuoxia: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu6 () {
|
|---|
| | | var chartDom = document.getElementById('chart-zuoshang');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzuoshang: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu7 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youxia');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyouxia: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu8 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youshang');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyoushang: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | tableHead: ['设备', '订单号', '已加工数', '未加工数', '破损数', '更换倒计时', '耗材周期', '更换材料'],
|
|---|
| | | selectDate: '',
|
|---|
| | | tableData: [
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | show: true,
|
|---|
| | | showGlassType: '',
|
|---|
| | | showGlassIndex: 0
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | echarsInit () {
|
|---|
| | | //console.log(1)
|
|---|
| | | let a = this.$echarts.init(document.getElementById('chart-wrap'))
|
|---|
| | | a.setOption(this.val)
|
|---|
| | | let b = this.$echarts.init(document.getElementById('chart-suibian'))
|
|---|
| | | b.setOption(this.valzs)
|
|---|
| | | let c = this.$echarts.init(document.getElementById('chart-yous'))
|
|---|
| | | c.setOption(this.valys)
|
|---|
| | | let d = this.$echarts.init(document.getElementById('chart-youx'))
|
|---|
| | | d.setOption(this.valyx)
|
|---|
| | | let e = this.$echarts.init(document.getElementById('chart-zuoxia'))
|
|---|
| | | e.setOption(this.valzuoxia)
|
|---|
| | | let f = this.$echarts.init(document.getElementById('chart-zuoshang'))
|
|---|
| | | f.setOption(this.valzuoshang)
|
|---|
| | | let g = this.$echarts.init(document.getElementById('chart-youxia'))
|
|---|
| | | g.setOption(this.valyouxia)
|
|---|
| | | let h = this.$echarts.init(document.getElementById('chart-youshang'))
|
|---|
| | | h.setOption(this.valyoushang)
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | async mounted () {
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | | await this.echarsInit()
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | zhutu2();
|
|---|
| | | zhutu3();
|
|---|
| | | zhutu4();
|
|---|
| | | zhutu5();
|
|---|
| | | zhutu6();
|
|---|
| | | zhutu7();
|
|---|
| | | zhutu8();
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| | | })
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | </html> |
|---|
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8"
|
|---|
| | | pageEncoding="UTF-8"%>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>水刀</title>
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <script src="../js/echarts.min.js"></script>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | font-size: 14px;
|
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>水刀</title>
|
|---|
| | | <link rel="stylesheet" href="../img/3.ico">
|
|---|
| | | <link rel="shortcut icon" href="${ctx}/img/3.ico" />
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/element.css">
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/style.css">
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <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>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | font-size: 14px;
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | |
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zs {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | | .wai_zs {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | | .wai_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | | /* |
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | |
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | | } */
|
|---|
| | |
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-suibian {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-suibian {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-yous {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-yous {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 39%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-zuoshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | | #chart-zuoshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #chart-youshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -5%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | | #chart-youshang {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -5%;
|
|---|
| | | left: 50%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-youxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -19%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | | #chart-youxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -19%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: white;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | <body>
|
|---|
| | | <div id="wai">
|
|---|
| | | <div class="wai_zs">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: #5CADFE;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | | <body>
|
|---|
| | | <div id="app">
|
|---|
| | | <div id="wai">
|
|---|
| | | <div class="wai_zs">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></div>
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-zuoshang"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_yx">
|
|---|
| | | <div id="chart-youshang"></div>
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youxia"></div>
|
|---|
| | | <div id="chart-zuoshang"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_yx">
|
|---|
| | | <div id="chart-youshang"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youxia"></div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="centdv_time"><input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | </div>
|
|---|
| | | <div class="msgtab">
|
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="centdv_time"><input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | </div>
|
|---|
| | | <table class="msgtab">
|
|---|
| | | <thead>
|
|---|
| | | <tr>
|
|---|
| | | <th>设备</th>
|
|---|
| | | <th>订单号</th>
|
|---|
| | | <th>已加工数</th>
|
|---|
| | | <th>未加工数</th>
|
|---|
| | | <th>破损数</th>
|
|---|
| | | <th>更换倒计时</th>
|
|---|
| | | <th>耗材周期</th>
|
|---|
| | | <th>更换材料</th>
|
|---|
| | | </tr>
|
|---|
| | | </thead>
|
|---|
| | | <tbody>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试测试测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | <td>测试测试</td>
|
|---|
| | | </tr>
|
|---|
| | | </tbody>
|
|---|
| | | </table>
|
|---|
| | | </div>
|
|---|
| | | </body>
|
|---|
| | | </body>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | // 1-下 --------------------------------------------------------------------------------------------------
|
|---|
| | | function zhutu () {
|
|---|
| | |
|
|---|
| | | var chartDom = document.getElementById('chart-wrap');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | <script>
|
|---|
| | | Vue.prototype.$echarts = echarts
|
|---|
| | | let app = new Vue({
|
|---|
| | | el: '#app',
|
|---|
| | | mixins: [mixin],
|
|---|
| | | data: {
|
|---|
| | | storage: null,
|
|---|
| | | val: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu2 () {
|
|---|
| | | var chartDom = document.getElementById('chart-suibian');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzs: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu3 () {
|
|---|
| | | var chartDom = document.getElementById('chart-yous');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valys: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu4 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youx');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyx: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu5 () {
|
|---|
| | | var chartDom = document.getElementById('chart-zuoxia');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'FFFFF0' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzuoxia: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu6 () {
|
|---|
| | | var chartDom = document.getElementById('chart-zuoshang');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valzuoshang: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu7 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youxia');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyouxia: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#00CED1' } },
|
|---|
| | | axisLabel: { color: '#00CED1' },
|
|---|
| | | splitLine: { lineStyle: { color: '#00CED1', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#00CED1",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#00CED1",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#00CED1' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'Direct',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | function zhutu8 () {
|
|---|
| | | var chartDom = document.getElementById('chart-youshang');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#87CEFA' } },
|
|---|
| | | axisLabel: { color: '#87CEFA' },
|
|---|
| | | splitLine: { lineStyle: { color: '#87CEFA', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | valyoushang: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } },
|
|---|
| | | axisLabel: { color: '#5CADFE' },
|
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "水耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#5CADFE",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#5CADFE' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '水耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | tableHead: ['设备', '订单号', '已加工数', '未加工数', '破损数', '更换倒计时', '耗材周期', '更换材料'],
|
|---|
| | | selectDate: '',
|
|---|
| | | tableData: [
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: '切割机',
|
|---|
| | | 1: 'NG12221111',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1341',
|
|---|
| | | 4: '11',
|
|---|
| | | 5: '2023-7-31 09:25:14',
|
|---|
| | | 6: '2023-7-31 09:25:21',
|
|---|
| | | 7: '更换'
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | show: true,
|
|---|
| | | showGlassType: '',
|
|---|
| | | showGlassIndex: 0
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | echarsInit () {
|
|---|
| | | //console.log(1)
|
|---|
| | | let a = this.$echarts.init(document.getElementById('chart-wrap'))
|
|---|
| | | a.setOption(this.val)
|
|---|
| | | let b = this.$echarts.init(document.getElementById('chart-suibian'))
|
|---|
| | | b.setOption(this.valzs)
|
|---|
| | | let c = this.$echarts.init(document.getElementById('chart-yous'))
|
|---|
| | | c.setOption(this.valys)
|
|---|
| | | let d = this.$echarts.init(document.getElementById('chart-youx'))
|
|---|
| | | d.setOption(this.valyx)
|
|---|
| | | let e = this.$echarts.init(document.getElementById('chart-zuoxia'))
|
|---|
| | | e.setOption(this.valzuoxia)
|
|---|
| | | let f = this.$echarts.init(document.getElementById('chart-zuoshang'))
|
|---|
| | | f.setOption(this.valzuoshang)
|
|---|
| | | let g = this.$echarts.init(document.getElementById('chart-youxia'))
|
|---|
| | | g.setOption(this.valyouxia)
|
|---|
| | | let h = this.$echarts.init(document.getElementById('chart-youshang'))
|
|---|
| | | h.setOption(this.valyoushang)
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | async mounted () {
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | | await this.echarsInit()
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | zhutu2();
|
|---|
| | | zhutu3();
|
|---|
| | | zhutu4();
|
|---|
| | | zhutu5();
|
|---|
| | | zhutu6();
|
|---|
| | | zhutu7();
|
|---|
| | | zhutu8();
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| | | })
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | </html> |
|---|
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8"
|
|---|
| | | pageEncoding="UTF-8"%>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>下片堆垛</title>
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <script src="../js/echarts.min.js"></script>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|
| | | <html>
|
|---|
| | |
|
|---|
| | | <head>
|
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|---|
| | | <title>下片堆垛</title>
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/element.css">
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/style.css">
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <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>
|
|---|
| | | </head>
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #D5EAFF;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | | #app {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai_shang {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 50%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai_xia {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 50%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | | #wai_shang {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 48%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .shang_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | | #wai_xia {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 50%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .shang_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | | .shang_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 70%;
|
|---|
| | | height: 10%;
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | | .shang_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | | .centdv_time {
|
|---|
| | | width: 70%;
|
|---|
| | | height: 10%;
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: white;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | | .centdv_time input {
|
|---|
| | | height: 25px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | | padding: 5px;
|
|---|
| | | }
|
|---|
| | | .btn {
|
|---|
| | | text-align: center;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 29px;
|
|---|
| | | /* outline: none; */
|
|---|
| | | border: none;
|
|---|
| | | background-color: #5CADFE;
|
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | | padding: 5px;
|
|---|
| | | }
|
|---|
| | | .msgtab {
|
|---|
| | | width: 99%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | | background-color: #F0FFFF;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .double1,
|
|---|
| | | .double1 input {
|
|---|
| | | background-color: #e1f0fd;
|
|---|
| | | }
|
|---|
| | | .msgtab1 {
|
|---|
| | | width: 99%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab tr th {
|
|---|
| | | color: white;
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab tr td {
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | | .xia_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 tr th {
|
|---|
| | | color: white;
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | | .xia_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 tr td {
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 90%;
|
|---|
| | | height: 80%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .xia_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | | .title {
|
|---|
| | | color: black;
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .xia_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | | .centdv_time {
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 90%;
|
|---|
| | | height: 80%;
|
|---|
| | | }
|
|---|
| | | #tuopan {
|
|---|
| | | width: 80%;
|
|---|
| | | height: 90%;
|
|---|
| | | background-color: #696969;
|
|---|
| | | border-radius: 25px 25px 0 0;
|
|---|
| | | margin: 0 auto;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .title {
|
|---|
| | | color: white;
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | | #tuopan_jindu {
|
|---|
| | | border-radius: 0 0 25px 25px;
|
|---|
| | | width: 100%;
|
|---|
| | | /* height: 75%; */
|
|---|
| | | background-color: #5CADFE;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | | .xptile {
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | text-align: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #tuopan {
|
|---|
| | | width: 80%;
|
|---|
| | | height: 90%;
|
|---|
| | | background-color: white;
|
|---|
| | | border-radius: 25px 25px 0 0;
|
|---|
| | | margin: 0 auto;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | | .jindu {
|
|---|
| | | color: black;
|
|---|
| | | width: 100px;
|
|---|
| | | height: 5%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | position: relative;
|
|---|
| | | top: -55%;
|
|---|
| | | left: 36%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tuopan_jindu {
|
|---|
| | | border-radius: 0 0 25px 25px;
|
|---|
| | | width: 100%;
|
|---|
| | | height: 80%;
|
|---|
| | | background-color: #87CEFA;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | | #jindu_zhi {
|
|---|
| | | border: none;
|
|---|
| | | background-color: transparent;
|
|---|
| | | height: 100%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | .xptile {
|
|---|
| | | color: white;
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | text-align: center;
|
|---|
| | | }
|
|---|
| | | <body>
|
|---|
| | | <div id="app">
|
|---|
| | | <div id="wai">
|
|---|
| | | <div id="wai_shang">
|
|---|
| | | <div class="shang_zuo">
|
|---|
| | | <div class="title">
|
|---|
| | | 当前生产信息：
|
|---|
| | |
|
|---|
| | | 等待托盘数：
|
|---|
| | |
|
|---|
| | | 已完工托盘数：
|
|---|
| | |
|
|---|
| | | .jindu {
|
|---|
| | | color: black;
|
|---|
| | | width: 150px;
|
|---|
| | | height: 5%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | position: relative;
|
|---|
| | | top: -50%;
|
|---|
| | | left: 42%
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | <body>
|
|---|
| | | <div id="wai">
|
|---|
| | | <div id="wai_shang">
|
|---|
| | | <div class="shang_zuo">
|
|---|
| | | <div class="title">
|
|---|
| | | 当前生产信息：
|
|---|
| | |
|
|---|
| | | 等待托盘数：
|
|---|
| | |
|
|---|
| | | 已完工托盘数：
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="msgtab">
|
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="shang_you">
|
|---|
| | | <div class="centdv_time">
|
|---|
| | | 总产量查询：
|
|---|
| | | <input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | </div>
|
|---|
| | | <div class="msgtab1">
|
|---|
| | | <show-table :tablehead="tableHeads" :tabledata="tableDatas"></show-table>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | <table class="msgtab">
|
|---|
| | | <thead>
|
|---|
| | | <tr>
|
|---|
| | | <th>订单号</th>
|
|---|
| | | <th>产品信息</th>
|
|---|
| | | <th>已加工数</th>
|
|---|
| | | <th>待加工数</th>
|
|---|
| | | <th>破损数</th>
|
|---|
| | | </tr>
|
|---|
| | | </thead>
|
|---|
| | | <tbody>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | </tbody>
|
|---|
| | | </table>
|
|---|
| | | </div>
|
|---|
| | | <div class="shang_you">
|
|---|
| | | <div class="centdv_time">
|
|---|
| | | 总产量查询：
|
|---|
| | | <input type="date">~<input type="date">
|
|---|
| | |
|
|---|
| | | <button class="btn" type="button">查询</button>
|
|---|
| | | <div id="wai_xia">
|
|---|
| | | <div class="xia_zuo">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="xia_you">
|
|---|
| | |
|
|---|
| | | <div id="tuopan">
|
|---|
| | | <div id="tuopan_jindu"></div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="xptile">当前下片进度</div>
|
|---|
| | | <div class="jindu"><input type="text" id="jindu_zhi"></div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <table class="msgtab1">
|
|---|
| | | <thead>
|
|---|
| | | <tr>
|
|---|
| | | <th>订单号</th>
|
|---|
| | | <th>产品信息</th>
|
|---|
| | | <th>已加工数</th>
|
|---|
| | | <th>待加工数</th>
|
|---|
| | | <th>破损数</th>
|
|---|
| | | </tr>
|
|---|
| | | </thead>
|
|---|
| | | <tbody>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="one1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | <tr class="double1">
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | <td></td>
|
|---|
| | | </tr>
|
|---|
| | | </tbody>
|
|---|
| | | </table>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | <div id="wai_xia">
|
|---|
| | | <div class="xia_zuo">
|
|---|
| | | <div id="chart-wrap"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="xia_you">
|
|---|
| | |
|
|---|
| | | <div id="tuopan">
|
|---|
| | | <div class="tuopan_jindu"></div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="xptile">当前下片进度</div>
|
|---|
| | | <div class="jindu">数量：40/50</div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </body>
|
|---|
| | | <script>
|
|---|
| | | function zhutu () {
|
|---|
| | |
|
|---|
| | | var chartDom = document.getElementById('chart-wrap');
|
|---|
| | | var myChart = echarts.init(chartDom);
|
|---|
| | | var option;
|
|---|
| | |
|
|---|
| | | option = {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#FFFFF0' } },
|
|---|
| | | axisLabel: { color: '#FFFFF0' },
|
|---|
| | | splitLine: { lineStyle: { color: '#FFFFF0', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | </body>
|
|---|
| | | <script>
|
|---|
| | | Vue.prototype.$echarts = echarts
|
|---|
| | | let app = new Vue({
|
|---|
| | | el: '#app',
|
|---|
| | | mixins: [mixin],
|
|---|
| | | data: {
|
|---|
| | | storage: null,
|
|---|
| | | val: {
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | axisPointer: {
|
|---|
| | | type: 'shadow'
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | grid: {
|
|---|
| | | left: '3%',
|
|---|
| | | right: '4%',
|
|---|
| | | bottom: '3%',
|
|---|
| | | containLabel: true
|
|---|
| | | },
|
|---|
| | | xAxis: [
|
|---|
| | | {
|
|---|
| | | type: 'category',
|
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|---|
| | | axisLine: { lineStyle: { color: '#696969' } },
|
|---|
| | | axisLabel: { color: '#696969' },
|
|---|
| | | splitLine: { lineStyle: { color: '#696969', type: 'dashed' } }
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | yAxis: [
|
|---|
| | | {
|
|---|
| | | type: "value",
|
|---|
| | | name: "电耗",
|
|---|
| | | nameTextStyle: {
|
|---|
| | | color: "#696969",
|
|---|
| | | fontSize: 12,
|
|---|
| | | padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
|
|---|
| | | },
|
|---|
| | | splitLine: {
|
|---|
| | | // 网格线
|
|---|
| | | show: true,
|
|---|
| | | lineStyle: { //分割线
|
|---|
| | | color: "#696969",
|
|---|
| | | width: 1,
|
|---|
| | | type: "dashed" //dotted：虚线 solid:实线
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // 轴文字
|
|---|
| | | color: "#696969",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#696969' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | },
|
|---|
| | | tableHead: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],
|
|---|
| | | selectDate: '',
|
|---|
| | | tableData: [
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | }
|
|---|
| | | ,
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | tableHeads: ['订单号', '产品信息', '已加工数', '待加工数', '破损数'],
|
|---|
| | | selectDate: '',
|
|---|
| | | tableDatas: [
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | }
|
|---|
| | | ,
|
|---|
| | | {
|
|---|
| | | 0: 'NG10000231',
|
|---|
| | | 1: '12mm超白平钢',
|
|---|
| | | 2: '123',
|
|---|
| | | 3: '1331',
|
|---|
| | | 4: '12',
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | show: true,
|
|---|
| | | showGlassType: '',
|
|---|
| | | showGlassIndex: 0,
|
|---|
| | | gao: 50
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: '电耗',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | echarsInit () {
|
|---|
| | | let a = this.$echarts.init(document.getElementById('chart-wrap'))
|
|---|
| | | a.setOption(this.val)
|
|---|
| | | },
|
|---|
| | | jindu () {
|
|---|
| | | let myDiv = document.getElementById("tuopan_jindu");
|
|---|
| | | let gao = 45;
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | | $("#jindu_zhi").val("数量：45 / 50");
|
|---|
| | | if (gao >= 40 && gao <= 45) {
|
|---|
| | | myDiv.style.height = "85%";
|
|---|
| | | }
|
|---|
| | | else if (gao > 45 && gao <= 49) {
|
|---|
| | | myDiv.style.height = "95%";
|
|---|
| | | }
|
|---|
| | | else if (gao > 30 && gao < 40) {
|
|---|
| | | myDiv.style.height = "77%";
|
|---|
| | | }
|
|---|
| | | else if (gao > 20 && gao <= 30) {
|
|---|
| | | myDiv.style.height = "57%";
|
|---|
| | | }
|
|---|
| | | else if (gao > 10 && gao <= 20) {
|
|---|
| | | myDiv.style.height = "37%";
|
|---|
| | | }
|
|---|
| | | else if (gao >= 0 && gao <= 10) {
|
|---|
| | | myDiv.style.height = "17%";
|
|---|
| | | }
|
|---|
| | | else {
|
|---|
| | | myDiv.style.height = "100%";
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| | | },
|
|---|
| | | async mounted () {
|
|---|
| | |
|
|---|
| | | await this.echarsInit();
|
|---|
| | | this.jindu();
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | </html> |
|---|
