From 47763fb6eb1276f3b62f9327d98c9cd84766cdfd Mon Sep 17 00:00:00 2001
From: clll <1320612696@qq.com>
Date: 星期二, 01 八月 2023 14:30:27 +0800
Subject: [PATCH] 将界面修改为VUE框架
---
gmms/WebContent/dapingxianshi/shuidao.jsp | 1465 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 716 insertions(+), 749 deletions(-)
diff --git a/gmms/WebContent/dapingxianshi/shuidao.jsp b/gmms/WebContent/dapingxianshi/shuidao.jsp
index 5325a62..beeaf3a 100644
--- a/gmms/WebContent/dapingxianshi/shuidao.jsp
+++ b/gmms/WebContent/dapingxianshi/shuidao.jsp
@@ -1,79 +1,88 @@
-<%@ 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 {
@@ -101,747 +110,705 @@
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>
\ No newline at end of file
+ })
+
+ </script>
+
+ </html>
\ No newline at end of file
--
Gitblit v1.8.0