From 081b2afc94c32a1c5e735e2f6b971d9fe1ff9b4f Mon Sep 17 00:00:00 2001 From: rk <94314517@qq.com> Date: 星期日, 28 九月 2025 09:15:55 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/wuhuyancao' into wuhuyancao --- admin/src/views/business/dangerStatic.vue | 155 ++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 116 insertions(+), 39 deletions(-) diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue index d1ea42c..b43d2af 100644 --- a/admin/src/views/business/dangerStatic.vue +++ b/admin/src/views/business/dangerStatic.vue @@ -34,7 +34,7 @@ <!-- </QueryForm>--> <div class="main_content"> <div class="type_wrap"> - <div class="title">闅愭偅绫诲瀷缁熻</div> + <div class="title">鏈湀闅愭偅绫诲瀷缁熻</div> <div v-show="typeList && typeList.length > 0" class="echart1" ref="typeRef"></div> <div v-show="typeList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> @@ -42,7 +42,7 @@ </div> <div class="dept_wrap"> - <div class="title">闅愭偅褰掑睘閮ㄩ棬缁熻</div> + <div class="title">鏈湀闅愭偅褰掑睘閮ㄩ棬缁熻</div> <div v-show="deptList && deptList.length > 0" class="echart2" ref="deptRef"></div> <div v-show="deptList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> @@ -52,8 +52,8 @@ <div class="main_table"> <div class="main_table_echart"> <div class="title">鏈勾闅愭偅瓒嬪娍</div> - <div id="echart3" v-if="yearList.length > 0"></div> - <div v-else style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> + <div id="echart3" v-show="yearList.length > 0"></div> + <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="yearList.length === 0"> <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> </div> </div> @@ -268,7 +268,7 @@ grid: { left: '10%', right: '10%', - bottom: '0%', + bottom: '10%', top: '20%', containLabel: true }, @@ -287,7 +287,7 @@ minInterval: 1, axisLine: { show: true, - }, + } }, series: [ { @@ -324,6 +324,12 @@ let datas = this.yearList.map(item => item.total) let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + } + }, grid: { left: '5%', right: '10%', @@ -336,12 +342,62 @@ data: names }, yAxis: { - type: 'value' + type: 'value', + axisLine: { + show: true + }, + axisLabel: { + formatter: function (value) { + // 鍥涜垗浜斿叆鍒版渶杩戠殑鏁存暟 + return Math.round(value); + } + } }, series: [ { data: datas, - type: 'line' + type: 'line', + areaStyle: { + normal: { + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: '#207FF7' // 0% 澶勭殑棰滆壊 + }, { + offset: 1, + color: 'rgba(255,255,255,.2)' // 100% 澶勭殑棰滆壊 + }], + globalCoord: false // 缂虹渷涓� false + } + } + }, + lineStyle: { // 绾挎潯鏍峰紡 + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#207FF7' // 0% 澶勭殑棰滆壊 + }, { + offset: 1, color: '#207FF7' // 100% 澶勭殑棰滆壊 + }] + }, + width: 2 // 绾挎潯绮楃粏 + }, + symbol: 'circle', + symbolSize: 10, + itemStyle: { + borderWidth: 1, + borderColor: '#fff', + color: '#207FF7' + }, + smooth: false } ] } @@ -369,47 +425,52 @@ overflow-x: hidden; padding: 15px; box-sizing: border-box; - background-color: #ffffff; + background-color: #F4F7FC; .main_head { width: 100%; display: flex; align-items: center; justify-content: space-between; - margin-bottom: 20px; + margin-bottom: 10px; + background-color: #ffffff; + padding: 20px; + box-sizing: border-box; .blue { - border-left: 5px solid blue; + border-left: 8px solid #12BB8B; } .red { - border-left: 5px solid red; + border-left: 8px solid #F6CF46; } .yellow { - border-left: 5px solid yellow; + border-left: 8px solid #5DC9FB; } .orange { - border-left: 5px solid orange; + border-left: 8px solid #FF9E56; } .darkBlue { - border-left: 5px solid #0000a8; + border-left: 8px solid #6B6EFF; } .main_head_item { width: 19%; - height: 70px; + height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 5px; - background-color: #ffffff; + background: #F4F7FC; span { &:nth-child(1) { - font-size: 22px; - color: black; - font-weight: bold; + font-weight: 600; + font-size: 30px; + color: #222222; } &:nth-child(2) { - font-size: 16px; - color: black; + font-weight: 400; + font-size: 14px; + color: #222222; + margin-top: 10px; } } } @@ -420,8 +481,11 @@ align-items: start; justify-content: space-between; .main_table_echart { - flex: 1; + width: 64%; height: 400px; + background-color: #ffffff; + padding: 20px; + box-sizing: border-box; .title { font-weight: 600; font-size: 16px; @@ -433,9 +497,11 @@ } } .main_table_list { - margin-left: 20px; flex-shrink: 0; - width: 500px; + width: 35%; + padding: 20px; + box-sizing: border-box; + background-color: #ffffff; .title { font-weight: 600; font-size: 16px; @@ -443,10 +509,12 @@ } .list_head { width: 100%; - height: 35px; + height: 50px; display: flex; align-items: center; - background-color: #ececec; + background-color: #F7F7F7; + border-left: 1px solid #DFE2E8; + border-top: 1px solid #DFE2E8; margin-top: 15px; .list_head_item { flex: 1; @@ -456,15 +524,19 @@ justify-content: center; font-size: 13px; color: #222222; + border-right: 1px solid #DFE2E8; } } .table_box { width: 100%; + border-bottom: 1px solid #DFE2E8; .list_content { width: 100%; - height: 35px; + height: 50px; display: flex; align-items: center; + border-left: 1px solid #DFE2E8; + border-top: 1px solid #DFE2E8; .list_head_item { flex: 1; height: 100%; @@ -473,6 +545,7 @@ justify-content: center; font-size: 13px; color: #222222; + border-right: 1px solid #DFE2E8; } } } @@ -481,38 +554,42 @@ .main_content { display: flex; + align-items: start; + justify-content: space-between; height: 500px; - + margin-bottom: 10px; .title { font-weight: 600; font-size: 16px; color: #222222; /*margin-bottom: 20px;*/ - margin-top: 20px; } .type_wrap { - flex: 11; + width: 49.5%; flex-shrink: 0; - height: calc(100% - 20px); + height: 100%; /*border-right: 12px solid #f7f7f7;*/ - + background-color: #ffffff; + padding: 20px; + box-sizing: border-box; .echart1 { width: 100%; - height: calc(100% - 60px); + height: 100%; } } .dept_wrap { - flex: 10; + width: 49.5%; flex-shrink: 0; - height: calc(100% - 20px); - padding-left: 20px; - + height: 100%; + background-color: #ffffff; + padding: 20px; + box-sizing: border-box; .echart2 { width: 100%; - height: calc(100% - 60px); + height: 100%; } } } -- Gitblit v1.9.3