longping
/
subject_gxj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935
							<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <jsp:include page="../common/common-js-include.jsp"></jsp:include>
  <jsp:include page="../common/common-css-include.jsp"></jsp:include>
  <script src="${WebSite.asset}/lib/echarts/5.4.3/echarts.min.js?version=${version}"></script>
  <title>统计分析</title>

</head>
<body>
<div class="content" id="app">
        <div class="main-layer">
            <div class="tab-layer">
                <div class="tab-item" v-for="(item,index) in queryParam">
                    <div class="tab-item-label">{{item.label}}</div>
                    <div class="tab-item-tiplist">
                    	<template v-for="(it,ind) in item.value">
                        <div class="tip-item"  :class="it.isCheck?'action-tip':''" @click="queryClick(item,it)">
                            {{it.title}}
                            <div class="tip-colos" v-if="!it.isAll && it.isCheck">
                                <div class="text">×</div>
                            </div>
                        </div>
                        </template>
                     </div>
                </div>
            </div>
        </div>
        <div class="status-layer">
            <div class="status-title">数据总览</div>
            <div class="status-layer-right">
                <div class="status-layer-right-box">
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.totalNumber|| 0}}</div>
                            <div class="status-text-unit">个</div>
                        </div>
                        <div class="status-label">项目总量</div>
                    </div>
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.cbNumber || 0}}</div>
                            <div class="status-text-unit">个</div>
                        </div>
                        <div class="status-label">储备总量</div>
                    </div>
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.xjNumber||0}}</div>
                            <div class="status-text-unit">个</div>
                        </div>
                        <div class="status-label">新建总量</div>
                    </div>
                     <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.zjNumber||0}}</div>
                            <div class="status-text-unit">个</div>
                        </div>
                        <div class="status-label">在建总量</div>
                    </div>
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.tcNumber||0}}</div>
                            <div class="status-text-unit">个</div>
                        </div>
                        <div class="status-label">投产总量</div>
                    </div>
                </div>
                <div class="status-line"></div>
                <div class="status-layer-right-box">
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.amtTotal||0}}</div>
                            <div class="status-text-unit">亿元</div>
                        </div>
                        <div class="status-label">项目总投资</div>
                    </div>
                    <div class="status-item">
                        <div class="status-text">
                            <div class="status-text-num">{{otherData.yearAmtTotal||0}}</div>
                            <div class="status-text-unit">亿元</div>
                        </div>
                        <div class="status-label">年度计划投资</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-layer-next">
            <div class="pieEcarts">
                <div class="pieEcarts-title">{{drawData.year}}年各区域占比情况</div>
                <div id="areaPieEcarts" style="height: 180px;margin-top: 30px"></div>
            </div>
            <div class="tabel-box">
                <table id="areaTable"></table>
            </div>
        </div>
        <div class="main-layer-next">
            <div class="pieEcarts">
                <div class="pieEcarts-title">{{drawData.year}}年行业占比情况</div>
                <div id="hyPieEcarts"  style="height: 180px;margin-top: 30px"></div>
            </div>
            <div class="tabel-box">
                <table id="hyTable"></table>
            </div>
        </div>
        <div class="main-layer-next">
            <div class="pieEcarts">
                <div class="pieEcarts-title">{{drawData.year}}年按建设性质占比情况</div>
                <div id="jsPieEcarts"  style="height: 180px;margin-top: 30px"></div>
            </div>
            <div class="tabel-box">
                <table id="jsTable"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="bZb">
        <span class="new-roman">{{d.numBZb||0}}%</span>
	</script>
	<script type="text/html" id="numBl">
		{{#if (d.numBl >= 0) { }}
			<span class="new-roman" style="color:green;">{{d.numBl||0}}%</span>
		{{# } else { }}
			<span class="new-roman" style="color:red;">{{d.numBl||0}}%</span>
		{{#} }}
	</script>
    <script type="text/javascript">
    new Vue({
    	el: "#app",
    	data: {
    		queryParam: [
    			{
	    			"label": "按规模",
	    			"queryKey": "key",
	    			"moreChoose": false,
	    			"value": [
                        {
                            value: "",
                            title: "所有",
                            isAll: true,
                            isCheck: true
                        }, {
	    					"value": "1",
	    					"title": "100亿元以上",
	    					"isAll": false,
	    					"isCheck": false
	    				},{
	    					"value": "2",
	    					"title": "50-100亿元以上",
	    					"isAll": false,
	    					"isCheck": false
	    				},{
	    					"value": "3",
	    					"title": "10-50亿元",
	    					"isAll": false,
	    					"isCheck": false
	    				},{
                            "value": "4",
                            "title": "10亿元以下",
                            "isAll": false,
                            "isCheck": false
                        }
	    			]
    			},
    			{
    				"label": "按区域",
    				"queryKey": "subjectId",
    				"moreChoose": true,
    				"value": [
    					{
        					value: "",
        					title: "所有",
        					isAll: true,
        					isCheck: true
        				},
        				<c:forEach items="${JSDD}" var="js">
        				{
        					value : "${js.code}",
        					title: "${js.title}",
        					isAll: false,
        					isCheck: false
        				},
        				</c:forEach>
    				]
    			},
    			{
    				"label": "按行业",
    				"queryKey": "indusKind",
    				"moreChoose": true,
    				"value": [
    					{
        					value: "",
        					title: "所有",
        					isAll: true,
        					isCheck: true
        				},
        				<c:forEach items="${HYFL}" var="hy">
        				{
        					value : "${hy.code}",
        					title: "${hy.title}",
        					isAll: false,
        					isCheck: false
        				},
        				</c:forEach>
    				]
    			},
    			{
    				"label": "按性质",
    				"queryKey": "propKind",
    				"moreChoose": true,
    				"value": [
    					{
        					value: "",
        					title: "所有",
        					isAll: true,
        					isCheck: true
        				},
        				<c:forEach items="${JSXZ}" var="js">
        				{
        					value : "${js.code}",
        					title: "${js.title}",
        					isAll: false,
        					isCheck: false
        				},
        				</c:forEach>
    				]
    			}
    		],
    		year : [{
				value : "",
				title: "全部",
				isCheck: false,
			}],
    		month: [],
    		monthChoose: [],
    		params: {
    			month: [],
    			key: "1"
    		},
            varMonth:[],
    		paramNames: {

    		},
    		yearData: {
    			month: [],
    			amtLast: [],
    			amt: []
    		},
    		drawData: {
    			year: new Date().getFullYear()
    		},
    		areaData: [],
            dimension:"1",
    		hyData: [],
    		jsData: [],
    		tzData: [],
    		otherData: {},
    		areaChart: null,
    		hyChart: null,
    		jsChart: null,
    		tzChart: null,
    		yearEchartTitle: ""
    	},
    	mounted : function() {
			this.init();
		},
    	methods: {
    		formatMonth: function(month) {
    			if(month < 10) {
    				return "0"+month;
    			}
    			return month;
    		},
    		init: function() {
    			var self = this;
    			this.initChoosedParams();
                this.params.year = new Date().getFullYear();
    			this.doQuery();
    			window.onresize = function () {
    				self.resizeEcharts();
    			};
    		},
    		initChoosedParams: function() {
    			for(var i=0;i<this.queryParam.length;i++) {
    					var checkValue = this.queryParam[i].value.filter(item=>item.isCheck == true);
    					this.params[this.queryParam[i].queryKey] = checkValue.flatMap(item=>item.value).join(",");
    					if(!this.params[this.queryParam[i].queryKey]) {
    						if(this.queryParam[i].moreChoose) {
    							this.paramNames[this.queryParam[i].queryKey] = checkValue.flatMap(item=>item.title);
    						} else {
    							this.paramNames[this.queryParam[i].queryKey] = checkValue.flatMap(item=>item.title).join(",");
    						}
    					}
    			}
    		},
    		setMonth: function(months) {
                var self=this;
                if(this.params.month.length == 0) {
                	//没有选中，则选中当前这个节点
                	this.params.month.push(months);
                	this.monthChoose.push(months);
                } else if(this.params.month.length == 1) {
                	let oldChooseMonth = this.params.month[0];
                	if(months == oldChooseMonth) {
                		//相同则取消
                		this.params.month = [];
                		this.monthChoose = [];
                	} else if(months < oldChooseMonth) {
                		//小于，则选择该范围
                		this.params.month.unshift(months);
                		this.monthChoose = [];
                		for(var i = months;i<=oldChooseMonth;i++) {
                			this.monthChoose.push(i);
                		}
                	} else if(months > oldChooseMonth) {
                		//大于，则选择该范围
                		this.params.month.push(months);
                		this.monthChoose = [];
                		for(var i = oldChooseMonth;i<=months;i++) {
                			this.monthChoose.push(i);
                		}
                	}
                } else if(this.params.month.length == 2) {
                	//已经选择两个了
                	if(months < this.params.month[0]) {
                		//选择的小于先前最小的
                		this.params.month[0] = months;
                		this.monthChoose = [];
                		for(var i = months;i<=this.params.month[1];i++) {
                			this.monthChoose.push(i);
                		}
                	} else if(months == this.params.month[0]) {
                		//选择的就是先前选中的最小的
                		this.monthChoose = [];
                		this.monthChoose.push(this.params.month[1]);
                		this.params.month.shift();
                	} else if(months < this.params.month[1]) {
                		//选择的是中间节点
                		this.params.month[1] = months;
                		this.monthChoose = [];
                		for(var i = this.params.month[0];i<=this.params.month[1];i++) {
                			this.monthChoose.push(i);
                		}
                	} else if(months == this.params.month[1]) {
                		//选择的是当前选中的最大的
                		this.monthChoose = [];
                		this.monthChoose.push(this.params.month[0]);
                		this.params.month.splice(1,1);
                	} else if(months > this.params.month[1]) {
                		this.params.month.splice(1,1);
                		this.params.month.push(months);
                		this.monthChoose = [];
                		for(var i = this.params.month[0];i<=months;i++) {
                			this.monthChoose.push(i);
                		}
                	}
                }
                self.doQuery();
    		},

    		queryClick: function(query, queryItem) {
    			var allBuuton;
    			if(queryItem.isAll) {
    				//如果是全部按钮
    				for(var i =0;i<query.value.length;i++) {
    					if(query.value[i].isAll) {
    						query.value[i].isCheck = true;
    						this.params[query.queryKey] = [query.value[i].value];
    						this.paramNames[query.queryKey] = [];
    					} else {
    						query.value[i].isCheck = false;
    					}
    				}
    			} else {
    				//如果不是全部按钮
    				if(query.moreChoose) {
                        console.log(query.queryKey);
    					this.params[query.queryKey] = [];
    					this.paramNames[query.queryKey] = [];
    					//可以多选
    					queryItem.isCheck = !queryItem.isCheck;
    					var allButton;
    					var hasChoose = false;
    					for(var i =0;i<query.value.length;i++) {
    						if(query.value[i].isAll) {
    							allButton = query.value[i];
    						} else{
    							hasChoose = hasChoose || query.value[i].isCheck;
    							if(query.value[i].isCheck) {
    								this.params[query.queryKey].push(query.value[i].value);
    								this.paramNames[query.queryKey].push(query.value[i].title);
    							}
    						}
    					}
    					if(hasChoose) {
    						allButton.isCheck = false;
    					} else {
    						allButton.isCheck = true;
    						this.params[query.queryKey] = [allButton.value];
    						this.paramNames[query.queryKey] = [];
    					}
    				} else {
    					//只能单选
    					var allButton;
    					var hasChoose = false;
    					for(var i =0;i<query.value.length;i++) {
	    					if(query.value[i].value == queryItem.value) {
	    						queryItem.isCheck = !queryItem.isCheck;
	    						if(queryItem.isCheck) {
	    							this.params[query.queryKey] = queryItem.value;
	    							this.paramNames[query.queryKey] = queryItem.title;
	    						}
	    					} else {
	    						query.value[i].isCheck = false;
	    					}
	    					if(query.value[i].isAll) {
    							allButton = query.value[i];
    						} else{
    							hasChoose = hasChoose || query.value[i].isCheck;
    						}
    					}
    					if(hasChoose) {
    						allButton.isCheck = false;
    					} else {
    						allButton.isCheck = true;
    						this.params[query.queryKey] = allButton.value;
    						this.params[query.queryKey] = "";
    					}
    				}
    			}
    			this.doQuery();
    		},
    		doQuery: function() {
    			var queryBody = {};
    			for(var key in this.params) {
    				if(Array.likeArrayNotString(this.params[key])) {
    					queryBody[key] = this.params[key].join(",");
    				} else {
    					queryBody[key] = this.params[key];
    				}
    			}
    			var self = this;
    			App.postJson("/api/tzfx/getTjfxData", queryBody, function(res){
    				self.areaData = res.data.areaData || [];
    				self.jsData =res.data.jsData || [];
                    self.hyData = res.data.hyData || [];
                    self.otherData = res.data

                    self.showNoData();
                    self.initArea();
                    self.initHy();
                    self.initJs();
    			});
    		},
    		showNoData: function() {
    			$(".main-layer-next").show();
    			$(".status-layer").show();
    		},
    		hideNoData: function() {
    			$(".main-layer-next").hide();
    			$(".status-layer").hide();
    		},
        	initArea: function() {
        		// this.drawPieEcharts(this.areaChart, "#areaPieEcarts", "区域投资占比", this.areaData);
        		this.drawPieEcharts(this.areaChart, "#areaPieEcarts", "", this.areaData);
        		this.drawTable("区域", "#areaTable", this.areaData);
        	},
        	initHy: function() {
        		// this.drawPieEcharts(this.hyChart, "#hyPieEcarts", "前8大行业投资占比", this.hyData);
        		this.drawPieEcharts(this.hyChart, "#hyPieEcarts", "", this.hyData);
        		this.drawTable("所属行业", "#hyTable", this.hyData);
        	},
        	initJs: function() {
        		// this.drawPieEcharts(this.jsChart, "#jsPieEcarts", "按建设性质", this.jsData);
        		this.drawPieEcharts(this.jsChart, "#jsPieEcarts", "", this.jsData);
        		this.drawTable("建设性质", "#jsTable", this.jsData);
        	},
            exportExcel:function (){
                window.location.href=App.getUrl("/tjfx/reportWord");
            },
        	drawTable: function(kindName, elem, data) {
        		var year = this.params.year;
        		layui.table.render({
                    elem: elem, // 指定原始表格元素选择器（推荐id选择器）
                    cols: [[ // 设置表头
                      { type: 'numbers', title: '序号', width: 44, align: 'center' },
                      { field: 'kindDesc', title: kindName, align: 'center'},
                      { field: 'amtJh', title: year+'年计划投资额(万元)', align: 'center', templet: d => '<span class="new-roman">' + d.amtJh + '</span>'},
                      { field: 'numBZb', title: '进度占比', align: 'center',templet: "#bZb"},
                      { field: 'numBl', title: '同比增长', align: 'center',templet: "#numBl" },
                    ]],
                    limit: data.length,
                    data: data
                  });
        	},
        	drawPieEcharts: function(vueEcharts, elem, text, data) {
        		if(vueEcharts == null) {
        			vueEcharts = echarts.init(document.querySelector(elem));
        		} else {
        			vueEcharts.clear();
        		}
        		var echartData = [];
        		for(var i =0;i<data.length;i++) {
        			echartData.push({
        				value: data[i].numBZb,
        				name: data[i].kindDesc
        			});
        		}
        		if(echartData.length == 0) {
        			echartData.push({value:0,name:''});
        		}
                let option = {
                    title: {
                        text: text,
                        left: 'center',
                        bottom: '15px',
                        textStyle: {
                            fontSize: '12px',
                            fontWeight: 400
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        show: false
                    },
                    series: [
                        {
                            name: text,
                            type: 'pie',
                            radius: '50%',
                            bottom: "40px",
                            data: echartData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                vueEcharts.setOption(option);
        	} ,
        	resizeEcharts: function() {
        		if(this.areaChart) {
        			this.areaChart.resize();
        		}
        		if(this.hyChart) {
        			this.hyChart.resize();
        		}
        		if(this.jsChart) {
        			this.jsChart.resize();
        		}
        	}
    	}
    })

</script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html{
    	min-width: 960px;
    }
    .otherYear{
    width: 100px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #CCCCCC;
    }
   input::-webkit-input-placeholder {
   color: red;
   font-size: 12px;
   color: #999999;
   padding-left: 5px;
   }
    .layui-table-header .layui-table th>div,
    .layui-table-view .layui-table td>div {
        line-height: 42px !important;
    }

    .layui-table-view .layui-table {
        width: 100% !important;
    }

    .laytable-cell-checkbox,
    .laytable-cell-numbers,
    .laytable-cell-radio,
    .laytable-cell-space {
        padding-left: 10px;
    }

    .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;

    }

    .action-tip {
        background-color: #2C6EC6;
        color: #ffffff !important;
        border-radius: 5px;
    }

    .main-layer {
        width: 100%;
        min-height: 180px;
        border: 1px solid #DDDDDD;
        padding-bottom: 10px;
    }

    .action-tabs {
        background-color: transparent !important;
    }

    .main-layer-next {
        display: flex;
        justify-content: start;
        align-items: center;
        position: relative;
        gap: 10px;
        width: 100%;
        border: 1px solid #DDDDDD;
        margin-top: 20px;
    }

    .status-line {
        height: 100%;
        width: 1px;
        background-color: #DDDDDD;
    }

    .status-layer {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 95px;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid #2B6EC6;
    }


    .tab-layer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
        row-gap: 10px;
        padding: 16px 10px;
        box-sizing: border-box;
        width: 100%;
    }

    .tab-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
    }

    .tab-item-label {
        white-space: nowrap;
        color: #999999;
        font-size: 12px;
        padding: 5px;
    }

    .tab-item-tiplist {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: center;
        row-gap: 5px;
        column-gap: 12px;
    }

    .tip-item {
        position: relative;
        padding: 2px 5px;
        color: #333333;
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
    }

    .tip-colos {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(40%, -40%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10px;
        height: 10px;
        font-size: 12px;
        color: #2B6EC6;
        border: 1px solid #2B6EC6;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .tip-colos>.text {
        zoom: 0.8;
    }

    .tab-line {
        margin-top: 24px;
        width: 100%;
        border-top: 1px dashed #ccc;
    }

    .barEcharts {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .status-layer-right {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .status-layer-right-box {
        flex: 1;
        display: flex;
        justify-content: center;
        height: 100%;
    }

    .status-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 100%;
    }

    .status-text {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 2px;

    }

    .status-text-num {
        font-size: 24px;
        color: #1C56A3;
        font-family: "Times New Roman", Times, serif;
    }

    .status-text-unit {
        font-size: 16px;
        color: #1C56A3;
    }

    .status-label {
        font-size: 14px;
        color: #333333;
        line-height: 1px;
    }

    .echarts-title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 22px 0;
        color: #2C6EC6;
        font-size: 18px;
        font-weight: bold;
    }

    .status-title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 100%;
        font-size: 16px;
        color: #FFFFFF;
        background-color: #2C6EC6;
        writing-mode: vertical-rl;
        letter-spacing: 5px;
    }

    .status-title::before {
        content: '';
        position: absolute;
        right: -1px;
        top: 50%;
        width: 11px;
        height: 11px;
        transform: rotate(45deg) translate(0, -50%);
        background-color: #2C6EC6;
        border-radius: 2px;

    }

    .pieEcarts {
        display: flex;
        flex-direction: column;
        /*width: 240px;*/
        width: 360px;
        height: 100%;
    }

    .pieEcarts-title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        color: #1C56A3;
    }

    #pieEcarts {
        flex-grow: 1;
        width: 100%;
    }

    .tabel-box {
        width: 100%;
        min-width: 110px;
        height: calc(100% - 22px) !important;

    }

    .text-layer {
        position: absolute;
        top: 0;
        right: 0;
        width: 249px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: flex-start;
        height: 100%;
        margin-right: 1px;
        margin-top: 1px;

    }

    .report-tabs {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 32px;
        border: 1px solid #DDDDDD;
        border-right: none;
        border-top: none;
        background: #F5F5F5;
    }

    .tabs-layer {
        position: absolute;
        bottom: -1px;
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    .tabs-layer-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-weight: bold;
        font-size: 12px;
        color: #2B6EC6;
        cursor: pointer;
    }

    .tabs-layer-item-line {
        width: 100%;
        height: 2px;
        border-radius: 2px 2px 2px 2px;
        background: #2B6EC6;
    }

    .text-layer-content {
        height: calc(100% - 22px);
        overflow: auto;
        flex: 1;
        padding: 13px;
        box-sizing: border-box;
        border-left: 1px solid #DDDDDD;
        font-size: 14px;
        color: #333333;
        font-weight: 400;
        line-height: 25px;
    }
    .text-layer-content::-webkit-scrollbar{
        height: 0;
        width: 0;
    }
    .layui-table-cell{
        padding: 0 !important;
    }
    .new-roman{
        font-family: "Times New Roman", Times, serif;
    }
</style>
</body>
</html>