Merge branch 'master' of http://10.153.19.150:10101/r/Haier_MES
6个文件已修改
3 文件已重命名
8个文件已添加
1个文件已删除
| | |
|---|
| | | .mtj.tmp/ |
|---|
| | | |
|---|
| | | # Package Files # |
|---|
| | | *.jar |
|---|
| | | *.war |
|---|
| | | *.ear |
|---|
| | | |
|---|
| New file |
| | |
|---|
| | | <%@page import="ng.db.DBHelper"%>
|
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%>
|
|---|
| | | <%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> --%>
|
|---|
| | | <c:set var="ctx" value="${pageContext.request.contextPath}" />
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <title>æå大å±</title>
|
|---|
| | |
|
|---|
| | | <!-- Font Awesome -->
|
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
|
|---|
| | | <!-- Ionicons -->
|
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
|
|---|
| | | <!-- Theme style -->
|
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
|
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
|
|---|
| | | <link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
|---|
| | | <style type="text/css">
|
|---|
| | | @IMPORT url("../static/global/showtask/showtask.css");
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | var contextPath = "${pageContext.request.contextPath}";
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <link type="text/css" rel="stylesheet"
|
|---|
| | | href="../static/css/dataTables.bootstrap.css" />
|
|---|
| | | <link type="text/css" rel="stylesheet"
|
|---|
| | | href="../static/css/dataTables.tableTools.css" />
|
|---|
| | |
|
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script>
|
|---|
| | | <script src="../js/echarts.min.js"></script>
|
|---|
| | | <link rel="stylesheet" href="../js/static/css/element.css">
|
|---|
| | | <!-- <link rel="stylesheet" href="../js/static/css/style.css"> -->
|
|---|
| | | <script src="../js/static/js/vue.js"></script>
|
|---|
| | | <script src="../js/mixins.js"></script>
|
|---|
| | | <!-- import JavaScript -->
|
|---|
| | |
|
|---|
| | | <script src="../js/static/js/element.js"></script>
|
|---|
| | | <script src="../js/static/js/echarts.min.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/js/moment.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/js/sucaijiayuan.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/laydate/laydate.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/util/utilAlert.js"></script>
|
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|---|
| | |
|
|---|
| | | <style>
|
|---|
| | | *{
|
|---|
| | | margin:0;
|
|---|
| | | padding:0;
|
|---|
| | | }
|
|---|
| | | #top{
|
|---|
| | | height:25%;
|
|---|
| | | display:flex;
|
|---|
| | | }
|
|---|
| | | #center{
|
|---|
| | | height:50%;
|
|---|
| | | display:flex;
|
|---|
| | | }
|
|---|
| | | #bottom{
|
|---|
| | | height:25%;
|
|---|
| | | display:flex;
|
|---|
| | | }
|
|---|
| | | .top_div{
|
|---|
| | | width:25%;
|
|---|
| | | htight:100%;
|
|---|
| | | }
|
|---|
| | | .center_div{
|
|---|
| | | width:28%;
|
|---|
| | | htight:100%;
|
|---|
| | | display:flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | }
|
|---|
| | | .center_divs{
|
|---|
| | | width:46%;
|
|---|
| | | htight:100%;
|
|---|
| | | }
|
|---|
| | | .center_div_details{
|
|---|
| | | height:50%;
|
|---|
| | | width:100%;
|
|---|
| | | }
|
|---|
| | | .bottom_div{
|
|---|
| | | width:25%;
|
|---|
| | | htight:100%;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div id='app' style='background-color:#D5EAFF;width:100%;height: 100%;'>
|
|---|
| | | <div id="top">
|
|---|
| | | <div class="top_div">æåæº1产åå¾</div>
|
|---|
| | | <div class="top_div" id="Histogram1">æåæº1çµè</div>
|
|---|
| | | <div class="top_div" id="Histogram2">æåæº2çµè</div>
|
|---|
| | | <div class="top_div">æåæº2产åå¾</div>
|
|---|
| | | </div>
|
|---|
| | | <div id="center">
|
|---|
| | | <div class="center_div">
|
|---|
| | | <div class="center_div_details" id="Histogram5">æåæº1ç¨æ°´</div>
|
|---|
| | | <div class="center_div_details" id="Histogram6">æåæº3ç¨æ°´</div>
|
|---|
| | | </div>
|
|---|
| | | <div id="app" style="display:width:100%" class="center_divs">
|
|---|
| | | <el-table border
|
|---|
| | | :data="machine"
|
|---|
| | | height='100%'
|
|---|
| | | style="width: 100%;"
|
|---|
| | | :cell-class-name="tableRowClassName"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="name"
|
|---|
| | | label="设å¤">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="ip"
|
|---|
| | | label="订åå·">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="port"
|
|---|
| | | label="å·²å å·¥æ°é">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="st"
|
|---|
| | | label="å¾
å å·¥æ°é">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="count"
|
|---|
| | | label="ç ´ææ°é">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="count"
|
|---|
| | | label="æ´æ¢å¨æ">
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | prop="count"
|
|---|
| | | label="æ´æ¢å计æ¶">
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table>
|
|---|
| | | </div>
|
|---|
| | | <div class="center_div">
|
|---|
| | | <div class="center_div_details" id="Histogram7">æåæº2ç¨æ°´</div>
|
|---|
| | | <div class="center_div_details" id="Histogram8">æåæº4ç¨æ°´</div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div id="bottom">
|
|---|
| | | <div class="bottom_div">æåæº1产åå¾</div>
|
|---|
| | | <div class="bottom_div" id="Histogram3">æåæº1çµè</div>
|
|---|
| | | <div class="bottom_div" id="Histogram4">æåæº2çµè</div>
|
|---|
| | | <div class="bottom_div">æåæº2产åå¾</div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <script>
|
|---|
| | | Vue.prototype.$echarts = echarts
|
|---|
| | | let app =new Vue({
|
|---|
| | | el: '#app',
|
|---|
| | | mixins:[mixin],
|
|---|
| | | data:{
|
|---|
| | | machine:"",
|
|---|
| | | },
|
|---|
| | | methods:{
|
|---|
| | | tableRowClassName({row,column,rowIndex,columnIndex}) {
|
|---|
| | | |
|---|
| | | if (row['st'] == 'æªè¿æ¥' && columnIndex==3 ) {
|
|---|
| | | return 'success-row';
|
|---|
| | | }else{
|
|---|
| | | return ''; |
|---|
| | | }
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | window.onload=function(){
|
|---|
| | | zhutu("Histogram1",[10, 52, 200, 334, 390, 330, 220],"çµè");
|
|---|
| | | zhutu("Histogram2",[10, 52, 200, 334, 390, 330, 220],"çµè");
|
|---|
| | | zhutu("Histogram3",[10, 52, 200, 334, 390, 330, 220],"çµè");
|
|---|
| | | zhutu("Histogram4",[10, 52, 200, 334, 390, 330, 220],"çµè");
|
|---|
| | | zhutu("Histogram5",[10, 52, 200, 334, 390, 330, 220],"æ°´è");
|
|---|
| | | zhutu("Histogram6",[10, 52, 200, 334, 390, 330, 220],"æ°´è");
|
|---|
| | | zhutu("Histogram7",[10, 52, 200, 334, 390, 330, 220],"æ°´è");
|
|---|
| | | zhutu("Histogram8",[10, 52, 200, 334, 390, 330, 220],"æ°´è");
|
|---|
| | | }
|
|---|
| | | function zhutu (Cname,datas,Tname) {
|
|---|
| | |
|
|---|
| | | Â Â var chartDom = document.getElementById(Cname);
|
|---|
| | | Â Â 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: 'rgb(30, 144, 255)' } },
|
|---|
| | | Â Â Â Â Â axisLabel: { color: 'rgb(30, 144, 255)' },
|
|---|
| | | Â Â Â Â Â splitLine: { lineStyle: { color: 'rgb(30, 144, 255)', type: 'dashed' } }
|
|---|
| | | Â Â Â Â }
|
|---|
| | | Â Â Â ],
|
|---|
| | | Â Â Â yAxis: [
|
|---|
| | | Â Â Â Â {
|
|---|
| | | Â Â Â Â Â type: "value",
|
|---|
| | | Â Â Â Â Â name: Tname,
|
|---|
| | | Â Â Â Â Â nameTextStyle: {
|
|---|
| | | Â Â Â Â Â Â color: "rgb(30, 144, 255)",
|
|---|
| | | Â Â Â Â Â Â fontSize: 12,
|
|---|
| | |       padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦
|
|---|
| | | Â Â Â Â Â },
|
|---|
| | | Â Â Â Â Â splitLine: {
|
|---|
| | |       // ç½æ ¼çº¿
|
|---|
| | | Â Â Â Â Â Â show: true,
|
|---|
| | |       lineStyle: { //åå²çº¿
|
|---|
| | | Â Â Â Â Â Â Â color: "rgb(30, 144, 255)",
|
|---|
| | | Â Â Â Â Â Â Â width: 1,
|
|---|
| | |        type: "dashed" //dottedï¼è线 solid:å®çº¿
|
|---|
| | | Â Â Â Â Â Â }
|
|---|
| | | Â Â Â Â Â },
|
|---|
| | | Â Â Â Â Â axisLabel: {
|
|---|
| | | Â Â Â Â Â Â // è½´æå
|
|---|
| | | Â Â Â Â Â Â color: "rgb(30, 144, 255)",
|
|---|
| | | Â Â Â Â Â Â fontSize: 12,
|
|---|
| | | Â Â Â Â Â },
|
|---|
| | | Â Â Â Â },
|
|---|
| | |
|
|---|
| | | Â Â Â ],
|
|---|
| | | Â Â Â series: [
|
|---|
| | | Â Â Â Â {
|
|---|
| | |      name: 'çµè',
|
|---|
| | | Â Â Â Â Â type: 'bar',
|
|---|
| | | Â Â Â Â Â barWidth: '80%',
|
|---|
| | | Â Â Â Â Â data: datas,
|
|---|
| | | Â Â Â Â Â itemStyle: { color: 'rgb(30, 144, 255)' }
|
|---|
| | | Â Â Â Â },
|
|---|
| | |
|
|---|
| | | Â Â Â ]
|
|---|
| | | Â Â };
|
|---|
| | |
|
|---|
| | | Â Â option && myChart.setOption(option);
|
|---|
| | | Â }
|
|---|
| | | </script>
|
|---|
| | | </body>
|
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ 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;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #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_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | | background-color: #F0FFFF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .double1,
|
|---|
| | | .double1 input {
|
|---|
| | | background-color: #e1f0fd;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #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-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #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-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | 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%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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>
|
|---|
| | |
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></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>
|
|---|
| | | <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>
|
|---|
| | |
|
|---|
| | | <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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'æ°´è',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | zhutu2();
|
|---|
| | | zhutu3();
|
|---|
| | | zhutu4();
|
|---|
| | | zhutu5();
|
|---|
| | | zhutu6();
|
|---|
| | | zhutu7();
|
|---|
| | | zhutu8();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ 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;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #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_ys {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 49%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-bottom: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_zx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .wai_yx {
|
|---|
| | | width: 49%;
|
|---|
| | | height: 50%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 40%;
|
|---|
| | | border: 1px solid white;
|
|---|
| | | border-collapse: collapse;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 33%;
|
|---|
| | | left: 25%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | | background-color: #F0FFFF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .double1,
|
|---|
| | | .double1 input {
|
|---|
| | | background-color: #e1f0fd;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #container {
|
|---|
| | | width: 50%;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 17%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | #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-youx {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 60%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -65%;
|
|---|
| | | left: 0%
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #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-zuoxia {
|
|---|
| | | width: 50%;
|
|---|
| | | height: 58%;
|
|---|
| | | position: relative;
|
|---|
| | | top: 42%;
|
|---|
| | | 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%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 50%;
|
|---|
| | | height: 30%;
|
|---|
| | | position: relative;
|
|---|
| | | top: -71%;
|
|---|
| | | left: 0%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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>
|
|---|
| | |
|
|---|
| | | <div id="chart-suibian"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_ys">
|
|---|
| | | <div id="chart-yous"></div>
|
|---|
| | |
|
|---|
| | | <div id="chart-youx"></div>
|
|---|
| | | </div>
|
|---|
| | | <div class="wai_zx">
|
|---|
| | | <div id="chart-zuoxia"></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>
|
|---|
| | | <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>
|
|---|
| | |
|
|---|
| | | <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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | 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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#87CEFA",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'æ°´è',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#87CEFA' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | zhutu2();
|
|---|
| | | zhutu3();
|
|---|
| | | zhutu4();
|
|---|
| | | zhutu5();
|
|---|
| | | zhutu6();
|
|---|
| | | zhutu7();
|
|---|
| | | zhutu8();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| File was renamed from gmms/WebContent/tiemotaizu/tiemotaizu.jsp |
| | |
|---|
| | | <div="container-fluid">
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | <div id="app2">
|
|---|
| | | <div id="app">
|
|---|
| | | <div class="row">
|
|---|
| | | <div class="col-lg-12">
|
|---|
| | | <table class="table table-striped table-bordered">
|
|---|
| | |
|---|
| | |
|
|---|
| | |
|
|---|
| | | let app2 = new Vue({
|
|---|
| | | el: '#app2',
|
|---|
| | | el: '#app',
|
|---|
| | | mixins:[mixin],
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | |
|---|
| | | jianlitime:"2023-07-01",
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | |
|---|
| | | orders: [
|
|---|
| | | orders:[]
|
|---|
| | | /* orders: [
|
|---|
| | | {
|
|---|
| | | orderNo: 'NG2302020101',
|
|---|
| | | imageSrc: 'æ°æ®å¾.png',
|
|---|
| | |
|---|
| | | updateCycle: '5',
|
|---|
| | | countdown: ''
|
|---|
| | | }
|
|---|
| | | ] |
|---|
| | | ] */
|
|---|
| | | };
|
|---|
| | | |
|---|
| | |
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | |
|---|
| | |
|
|---|
| | | let sql="{call AXJ_dapingtiemodingdanchaxun()}"
|
|---|
| | | let flag=2;
|
|---|
| | | |
|---|
| | | this.loadAjxs('è´´è订ååå§æ¥è¯¢',sql,flag,"orders")
|
|---|
| | | loadAjxs('订ååå§æ¥è¯¢',sql,flag,"orders")
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | /* function zoomIn(element) {
|
|---|
| | | element.classList.add("zoom"); |
|---|
| | | }
|
|---|
| | | |
|---|
| | | function zoomOut(element) {
|
|---|
| | | element.classList.remove("zoom"); |
|---|
| | | } */
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | var dom = document.getElementById('container');
|
|---|
| | | var myChart = echarts.init(dom, null, {
|
|---|
| New file |
| | |
|---|
| | | <%@ 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;
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | body,
|
|---|
| | | html {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | background-color: #00008B;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: wrap;
|
|---|
| | | position: relative;
|
|---|
| | | margin: 0px;
|
|---|
| | | padding: 0px;
|
|---|
| | | justify-content: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai_shang {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 50%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #wai_xia {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 50%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-wrap: nowrap;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .shang_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .shang_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | color: white;
|
|---|
| | | width: 70%;
|
|---|
| | | height: 10%;
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | | padding: 5px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 {
|
|---|
| | | width: 100%;
|
|---|
| | | height: 90%;
|
|---|
| | | /* border: 1px solid white; */
|
|---|
| | | padding: 5px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .one1,
|
|---|
| | | .one1 input {
|
|---|
| | | background-color: #F0FFFF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .double1,
|
|---|
| | | .double1 input {
|
|---|
| | | background-color: #e1f0fd;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 tr th {
|
|---|
| | | color: white;
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .msgtab1 tr td {
|
|---|
| | | white-space: nowrap;
|
|---|
| | | text-align: center;
|
|---|
| | | height: 20px;
|
|---|
| | | line-height: 20px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .xia_zuo {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .xia_you {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 50%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #chart-wrap {
|
|---|
| | | width: 90%;
|
|---|
| | | height: 80%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .title {
|
|---|
| | | color: white;
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .centdv_time {
|
|---|
| | | font-size: 18px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #tuopan {
|
|---|
| | | width: 80%;
|
|---|
| | | height: 90%;
|
|---|
| | | background-color: white;
|
|---|
| | | border-radius: 25px 25px 0 0;
|
|---|
| | | margin: 0 auto;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .tuopan_jindu {
|
|---|
| | | border-radius: 0 0 25px 25px;
|
|---|
| | | width: 100%;
|
|---|
| | | height: 80%;
|
|---|
| | | background-color: #87CEFA;
|
|---|
| | | transform: rotate(180deg);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .xptile {
|
|---|
| | | color: white;
|
|---|
| | | height: 10%;
|
|---|
| | | font-size: 18px;
|
|---|
| | | text-align: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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>
|
|---|
| | | <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>
|
|---|
| | | <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:å®çº¿
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | axisLabel: {
|
|---|
| | | // è½´æå
|
|---|
| | | color: "#FFFFF0",
|
|---|
| | | fontSize: 12,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ],
|
|---|
| | | series: [
|
|---|
| | | {
|
|---|
| | | name: 'çµè',
|
|---|
| | | type: 'bar',
|
|---|
| | | barWidth: '80%',
|
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220],
|
|---|
| | | itemStyle: { color: '#FFFFF0' }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ]
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | option && myChart.setOption(option);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | window.onload = function () {
|
|---|
| | | zhutu();
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | | </html> |
|---|
| | |
|---|
| | | var mixin={ |
|---|
| | | methods:{ |
|---|
| | | connects:function(gongneng,sql,flag,num){ |
|---|
| | | $.post("../mysqlInsert/mysql.jsp", |
|---|
| | | {"gongneng":gongneng,"sql":sql,'flag':flag,'anquanma':json["anquanma"]}, |
|---|
| | | function(result){ |
|---|
| | | if(num==1){ |
|---|
| | | result=$(result).text(); |
|---|
| | | index = result.indexOf("[["); |
|---|
| | | if(index>-1){ |
|---|
| | | if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | }else{ |
|---|
| | | result=result.substring(index).trim() |
|---|
| | | alert(result); |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }else{ |
|---|
| | | alert(gongneng+"æåï¼") |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | .fail(function(response) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | return false; |
|---|
| | | }); |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("gongneng",gongneng); |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",flag); |
|---|
| | | param.append("anquanma",json["anquanma"]); |
|---|
| | | |
|---|
| | | this.$http.post( '../mysqlInsert/mysql.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | if(num==1){ |
|---|
| | | result=$(response.data).text(); |
|---|
| | | index = result.indexOf("[["); |
|---|
| | | if(index>-1){ |
|---|
| | | if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | }else{ |
|---|
| | | result=result.substring(index).trim() |
|---|
| | | alert(result); |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | alert(gongneng+"æåï¼") |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | loadAjxss:function(gongneng,sql,flag,vals){ |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",flag); |
|---|
| | | param.append("anquanma",json["anquanma"]); |
|---|
| | | |
|---|
| | | |
|---|
| | | this.$http.post( '../mysqlInsert/mysql.jsp',param |
|---|
| | | ) |
|---|
| | | |
|---|
| | | .then(function (response) { |
|---|
| | | if(flag==2){ |
|---|
| | | let result=$(response.data).text(); |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误1ï¼"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | .fail(function(response) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误2ï¼"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | response.setContentType("text/html; charset=utf-8"); |
|---|
| | | %> |
|---|
| | | |
|---|
| | | <%-- <%@ include file="/WEB-INF/../login/check.jsp" %> |
|---|
| | | --%> |
|---|
| | | <c:set var="ctx" value="${pageContext.request.contextPath}"/> |
|---|
| | | <!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="shortcut icon" href="../img/3.ico" /> |
|---|
| | | <link rel="shortcut icon" href="../img/3.ico" /> |
|---|
| | | <style> |
|---|
| | | #top { |
|---|
| | | background-image: linear-gradient(to right, #C6E2FF, #C6E2FF); |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | %> |
|---|
| | | <iframe id='main' src='machinelistcontent.jsp?adminid="+adminid+"&xingming="+xingming+"&dengji="+dengji+"&anquanma="+anquanma+"&yuyan="+yuyan+"' style="width:87%;height:90%" frameborder='0'></iframe> |
|---|
| | | <iframe id='main' src='machinelistcontent.jsp?adminid="+adminid+"&xingming="+xingming+"&dengji="+dengji+"&anquanma="+anquanma+"&yuyan="+yuyan+"' style="width:87%;height:90%" frameborder='0'></iframe> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@page import="builder.Manager"%> |
|---|
| | | <% |
|---|
| | | |
|---|
| | | String zt=request.getParameter("zt"); |
|---|
| | | String peifanhao=request.getParameter("peifanhao"); |
|---|
| | | |
|---|
| | | int zts =Integer.valueOf(zt); |
|---|
| | | int peifanhaos =Integer.valueOf(peifanhao); |
|---|
| | | |
|---|
| | | /* Manager.sendtoPLC(76,20,4,new byte[]{0,1,0,zt},0); |
|---|
| | | Manager.sendtoPLC(77,20,4,new byte[]{0,1,0,zt},0); */ |
|---|
| | | if(zts==2){ |
|---|
| | | Manager.sendtoPLC(76,20,4,new byte[]{0,(byte)(peifanhaos&0xff),0,0},0); |
|---|
| | | }else if(zts==3){ |
|---|
| | | Manager.sendtoPLC(76,20,4,new byte[]{0,0,0,0},0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | %> |
|---|
| | |
|---|
| | | loadAjxs('订å表头',sql,flag,"tableHead") |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_order_produce_select()}" |
|---|
| | | loadAjxs('订å产åæ¥è¯¢',sql,flag,"orderProduce") |
|---|
| | | loadAjxs('订å产åæ¥è¯¢',sql,flag,"orderProduce") |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <%@page import="ng.db.DBHelper"%> |
|---|
| | | <c:set var="ctx" value="${pageContext.request.contextPath}" /> |
|---|
| | | |
|---|
| | | <html> |
|---|
| | |
|---|
| | | |
|---|
| | | <button @click="dainjishijian('ç»æä»»å¡',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >ç»æä»»å¡</button> |
|---|
| | | |
|---|
| | | <button @click="dainjishijian('åæ¶ä»»å¡',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >æå¨å®æ</button> |
|---|
| | | <button @click="dainjishijian('åæ¶ä»»å¡',item['0_id'])" style='background-color: #5CADFE' class='btn btn-large btn-success' >åæ¶ä»»å¡</button> |
|---|
| | | </td> |
|---|
| | | <!-- <td v-else-if="item[11]==2"> |
|---|
| | | <button @click="dainjishijian('éæ°ä¸å',item[0])" style='background-color: #5CADFE' class='btn btn-large btn-success' >éæ°ä¸å</button> |
|---|
| | |
|---|
| | | <button type="button" @click='renwuguanliquxiao' class="btn btn-default btn-lg" |
|---|
| | | data-dismiss="modal">åæ¶</button> |
|---|
| | | |
|---|
| | | <button id="dianjishijian" @click='renwuguanli' type="button" class="btn btn-primary btn-lg" |
|---|
| | | <button id="dianjishijian" @click='getMSg' type="button" class="btn btn-primary btn-lg" |
|---|
| | | id="surefinish">确认</button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|---|
| | | <script src="../js/vue.min.js"></script> |
|---|
| | | <script src="../js/axios.min.js"></script> |
|---|
| | | <script src="../js/mixins.js"></script> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | Vue.prototype.$http= axios |
|---|
| | | let app = new Vue({ |
|---|
| | | el:'#app', |
|---|
| | | mixins:[mixin], |
|---|
| | |
|---|
| | | shuzu:[], |
|---|
| | | shuzu1:[], |
|---|
| | | lines:<%= request.getParameter("id") %>, |
|---|
| | | peifanhao:[], |
|---|
| | | subval:{ |
|---|
| | | id:'', |
|---|
| | | type:'' |
|---|
| | |
|---|
| | | } |
|---|
| | | this.subval.id=id |
|---|
| | | }, |
|---|
| | | renwuguanli:function(){ |
|---|
| | | sql="{call AXJ_qiegeguanli_threelinetask_renwuguanli(?,?,?)}~"+JSON.stringify(this.subval); |
|---|
| | | console.log(sql); |
|---|
| | | this.connects("ä»»å¡ä¿®æ¹",sql,1,1) |
|---|
| | | getMSg(){ |
|---|
| | | //this.getMSgs(); |
|---|
| | | this.renwuguanli(); |
|---|
| | | }, |
|---|
| | | getMSgs(){ |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | // åé第ä¸ä¸ªè¯·æ±ï¼è·å id |
|---|
| | | sql="{call AXJ_qiegeguanli_threelinetask_renwuguanli(?,?,?)}~"+JSON.stringify(this.subval); |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("gongneng",'ä»»å¡ä¿®æ¹'); |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",1); |
|---|
| | | param.append("anquanma",json["anquanma"]); |
|---|
| | | |
|---|
| | | this.$http.post('../mysqlInsert/mysql.jsp',param).then(({ data }) => { |
|---|
| | | let result=$(data).text(); |
|---|
| | | index = result.indexOf("[["); |
|---|
| | | if(index>-1){ |
|---|
| | | if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | }else{ |
|---|
| | | result=result.substring(index).trim() |
|---|
| | | alert(result); |
|---|
| | | resolve(); |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | alert("ä»»å¡ä¿®æ¹æåï¼") |
|---|
| | | window.location.reload(); |
|---|
| | | |
|---|
| | | } |
|---|
| | | }).catch(err => { |
|---|
| | | console.log(err.msg); |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | renwuguanli(){ |
|---|
| | | this.getMSgs().then(() => { |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("zt",this.subval.type); |
|---|
| | | param.append("peifanhao",this.peifanhao[0]['0_recipe_no']); |
|---|
| | | this.$http.post( '../mysqlInsert/toPlc.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | console.log(response); |
|---|
| | | }) |
|---|
| | | |
|---|
| | | .catch(function (error) { |
|---|
| | | alert('Error: ' + "æå¡å¨æºå¨è¿æ¥åçé误ï¼"); |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | renwuguanliquxiao:function(){ |
|---|
| | | this.subval=''; |
|---|
| | |
|---|
| | | let sql="{call AXJ_qiegeguanli_threelinetask_list1()}"; |
|---|
| | | let flag=2; |
|---|
| | | loadAjxs('ä»»å¡æ¥è¯¢æå',sql,flag,"shuzu"); |
|---|
| | | sql="{call AXJ_qiegeguanli_peifanghao_cahxun()}"; |
|---|
| | | loadAjxs('é
æ¹å·æ¥è¯¢',sql,flag,"peifanhao"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | |
|---|
| | | </script> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body style="padding: 20px;background-color:#D5EAFF;height:100%"> |
|---|
| | | <body style="background-color:#D5EAFF;height:100%"> |
|---|
| | | <!-- Content Wrapper. Contains page content --> |
|---|
| | | <div class="" id='app' style='background-color:#D5EAFF;height:100%'> |
|---|
| | | <!-- Content Header (Page header) --> |
|---|
| | |
|---|
| | | <div class="box box-default" style="background-color:#D5EAFF;"> |
|---|
| | | <div class="box-header with-border"> |
|---|
| | | <h3 class="box-title">ä»å¨</h3> |
|---|
| | | <span :class="connect[0][1]">{{connect[0][0]}}</span> |
|---|
| | | <span :class="connect[0]['1_classname']">{{connect[0]['0_connect_state']}}</span> |
|---|
| | | </div> |
|---|
| | | <!-- /.box-header --> |
|---|
| | | <button type="button" @click="delAll('éæ°å¼å§')" class="btn btn-primary ">éæ°å¼å§</button> |
|---|
| | | <button type="button" @click="delAll('å®æ')" class="btn btn-primary ">ä»»å¡å®æ</button> |
|---|
| | | <button type="button" @click="delAll('å é¤')" class="btn btn-primary ">å é¤ä»»å¡</button> |
|---|
| | | <div class="box-body" style="height:450px;overflow-y:auto;"> |
|---|
| | | <div class="box-body" style="height:365px;overflow-y:auto;"> |
|---|
| | | <table class="table table-striped table-hover" |
|---|
| | | style="font-size: 18px;" id="example2"> |
|---|
| | | <thead> |
|---|
| | |
|---|
| | | <tbody> |
|---|
| | | <tr v-for="items in shuzu"> |
|---|
| | | <td><input v-model="shelftaskids" type='checkbox' :value="items[0]"/></td> |
|---|
| | | <td>{{items["0"]}}</td> |
|---|
| | | <td>{{items[1]}}</td> |
|---|
| | | <td>{{items[2]}}</td> |
|---|
| | | <td>{{items[8]}}</td> |
|---|
| | | <td>{{items[9]}}</td> |
|---|
| | | <td>{{items[6]}}</td> |
|---|
| | | <td>{{items['0_id']}}</td> |
|---|
| | | <td>{{items['1_task_type']}}</td> |
|---|
| | | <td>{{items['2_task_state']}}</td> |
|---|
| | | <td>{{items['8_raw_thickness']}}</td> |
|---|
| | | <td>{{items['9_color']}}</td> |
|---|
| | | <td>{{items['6_start_time']}}</td> |
|---|
| | | </tr> |
|---|
| | | </tbody> |
|---|
| | | </table> |
|---|
