web苏州:1.3级导航样式修改 2.区域巡检提测 3.消耗统计提测

unknown

2023-11-14 9c331d555ce7e82b4226556770a81c444442bb37

 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>