From 8a51417e8182e163613b5d8a35d9fe2c4a6c74dc Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期五, 01 十二月 2023 13:10:41 +0800
Subject: [PATCH] 样式修改
---
web/src/views/GoodManage/CostStatistics/RebarCost.vue | 966 ++++++++++++++++++++++++++++----------------------------
1 files changed, 480 insertions(+), 486 deletions(-)
diff --git a/web/src/views/GoodManage/CostStatistics/RebarCost.vue b/web/src/views/GoodManage/CostStatistics/RebarCost.vue
index 0e54af7..6c7e432 100644
--- a/web/src/views/GoodManage/CostStatistics/RebarCost.vue
+++ b/web/src/views/GoodManage/CostStatistics/RebarCost.vue
@@ -1,486 +1,480 @@
-<template>
- <div class="main">
- <div class="main_header">
- <div class="header_item">
- <span class="header_label">型号：</span>
- <el-select v-model="search.steelId" placeholder="请选择型号" clearable>
- <el-option
- v-for="item in optionRebar"
- :key="item.steelId"
- :label="item.steelName"
- :value="item.steelId">
- </el-option>
- </el-select>
- </div>
- <div class="header_item">
- <el-radio-group v-model="tabPosition" @input="timesChange">
- <el-radio-button label="day">日</el-radio-button>
- <el-radio-button label="month">月</el-radio-button>
- </el-radio-group>
- </div>
- <div class="header_item" v-if="showTimes">
- <span class="header_label">选择时间：</span>
- <el-date-picker
- v-model="search.dayData"
- :picker-options="pickerOptionsDay"
- :clearable="false"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item" v-if="!showTimes">
- <span class="header_label">选择月份：</span>
- <el-date-picker
- v-model="search.monthData"
- :picker-options="pickerOptionsMonth"
- :clearable="false"
- type="monthrange"
- value-format="yyyy-MM"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item">
- <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
- <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportBearExcel()">导出Excel</el-button>
- </div>
- </div>
- <div class="main_middle">
- <div class="main_middle_titles">数据统计</div>
- <div class="main_middle_matter">
- <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
- <div class="middle_items_text">{{item.steelModel}}</div>
- <div class="middle_items_datas">{{item.changeStock}}</div>
- </div>
- </div>
- </div>
- <div class="main_content" style="overflow:auto;padding-bottom:100px;">
- <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
- <div class="main_echart_titles">{{echartItem.steelModel}}mm</div>
- <div :id="echartItem.steelId" class="main_content_chart"></div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { buttonPinia } from '../../../pinia';
-import { downFiles } from '../../../plugins/public';
-export default {
- name: 'RebarCost',
- data() {
- return {
- search:{
- dayData:this.getDateTime(),
- monthData:this.getMonthTime()
- },//查询条件
- tabPosition:'day',//默认展示day
- showTimes:true,//是否展示日的日期 true：日 false: 月
- dateType:1,// 1:日 2:月
- optionRebar:[],//材料类型
- showDatas:[],//展示的数据统计
- echartsList:[],//展示echarts表
- chartsImage:null,
- pickerMinDate:'',//日期选择增加限制
- pickerOptionsDay:{ //限制选择日期为15天
- onPick: ({
- maxDate,
- minDate
- }) => {
- this.pickerMinDate = minDate.getTime()
- if (maxDate) {
- this.pickerMinDate = ''
- }
- },
- disabledDate: (time) => {
- if (this.pickerMinDate !== '') {
- const one = 15 * 24 * 3600 * 1000
- const minTime = this.pickerMinDate - one
- const maxTime = this.pickerMinDate + one
- return time.getTime() < minTime || time.getTime() > maxTime
-
- }
- }
- },
- minDates: null,
- maxDates: null,
- pickerOptionsMonth: {
- disabledDate: (time) => {
- if (this.minDates !== null) {
- let minMonth = this.minDates.getMonth(),
- lastYear = new Date(this.minDates).setMonth(minMonth - 6),
- nextYear = new Date(this.minDates).setMonth(minMonth + 6);
- // 只能选 minDate 前后6个月的范围
- return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
- }
- return false;
- },
- onPick: ({minDate, maxDate}) => {
- this.minDates = minDate;
- this.maxDates = maxDate;
- }
- },
- }
- },
- mounted() {
- // this.searchButtonInfo()
- this.getAllTypes()
- },
- methods: {
- // 转圈圈
- functionLoading() {
- this.loadingView = this.$loading({
- lock: true,
- text: '请稍后...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- },
- //导出
- exportBearExcel() {
- let params = {
- steelId:this.search.steelId ===undefined ||this.search.steelId ==='' ?'':this.search.steelId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.functionLoading();
- this.$api.Analyse.exportRebarCost(params).then(res => {
- downFiles(res, '钢筋消耗信息', 'xls')
- this.loadingView.close()
- })
- .catch(() => {
- this.loadingView.close();
- })
- },
- //获取时间(默认15天)
- getDateTime(){
- return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
- },
- //获取时间（默认6个月）
- getMonthTime(){
- let date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let newYear = 0;
- let newMonth = 0;
- let newDateArr = [];
- for (let i = 0; i < 7; i++) {
- //这里是获取前六个月,所以循环6次,根据需要修改
- if (month - i < 1) {
- //这里的判断是如果当前月份往前推到了去年 需要做的处理
- newYear = year - 1;
- newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
- newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
- } else {
- newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
- newDateArr.push(year + '-' + newMonth);
- }
- }
- //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
- const end = newDateArr[0];
- const start = newDateArr[6];
- return [start, end];
- },
- //获取所有型号
- getAllTypes(){
- this.$api.Production.getTableTitleInfo({}).then(res=>{
- if(res.statusMsg === 'ok'){
- this.optionRebar = res.data
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- //展示不同的时间
- timesChange(val){
- if(val === 'month'){
- this.showTimes = false
- // this.search.dayData = ''
- this.dateType = 2
- }else{
- this.showTimes = true
- // this.search.monthData = ''
- this.dateType = 1
- }
- },
- //查询按钮
- searchButtonInfo() {
- let params = {
- steelId:this.search.steelId ===undefined ||this.search.steelId ==='' ?'':this.search.steelId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.$api.Analyse.searchRebarCost(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.echartsList = res.data
- res.data.forEach(item=>{
- let xtitle = item.betweenDate
- let showStock = []
- item.steelStatisticsDtos.forEach(ite=>{
- xtitle.forEach(iten=>{
- if(iten === ite.getDate){
- showStock.push({
- getDate:iten,
- changeStock:ite.changeStock
- })
- }else{
- showStock.push({
- getDate:iten,
- changeStock:0
- })
- }
- })
- })
- this.$nextTick(() => {
- this.createCharts(item.steelId, showStock,item.steelModel);
- })
- })
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- this.$api.Analyse.searchAnalyse(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.showDatas = res.data
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- // 创建echart图表
- createCharts(name, data,titleName) {
- const labelData = data.map(item => item.getDate);
- const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
- this.chartsImage = this.$echarts.init(document.getElementById(name));
- const option = {
- animationDuration: 1500,
- tooltip: {
- trigger: "axis",
- backgroundColor:'#071F46',
- textStyle:{
- color:'#fff',
- },
- formatter: function (params) {
- var relVal = params[0].name;
- for (var i = 0; i < params.length; i++) {
- if (params[i].componentIndex === 0) {
- relVal +=
- "<br/>" +
- params[i].marker +
- `${titleName}` +
- " : " +
- params[i].value;
- }
- }
- return relVal;
- },
- },
- grid: {
- top: "15%",
- right: "3%",
- left: "3%",
- bottom: "11%",
- },
- xAxis: [
- {
- type: "category",
- data: labelData,
- axisLine: {
- lineStyle: {
- width: 2,
- color: "#B7E4F7",
- },
- },
- axisLabel: {
- color: "#B7E4F7",
- },
- axisTick: {
- show: false,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- // max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- color: "#CAD3E0",
- },
- },
- splitLine: {
- lineStyle: {
- width: 2,
- type: "dashed",
- color: "#28477C",
- },
- },
- },
- {
- type: "value",
- max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}%",
- textStyle: {
- color: "#B7E4F7",
- },
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: [
- {
- type: "line",
- smooth:true,
- barWidth:40,
- data: firstData,
- yAxisIndex: 0,
- itemStyle: {
- normal: {
- color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
- [
- {
- offset: 0,
- color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- },
- ],
- }
- this.chartsImage.clear();
- this.chartsImage.setOption(option);
- window.onresize = () => {
- this.chartsImage.resize()
- }
- },
- // 判断按钮权限信息
- showButton(str) {
- const pinia = buttonPinia();
- return pinia.$state.buttonInfo.includes(str);
- }
- },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/layout-main.scss";
-
-.main_middle{
- width: 97%;
- margin: 10px 18px;
-
- .main_middle_titles{
- width: 100%;
- color: #19F6F8;
- position: relative;
- padding: 10px 15px;
- border-bottom:1px solid #1B50AE ;
- &::before{
- content: "";
- position: absolute;
- left: 5px;
- top: 10px;
- width: 2px;
- height: 18px;
- background-color: #18F6F8;
- }
- }
- .main_middle_matter{
- padding-top: 15px;
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .middle_items{
- width: 150px;
- height: 80px;
- background: url('../../../assets/stir_img.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .middle_items_text{
- color: #E1E5EB;
- }
- .middle_items_datas{
- color: #18F6F8;
- font-size: 18px;
- font-weight: 600;
- }
- }
- }
-}
-
-.echarts_items{
- height: 332px;
- padding-top: 10px;
- padding-bottom: 15px;
- margin-bottom: 20px;
- .main_echart_titles{
- width: 97%;
- color: #18F6F8;
- padding-bottom: 15px;
- padding-left: 15px;
- border-bottom: 1px solid #1C51B1;
- position: relative;
- &::before{
- width: 2px;
- height: 15px;
- content: "";
- position: absolute;
- top: 3px;
- left: 5px;
- background-color: #18F6F8;
- }
- }
- .main_content_chart {
- height: 100%;
- }
-}
-/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
- color: #19F7F9;
- border-color: #18F6F8;
- background-color: #0D4573!important;
-}
-/deep/.el-radio-button__inner{
- background-color: #0D4573;
- border-color:#18F6F8;
- border-radius: 0px 0px !important;
- border-color: #18F6F8;
- color: #E2E9EE;
-}
-</style>
+<!-- 物资管理=>消耗统计=>钢筋消耗 -->
+<template>
+ <div class="main">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">型号：</span>
+ <el-select v-model="search.steelId" placeholder="请选择型号" clearable>
+ <el-option v-for="item in optionRebar" :key="item.steelId" :label="item.steelName"
+ :value="item.steelId">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <el-radio-group v-model="tabPosition" @input="timesChange">
+ <el-radio-button label="day">日</el-radio-button>
+ <el-radio-button label="month">月</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="header_item" v-if="showTimes">
+ <span class="header_label">选择时间：</span>
+ <el-date-picker v-model="search.dayData" :picker-options="pickerOptionsDay" :clearable="false"
+ type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item" v-if="!showTimes">
+ <span class="header_label">选择月份：</span>
+ <el-date-picker v-model="search.monthData" :picker-options="pickerOptionsMonth" :clearable="false"
+ type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
+ <el-button v-if="showButton('export')" icon="el-icon-download"
+ @click="exportBearExcel()">导出Excel</el-button>
+ </div>
+ </div>
+ <div class="main_middle">
+ <div class="main_middle_titles">数据统计</div>
+ <div class="main_middle_matter">
+ <div class="middle_items" v-for="(item, index) in showDatas" :key="index">
+ <div class="middle_items_text">{{ item.steelModel }}</div>
+ <div class="middle_items_datas">{{ item.changeStock }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="main_content" style="overflow:auto;padding-bottom:100px;">
+ <div v-for="(echartItem, echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
+ <div class="main_echart_titles">{{ echartItem.steelModel }}mm</div>
+ <div :id="echartItem.steelId" class="main_content_chart"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {buttonPinia} from '../../../pinia';
+import {downFiles} from '../../../plugins/public';
+export default {
+ name: 'RebarCost',
+ data() {
+ return {
+ search: {
+ dayData: this.getDateTime(),
+ monthData: this.getMonthTime()
+ },//查询条件
+ tabPosition: 'day',//默认展示day
+ showTimes: true,//是否展示日的日期 true：日 false: 月
+ dateType: 1,// 1:日 2:月
+ optionRebar: [],//材料类型
+ showDatas: [],//展示的数据统计
+ echartsList: [],//展示echarts表
+ chartsImage: null,
+ pickerMinDate: '',//日期选择增加限制
+ pickerOptionsDay: { //限制选择日期为15天
+ onPick: ({
+ maxDate,
+ minDate
+ }) => {
+ this.pickerMinDate = minDate.getTime()
+ if (maxDate) {
+ this.pickerMinDate = ''
+ }
+ },
+ disabledDate: (time) => {
+ if (this.pickerMinDate !== '') {
+ const one = 15 * 24 * 3600 * 1000
+ const minTime = this.pickerMinDate - one
+ const maxTime = this.pickerMinDate + one
+ return time.getTime() < minTime || time.getTime() > maxTime
+
+ }
+ }
+ },
+ minDates: null,
+ maxDates: null,
+ pickerOptionsMonth: {
+ disabledDate: (time) => {
+ if (this.minDates !== null) {
+ let minMonth = this.minDates.getMonth(),
+ lastYear = new Date(this.minDates).setMonth(minMonth - 6),
+ nextYear = new Date(this.minDates).setMonth(minMonth + 6);
+ // 只能选 minDate 前后6个月的范围
+ return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
+ }
+ return false;
+ },
+ onPick: ({minDate, maxDate}) => {
+ this.minDates = minDate;
+ this.maxDates = maxDate;
+ }
+ },
+ }
+ },
+ mounted() {
+ this.searchButtonInfo()
+ this.getAllTypes()
+ },
+ methods: {
+ // 转圈圈
+ functionLoading() {
+ this.loadingView = this.$loading({
+ lock: true,
+ text: '请稍后...',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ });
+ },
+ //导出
+ exportBearExcel() {
+ let params = {
+ steelId: this.search.steelId === undefined || this.search.steelId === '' ? '' : this.search.steelId,
+ dateType: this.dateType
+ }
+ if (this.dateType === 1) {
+ params.strTime = this.search.dayData && this.search.dayData[0]
+ params.endTime = this.search.dayData && this.search.dayData[1]
+ delete params.dayData
+ } else {
+ params.strTime = this.search.monthData && this.search.monthData[0]
+ params.endTime = this.search.monthData && this.search.monthData[1]
+ delete params.monthData
+ }
+ this.functionLoading();
+ this.$api.Analyse.exportRebarCost(params).then(res => {
+ downFiles(res, '钢筋消耗信息', 'xls')
+ this.loadingView.close()
+ })
+ .catch(() => {
+ this.loadingView.close();
+ })
+ },
+ //获取时间(默认15天)
+ getDateTime() {
+ return [new Date(new Date().getTime() - 3600 * 1000 * 24 * 15).toISOString().replace('T', ' ').split('.')[0], new Date().toISOString().replace('T', ' ').split('.')[0]]
+ },
+ //获取时间（默认6个月）
+ getMonthTime() {
+ let date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let newYear = 0;
+ let newMonth = 0;
+ let newDateArr = [];
+ for (let i = 0; i < 7; i++) {
+ //这里是获取前六个月,所以循环6次,根据需要修改
+ if (month - i < 1) {
+ //这里的判断是如果当前月份往前推到了去年 需要做的处理
+ newYear = year - 1;
+ newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
+ newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
+ } else {
+ newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
+ newDateArr.push(year + '-' + newMonth);
+ }
+ }
+ //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
+ const end = newDateArr[0];
+ const start = newDateArr[6];
+ return [start, end];
+ },
+ //获取所有型号
+ getAllTypes() {
+ this.$api.Production.getTableTitleInfo({}).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.optionRebar = res.data
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ //展示不同的时间
+ timesChange(val) {
+ if (val === 'month') {
+ this.showTimes = false
+ // this.search.dayData = ''
+ this.dateType = 2
+ } else {
+ this.showTimes = true
+ // this.search.monthData = ''
+ this.dateType = 1
+ }
+ },
+ //查询按钮
+ searchButtonInfo() {
+ let params = {
+ steelId: this.search.steelId === undefined || this.search.steelId === '' ? '' : this.search.steelId,
+ dateType: this.dateType
+ }
+ if (this.dateType === 1) {
+ params.strTime = this.search.dayData && this.search.dayData[0]
+ params.endTime = this.search.dayData && this.search.dayData[1]
+ delete params.dayData
+ } else {
+ params.strTime = this.search.monthData && this.search.monthData[0]
+ params.endTime = this.search.monthData && this.search.monthData[1]
+ delete params.monthData
+ }
+ this.$api.Analyse.searchRebarCost(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.echartsList = res.data
+ res.data.forEach(item => {
+ let xtitle = item.betweenDate
+ let showStock = []
+ let _steelStatisticsDtos = {}
+ item.steelStatisticsDtos.forEach(val => {
+ if (!_steelStatisticsDtos[val.getDate]) {
+ _steelStatisticsDtos[val.getDate] = val
+ }
+ })
+ xtitle.forEach(val => {
+ let value = _steelStatisticsDtos[val]
+ showStock.push({
+ getDate: val,
+ changeStock: value ? value.changeStock : 0
+ })
+ })
+ this.$nextTick(() => {
+ this.createCharts(item.steelId, showStock, item.steelModel);
+ })
+ })
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ this.$api.Analyse.searchAnalyse(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.showDatas = res.data
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ // 创建echart图表
+ createCharts(name, data, titleName) {
+ const labelData = data.map(item => item.getDate);
+ const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
+ this.chartsImage = this.$echarts.init(document.getElementById(name));
+ const option = {
+ animationDuration: 1500,
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: '#071F46',
+ textStyle: {
+ color: '#fff',
+ },
+ formatter: function (params) {
+ var relVal = params[0].name;
+ for (var i = 0; i < params.length; i++) {
+ if (params[i].componentIndex === 0) {
+ relVal +=
+ "<br/>" +
+ params[i].marker +
+ `${titleName}` +
+ " : " +
+ params[i].value;
+ }
+ }
+ return relVal;
+ },
+ },
+ grid: {
+ top: "15%",
+ right: "3%",
+ left: "3%",
+ bottom: "11%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: labelData,
+ axisLine: {
+ lineStyle: {
+ width: 2,
+ color: "#B7E4F7",
+ },
+ },
+ axisLabel: {
+ color: "#B7E4F7",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#CAD3E0",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ width: 2,
+ type: "dashed",
+ color: "#28477C",
+ },
+ },
+ },
+ {
+ type: "value",
+ max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}%",
+ textStyle: {
+ color: "#B7E4F7",
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ type: "line",
+ smooth: true,
+ barWidth: 40,
+ data: firstData,
+ yAxisIndex: 0,
+ itemStyle: {
+ normal: {
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ },
+ ],
+ }
+ this.chartsImage.clear();
+ this.chartsImage.setOption(option);
+ window.onresize = () => {
+ this.chartsImage.resize()
+ }
+ },
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/layout-main.scss";
+
+.main_middle {
+ width: 97%;
+ margin: 10px 18px;
+
+ .main_middle_titles {
+ width: 100%;
+ color: #19F6F8;
+ position: relative;
+ padding: 10px 15px;
+ border-bottom: 1px solid #1B50AE;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 2px;
+ height: 18px;
+ background-color: #18F6F8;
+ }
+ }
+
+ .main_middle_matter {
+ padding-top: 15px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .middle_items {
+ width: 150px;
+ height: 80px;
+ background: url('../../../assets/stir_img.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ .middle_items_text {
+ color: #E1E5EB;
+ }
+
+ .middle_items_datas {
+ color: #18F6F8;
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+.echarts_items {
+ height: 332px;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ margin-bottom: 20px;
+
+ .main_echart_titles {
+ width: 97%;
+ color: #18F6F8;
+ padding-bottom: 15px;
+ padding-left: 15px;
+ border-bottom: 1px solid #1C51B1;
+ position: relative;
+
+ &::before {
+ width: 2px;
+ height: 15px;
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 5px;
+ background-color: #18F6F8;
+ }
+ }
+
+ .main_content_chart {
+ height: 100%;
+ }
+}
+
+/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+ color: #19F7F9;
+ border-color: #18F6F8;
+ background-color: #0D4573 !important;
+}
+
+/deep/.el-radio-button__inner {
+ background-color: #0D4573;
+ border-color: #18F6F8;
+ border-radius: 0px 0px !important;
+ border-color: #18F6F8;
+ color: #E2E9EE;
+}
+</style>
--
Gitblit v1.9.3