From d3b1328cd9c2bf029229cc9a8e8ac445450055b8 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期五, 09 五月 2025 13:18:27 +0800
Subject: [PATCH] 更新前端页面显示图形
---
gmms/WebContent/bigScreen/twoglassCut.jsp | 654 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 308 insertions(+), 346 deletions(-)
diff --git a/gmms/WebContent/bigScreen/twoglassCut.jsp b/gmms/WebContent/bigScreen/twoglassCut.jsp
index 81349d6..22c0ad4 100644
--- a/gmms/WebContent/bigScreen/twoglassCut.jsp
+++ b/gmms/WebContent/bigScreen/twoglassCut.jsp
@@ -5,7 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏅鸿兘鍒堕�犲彲瑙嗗寲</title>
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<%-- <script src="https://csdn.jsdelivr.net/npm/chart.js"></script>--%>
+
+
<style>
body {
font-family: Arial, sans-serif;
@@ -137,16 +139,20 @@
background-color: #007bff;
color: white;
}
+ #biaoti{
+ color:black;
+ margin-left: 350px;
+ }
</style>
</head>
<body>
-<div class="container">
+<div id="app" class="container">
<!-- Header Section -->
<div class="header">
<h1>鍖楃幓鏅鸿兘鍙鍖�</h1>
- <div class="date-time">
- <span>鏁版嵁鏇存柊鏃堕棿: 2025-03-31 12:50:52</span>
- </div>
+<%-- <div class="date-time">--%>
+<%-- <span>鏁版嵁鏇存柊鏃堕棿: 2025-04-31 12:50:52</span>--%>
+<%-- </div>--%>
<!-- 鎼滅储鏍� -->
<div class="search-bar">
<!-- 浜т笟涓嬫媺妗� -->
@@ -156,16 +162,16 @@
<!-- 浜у搧澶х被涓嬫媺妗� -->
<select id="product-category-select">
- <option value="">閫夋嫨浜у搧澶х被</option>
- <option value="浜у搧澶х被1">浜у搧澶х被1</option>
- <option value="浜у搧澶х被2">浜у搧澶х被2</option>
- <option value="浜у搧澶х被3">浜у搧澶х被3</option>
+ <option value="">鍏ㄩ儴</option>
+ <option value="1">娑堟瘨鏌�</option>
+ <option value="2">钂哥儰绠�</option>
+ <option value="3">鐑熸満</option>
</select>
<!-- 宸ョ▼涓嬫媺妗� -->
<select id="project-select">
<option value="">鑾遍槼鍘ㄧ數</option>
- <option value="宸ョ▼1">宸ョ▼1</option>
+
</select>
<!-- 寮�濮嬫棩鏈� -->
@@ -175,10 +181,10 @@
<input type="date" id="end-date" />
<!-- 鏌ヨ鎸夐挳 -->
- <button onclick="filterData()">鏌ヨ</button>
-
+ <button @click="filterData()">鏌ヨ</button>
+ <h2 id="biaoti">{{title}}</h2>
<!-- 閲嶇疆鎸夐挳 -->
- <button class="reset-btn" onclick="resetFilters()">閲嶇疆</button>
+<%-- <button class="reset-btn" onclick="resetFilters()">閲嶇疆</button>--%>
</div>
</div>
@@ -190,7 +196,7 @@
<div class="top-blocks">
<div class="top-block">
<div class="title">璁″垝瀹屾垚鐜�</div>
- <div class="value">111.26%</div>
+ <div class="value">76.00%</div>
</div>
<div class="top-block">
<div class="title">宸ョ▼涓嶈壇鐜�</div>
@@ -208,82 +214,48 @@
<!-- Chart Section -->
<div class="chart-container">
- <!-- 绗竴涓秼鍔垮浘 (鏌辩姸鍥� - 璁㈠崟璁″垝鍜岃鍗曞畬鎴�) -->
- <div class="chart">
- <canvas id="trendChart1"></canvas>
- </div>
- <!-- 绗簩涓秼鍔垮浘 (鏌辩姸鍥� - 宸ョ▼涓嶈壇鍙版暟鍜屽伐绋嬩笉鑹巼) -->
- <div class="chart">
- <canvas id="trendChart2"></canvas>
- </div>
- <!-- 绗笁涓秼鍔垮浘 (鏌辩姸鍥� - 鍋滄満鏃堕暱鍜屽仠鏈烘椂鐜�) -->
- <div class="chart">
- <canvas id="trendChart3"></canvas>
- </div>
+ <div id="trendChart1" class="chart"></div>
+ <div id="trendChart2" class="chart"></div>
+ <div id="trendChart3" class="chart"></div>
+ <!-- 鏄剧ず鏇茬嚎鍥� -->
+ <div id="trendChart4" class="chart"></div>
+
</div>
<!-- Table Section -->
<div class="side-visual">
- <table class="data-table">
- <thead>
- <tr>
- <th>鏃ユ湡</th>
- <th>浜у搧鍚嶇О</th>
- <th>宸ュ巶鍚嶇О</th>
- <th>绾夸綋</th>
- <th>璁㈠崟璁″垝</th>
- <th>璁㈠崟瀹屾垚</th>
- <th>宸紓</th>
- <th>璁″垝瀹屾垚鐜�</th>
- </tr>
- </thead>
- <tbody id="table-body">
- <tr>
- <td>2025-03-30</td>
- <td>鏅鸿兘瀹剁數</td>
- <td>鑿滈槼鍘熺數</td>
- <td>娓呮瘨妗剁嚎</td>
- <td>7,098</td>
- <td>7,897</td>
- <td>799</td>
- <td>111.26%</td>
- </tr>
- <tr>
- <td>2025-03-30</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鐒婃満A绾�</td>
- <td>1,898</td>
- <td>2,478</td>
- <td>580</td>
- <td>130.56%</td>
- </tr>
- <tr>
- <td>2025-03-30</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鐒婃満B绾�</td>
- <td>2,300</td>
- <td>2,300</td>
- <td>0</td>
- <td>100.00%</td>
- </tr>
- <tr>
- <td>2025-03-30</td>
- <td>鍘ㄦ埧鐢�</td>
- <td>鑿滈槼鍘熺數</td>
- <td>鍘ㄦ埧鑷竻娲�</td>
- <td>2,300</td>
- <td>2,300</td>
- <td>0</td>
- <td>100.00%</td>
- </tr>
- </tbody>
- </table>
+ <table class="table table-striped table-hover data-table" style="overflow-x: auto;font-size: 12px;">
+ <thead>
+ <tr>
+ <th>鏃ユ湡</th>
+ <th>浜у搧鍚嶇О</th>
+ <th>宸ュ巶鍚嶇О</th>
+ <th>绾夸綋</th>
+ <th>璁㈠崟璁″垝</th>
+ <th>璁㈠崟瀹屾垚</th>
+ <th>宸紓</th>
+ <th>璁″垝瀹屾垚鐜�</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in shuzu" :key="index">
+ <td>{{ item['0_createtime'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['1_type'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['2_factory'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['3_line'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['4_plan'] || 0 }}</td>
+ <td>{{ item['5_overnum'] || 0 }}</td>
+ <td>{{ item['6_difference'] || '鏆傛棤鏁版嵁' }}</td>
+ <td>{{ item['7_plan_completion_rate'] || '鏆傛棤鏁版嵁' }}%</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
</div>
</div>
</div>
-</div>
+
<!-- Chart.js Script -->
<script src="../js/jquery-3.4.1.min.js"></script>
@@ -302,308 +274,298 @@
shuzu:[{}],
shuzu1:[{}],
shuzu2:[{}],
+ yield:[{}],
machineElectric:[{}],
machineWater:[{}],
-
-
-
-
-
- val1: {
- borderColor:'#082352',
- title: {
- // text: '鎴愬搧搴撳瓨',
- // left: '290px',
- // top: '0px'
- text:'鍚堟牸鐜�',//涓绘爣棰樻枃鏈�
- left:'center',
- top:'45%',
- left:'50%',
- textStyle:{
- color:'#454c5c',
- align:'center'
- },
- subtextStyle:{
- fontFamily : "寰蒋闆呴粦",
- color:'#6c7a89',
- }
-
- },
-
- tooltip: {
- trigger: 'item',
- textStyle:{
- }
- },
- legend: {
- // orient: 'vertical',
- left: 'left',
- textStyle:{
-
- }
- },
- textStyle:{
-
- },
- series: [
- {
-
- type: 'pie',
- radius : ['40%','70%'],
- center: ['50%', '50%'],
- minAngle:'15',
- label: {
- // position: 'inside',
- show: true,
- formatter(param) {
- // correct the percentage
- return param.name + ' (' + param.percent + '%)';
- }
- },
- data: [
- { value: 300, name: '鎴愬搧',itemStyle:{color:'#53a2ff'} },
- { value: 700, name: '娆″搧',itemStyle:{color:'darkseagreen'} }
- ],
- itemStyle: {
- normal:{
- label:{
- show:true,
- //formatter: "{b} :\n {c} \n ({d}%)",
- formatter: "{b} :\n ({d}%)",
- position:"inner"
- }
- }
- }
-
- }
- ]
- },
+ val1: {},
+ title:"<%= request.getParameter("name") %>",
},
methods:{
+ // 鎻愪氦涓�娆℃煡璇㈠埛鏂�
+ filterData() {
+ // 鑾峰彇浜у搧绫诲埆
+ const type = document.getElementById('product-category-select').value;
+ // 鑾峰彇鏃ユ湡閫夋嫨鍣ㄧ殑鍊�
+ const startDate = document.getElementById('start-date').value;
+ const endDate = document.getElementById('end-date').value;
- dingdanxiangqing(){
- let HisArr="";
- // HisArr = this.$echarts.init(document.getElementById('main2'));
- let a = {
- value: this.shuzu1[0]['6_qualified'],
+ // 鏋勯�犳煡璇㈠弬鏁�
+ let canshu1={
+ line:<%= request.getParameter("id") %>,
+ type: type,
+ startDate: startDate,
+ endDate: endDate
+ }
+ // 娓呯┖褰撳墠鏁版嵁
+ this.shuzu = [];
+ this.shuzu1 = [];
+ // console.log("杈撳嚭");
+ // console.log(canshu1);
+ // 鎷兼帴SQL鏌ヨ璇彞
+ let sql="{call machine_bigScreen('"+canshu1.line+"','"+canshu1.startDate+"','"+canshu1.endDate+"','"+canshu1.type+"')}";
+ let flag = 2;
+ this.loadAjxss('浠诲姟鏌ヨ鎴愬姛', sql, flag, "shuzu");
+ let sql1="{call machine_bigScreen24('"+canshu.line+"')}";
+ let flag1 = 2;
+ // 璋冪敤鏁版嵁鍔犺浇鍑芥暟锛堜緥濡侫JAX璇锋眰锛�
+ this.loadAjxss('浠诲姟鏌ヨ鎴愬姛', sql1, flag1, "shuzu1");
+ //console.log(this.shuzu);
+ },
- name: "鎴愬搧",
- itemStyle: { color: '#53a2ff' },
- label:{fontSize:30}
+ echarsInit() {
+ let datashijian = [];
+ let plans = [];
+ let overnums = [];
+ // 閬嶅巻 shuzu 鏁扮粍鎻愬彇鏃ユ湡銆佽鍒掓暟鍜屽畬鎴愭暟
+ for (let i in this.shuzu) {
+ // 杩欓噷灏� createtime 杞崲鎴� "MM/DD" 鏍煎紡鐨勬棩鏈�
+ let date = this.shuzu[i]["0_createtime"];
+ let day = new Date(date);
+ let formattedDate = (day.getMonth() + 1) + "/" + day.getDate(); // 鏍煎紡鍖栨棩鏈�
+ datashijian.push(formattedDate);
+
+ plans.push(this.shuzu[i]["4_plan"]); // 鎻愬彇璁″垝鏁�
+ overnums.push(this.shuzu[i]["5_overnum"]); // 鎻愬彇瀹屾垚鏁�
}
- let b = {
- value: this.shuzu1[0]['7_qualified_not'],
- name: "娆″搧",
- itemStyle: { color: 'darkseagreen' },
- label:{fontSize:30}
- }
- this.val1.title.text="鍚堟牸鐜�"
- this.val1.title.top="45%"
- this.val1.title.left="45%"
- this.val1.title.textStyle.fontSize=30
- this.val1.series[0].data[0]=a
- this.val1.series[0].data[1]=b
+ // 閫夋嫨鍥捐〃瀹瑰櫒
+ let HisArr = this.$echarts.init(document.getElementById('trendChart1'));
+ // 璁剧疆 ECharts 閰嶇疆
+ let option = {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['璁㈠崟璁″垝', '璁㈠崟瀹屾垚'] },
+ xAxis: {
+ type: 'category',
+ data: datashijian
+ },
+ yAxis: { type: 'value' },
+ series: [
+ {
+ name: '璁㈠崟璁″垝',
+ type: 'bar',
+ data: plans, // 浣跨敤鎻愬彇鐨勮鍒掓暟鏁版嵁
+ itemStyle: { color: 'rgba(54, 162, 235, 1)' }, // 璁剧疆棰滆壊
+ barWidth: '40%' // 璁剧疆鏌辩姸鍥惧搴�
+ },
+ {
+ name: '璁㈠崟瀹屾垚',
+ type: 'bar',
+ data: overnums, // 浣跨敤鎻愬彇鐨勫畬鎴愭暟鏁版嵁
+ itemStyle: { color: 'rgba(75, 192, 192, 1)' }, // 璁剧疆棰滆壊
+ barWidth: '40%' // 璁剧疆鏌辩姸鍥惧搴�
+ }
+ ]
+ };
- HisArr.setOption(this.val1);
- this.loading=false
+ // 璁剧疆鍥捐〃
+ HisArr.setOption(option);
+ this.loading = false; // 缁撴潫鍔犺浇鐘舵��
},
- dingdanxiangqing1(){
- let HisArr="";
- // HisArr = this.$echarts.init(document.getElementById('main4'));
- let a = {
- value: this.shuzu1[0]['2_smallglass_completed'],
+ echarsInit3() {
+ let datashijian = [];
+ let shutdownTimes = [];
- name: "宸插畬鎴�",
- itemStyle: { color: '#53a2ff' },
- label:{fontSize:30}
+ // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
+ // 閬嶅巻 shuzu 鏁版嵁鎻愬彇鍋滄満鏃堕暱鏁版嵁
+ for (let i in this.shuzu) {
+ let date = this.shuzu[i]["0_createtime"];
+ let shutdownNum = this.shuzu[i]["8_shutdownNum"];
+ // 鏍煎紡鍖栨棩鏈�
+ let day = new Date(date);
+ let formattedDate = (day.getMonth() + 1) + "/" + day.getDate();
+ datashijian.push(formattedDate);
+ // 鍋滄満鏃堕暱
+ shutdownTimes.push(shutdownNum);
+ }
+ // 鍒濆鍖栧浘琛�
+ let HisArr = this.$echarts.init(document.getElementById('trendChart3'));
- }
- let b = {
- value: this.shuzu1[0]['3_smallglass_processing'],
- name: "鏈畬鎴�",
- itemStyle: { color: 'darkseagreen' },
- label:{fontSize:30}
+ let option = {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['鍋滄満鏃堕暱(鍒�)'] },
- }
- this.val1.title.text="璁㈠崟鍔犲伐"
- this.val1.title.top="45%"
- this.val1.title.left="45%"
- this.val1.title.textStyle.fontSize=30
- this.val1.series[0].data[0]=a
- this.val1.series[0].data[1]=b
- HisArr.setOption(this.val1);
- this.loading=false
+ xAxis: {
+ type: 'category',
+ data: datashijian
+ },
+ yAxis: { type: 'value' },
+ series: [
+ {
+ name: '鍋滄満鏃堕暱(鍒�)',
+ type: 'bar',
+ data: shutdownTimes,
+ itemStyle: { color: 'rgba(255, 99, 132, 1)' }, // 鍙牴鎹渶瑕佽皟鏁撮鑹�
+ barWidth: '40%' // 璋冩暣鏌卞
+ }
+ ]
+ };
+
+ HisArr.setOption(option);
+ this.loading = false;
},
+ updateLineChart() {
+ let datatime = [];
+ let sum = [];
+ let hourFormatted
+ for (let i in this.shuzu1) {
+ let hours = this.shuzu1[i]["0_hour"];
+ let production = this.shuzu1[i]["1_total_num"];
+ hourFormatted = new Date(hours).getHours().toString().padStart(2, '0') + ":00";
+ datatime.push(hourFormatted);
+ sum.push(production);
+
+ }
+ let HisArr = this.$echarts.init(document.getElementById('trendChart4'));
+ const option = {
+ xAxis: {
+ type: 'category',
+ data: datatime,
+ axisLabel: {
+ formatter: '{value}:00'
+ }
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: sum,
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ color: 'blue'
+ }
+ }]
+ };
+
+ // 浣跨敤鏂版暟鎹洿鏂版洸绾垮浘
+ HisArr.setOption(option);
+ HisArr.resize();
+ this.loading = false;
+ }
},
watch:{
- shuzu1(){
- // this.dingdanxiangqing(),
- // this.dingdanxiangqing1()
- }
-
+ shuzu(){
+ this.echarsInit();
+ this.echarsInit3();
+ this.updateLineChart();
+ },
},
async mounted(){
- let sql=""
- let flag=2
- sql="{call AXJ_dapingxianshi_dingdanshuju2('涓嬬墖')}"
- this.loadAjxss('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
+ // 鑾峰彇閫変腑鐨勪骇鍝佺被鍒�
+ const type = document.getElementById('product-category-select').value;
+ // 鑾峰彇鏃ユ湡閫夋嫨鍣ㄧ殑鍊�
+ const startDate = document.getElementById('start-date').value;
+ const endDate = document.getElementById('end-date').value;
+ let canshu={
+ line:<%= request.getParameter("id") %>,
+ type: type,
+ startDate: startDate,
+ endDate: endDate
+ }
+ this.shuzu = [];
+ let sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";
+ let flag = 2;
+ this.loadAjxss('浠诲姟鏌ヨ鎴愬姛',sql,flag,"shuzu");
+
+ this.shuzu1 = [];
+ let sql1="{call machine_bigScreen24('"+canshu.line+"')}";
+ let flag1 = 2;
+ this.loadAjxss('浠诲姟鏌ヨ鎴愬姛',sql1,flag1,"shuzu1");
+
+
+
+
await setInterval(()=>{
+ // 鑾峰彇閫変腑鐨勪骇鍝佺被鍒�
+ const type = document.getElementById('product-category-select').value;
+ // 鑾峰彇鏃ユ湡閫夋嫨鍣ㄧ殑鍊�
+ const startDate = document.getElementById('start-date').value;
+ const endDate = document.getElementById('end-date').value;
+ let canshu={
+ line:<%= request.getParameter("id") %>,
+ type: type,
+ startDate: startDate,
+ endDate: endDate
+ }
+ // console.log("杈撳嚭锛�");
+ // console.log(canshu);
+ sql="{call machine_bigScreen('"+canshu.line+"','"+canshu.startDate+"','"+canshu.endDate+"','"+canshu.type+"')}";
+ this.interValLoadAjxs('浠诲姟鏌ヨ鎴愬姛',sql,flag,"shuzu")
- sql="{call AXJ_dapingxianshi_dingdanshuju2('涓嬬墖')}"
- this.interValLoadAjxs('澶у睆鎬昏鍗曟暟鎹�',sql,flag,"shuzu1")
+ sql1="{call machine_bigScreen24('"+canshu.line+"')}";
+ this.loadAjxss('24灏忔椂浜ч噺鏌ヨ',sql1,flag1,"shuzu1");
},5000)
-
-
-
-
}
})
- // 鍒濆鍖栨暟鎹�
- const initialData = {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '璁㈠崟璁″垝',
- data: [7098, 8000, 8500],
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
- borderColor: 'rgba(54, 162, 235, 1)',
- borderWidth: 1
- }, {
- label: '璁㈠崟瀹屾垚',
- data: [7897, 8200, 8700],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }]
- };
+ // 鍒濆鍖� ECharts 鍥捐〃
+ const trendChart1 = echarts.init(document.getElementById('trendChart1'));
+ const trendChart2 = echarts.init(document.getElementById('trendChart2'));
+ const trendChart3 = echarts.init(document.getElementById('trendChart3'));
+ const trendChart4 = echarts.init(document.getElementById('trendChart4'));
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const currentDate = new Date();
- const ctx1 = document.getElementById('trendChart1').getContext('2d');
- const trendChart1 = new Chart(ctx1, {
- type: 'bar',
- data: initialData
- });
+ // 璁剧疆缁撴潫鏃ユ湡涓烘槑澶�
+ // currentDate.setDate(currentDate.getDate() + 1);
+ // const endDate = currentDate.toISOString().split('T')[0];
+ // document.getElementById('end-date').value = endDate;
+ //
+ // // 璁剧疆寮�濮嬫棩鏈熶负涓夊ぉ鍓�
+ // currentDate.setDate(currentDate.getDate() - 3); // 鎭㈠鍒颁笁澶╁墠
+ // const startDate = currentDate.toISOString().split('T')[0];
+ // document.getElementById('start-date').value = startDate;
- const ctx2 = document.getElementById('trendChart2').getContext('2d');
- const trendChart2 = new Chart(ctx2, {
- type: 'bar',
- data: {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '宸ョ▼涓嶈壇鍙版暟',
- data: [5, 3, 2],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }, {
- label: '宸ョ▼涓嶈壇鐜�',
+
+
+ // 閰嶇疆绗簩涓浘琛� (鏌辩姸鍥� - 宸ョ▼涓嶈壇鍙版暟鍜屽伐绋嬩笉鑹巼)
+ const option2 = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['宸ョ▼涓嶈壇鍙版暟', '宸ョ▼涓嶈壇鐜�']
+ },
+ xAxis: {
+ type: 'category',
+ data: ['2025-03-30', '2025-03-31', '2025-04-01']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name: '宸ョ▼涓嶈壇鍙版暟',
+ type: 'bar',
+ data: [5, 3, 2],
+ itemStyle: {
+ color: 'rgba(75, 192, 192, 1)'
+ }
+ },
+ {
+ name: '宸ョ▼涓嶈壇鐜�',
+ type: 'bar',
data: [0.01, 0.02, 0.03],
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- borderColor: 'rgba(255, 99, 132, 1)',
- borderWidth: 1
- }]
- }
- });
+ itemStyle: {
+ color: 'rgba(255, 99, 132, 1)'
+ }
+ }
+ ]
+ };
+ trendChart2.setOption(option2);
- const ctx3 = document.getElementById('trendChart3').getContext('2d');
- const trendChart3 = new Chart(ctx3, {
- type: 'bar',
- data: {
- labels: ['2025-03-30', '2025-03-31', '2025-04-01'],
- datasets: [{
- label: '鍋滄満鏃堕暱',
- data: [1, 2, 3],
- backgroundColor: 'rgba(255, 159, 64, 0.2)',
- borderColor: 'rgba(255, 159, 64, 1)',
- borderWidth: 1
- }, {
- label: '鍋滄満鏃剁巼',
- data: [0.02, 0.03, 0.04],
- backgroundColor: 'rgba(153, 102, 255, 0.2)',
- borderColor: 'rgba(153, 102, 255, 1)',
- borderWidth: 1
- }]
- }
- });
- //鏍规嵁鏃ユ湡鑼冨洿杩囨护鏁版嵁
- function filterData() {
- const startDate = document.getElementById('start-date').value;
- const endDate = document.getElementById('end-date').value;
- // 鏋勫缓璇锋眰鐨勫弬鏁�
- const params = {
- startDate: startDate,
- endDate: endDate,
- };
- // 绀轰緥锛氬亣璁炬偍宸茬粡閫氳繃鏌ヨ绛涢�変簡鏁版嵁锛屼笅闈㈡ā鎷熸洿鏂板浘琛ㄦ暟鎹�
- // 鏇存柊绗竴涓秼鍔垮浘
- trendChart1.data = {
- labels: ['2025-03-30', '2025-03-31'],
- datasets: [{
- label: '璁㈠崟璁″垝',
- data: [7098, 8000],
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
- borderColor: 'rgba(54, 162, 235, 1)',
- borderWidth: 1
- }, {
- label: '璁㈠崟瀹屾垚',
- data: [7897, 8200],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }]
- };
- trendChart2.data = {
- labels: ['2025-03-30', '2025-03-31'],
- datasets: [{
- label: '宸ョ▼涓嶈壇鍙版暟',
- data: [5, 3,],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
- borderWidth: 1
- }, {
- label: '宸ョ▼涓嶈壇鐜�',
- data: [0.01, 0.02],
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- borderColor: 'rgba(255, 99, 132, 1)',
- borderWidth: 1
- }]
- };
- trendChart3.data = {
- labels: ['2025-03-30', '2025-03-31'],
- datasets: [{
- label: '鍋滄満鏃堕暱',
- data: [1, 2],
- backgroundColor: 'rgba(255, 159, 64, 0.2)',
- borderColor: 'rgba(255, 159, 64, 1)',
- borderWidth: 1
- }, {
- label: '鍋滄満鏃剁巼',
- data: [0.02, 0.03],
- backgroundColor: 'rgba(153, 102, 255, 0.2)',
- borderColor: 'rgba(153, 102, 255, 1)',
- borderWidth: 1
- }]
- };
- trendChart1.update();
- trendChart2.update();
- trendChart3.update();
- }
- // 閲嶇疆鎼滅储鏍�
- function resetFilters() {
- document.getElementById('start-date').value = '';
- document.getElementById('end-date').value = '';
- }
+
+
</script>
--
Gitblit v1.8.0