<template> <div class="full-box jjyxyzt"> <div class="" style="width: 100%;height:100%;" > <div class="map-box"> <div class="top-tip-box t-title">当前位置:经济运行一张图 > 企业发展一张图</div> <div class="maps qu-map" v-show="!companyMap"> <div class="map-item" v-for="item in mapList" :class="[item.className]" @click="goCompanyMap(item)" @mouseenter="showQuTotal(item)" @mouseleave="showQuDeatil=false"> <div class="name-dot" v-if="false"></div><div class="name-text" v-if="false">{{item.name}}</div> </div> </div> <div class="map-detail-box qu-detail-box" style="background: rgba(4,30,90,0.5)" v-if="showQuDeatil"> <div class="map-border-top"> <div class="mb-left"></div> <div class="mb-right"></div> </div> <div class="map-border-left"> <div class="mb-top"></div> <div class="mb-center"></div> <div class="mb-bottom"></div> </div> <div class="map-info-box"> <div class="map-title-box"> <div class="map-title"><span class="dot"></span><div>{{quDetail.name}}</div></div> <div class="more-mapmb-right" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;"></div> </div> <div class="" style="width: 100%;text-align: left;margin-top: -10px;margin-bottom: 5px;">(数据时间:{{filter.startDate}} 至 {{filter.endDate}})</div> <div class="map-detail-row"><div class="mdr-label">板块企业数:</div><div class="mdr-data">{{quDetail.qyNum}}</div></div> <div class="map-detail-row"><div class="mdr-label">板块工业总产值:</div><div class="mdr-data">{{quDetail.gyzcz}}</div></div> <div class="map-detail-row"><div class="mdr-label">板块规上企业数:</div><div class="mdr-data"> {{quDetail.gsqyNum}}</div></div> <div class="map-detail-row"><div class="mdr-label">板块规上企业总产值:</div><div class="mdr-data">{{quDetail.gsqycz}}</div></div> </div> </div> <div class="map-search-boxs" style="height: 34px;width: 100%;"> <div class="back-index" v-show="companyMap" @click="back" style="margin-top:3px;float: right" >返回</div> <div class="map-search-box" style="" v-show="companyMap" > <div class="sl-row-label" style="width: 100px;line-height:34px;">企业名称:</div> <el-input v-model="searchCommpanyName" placeholder="支持企业名称查询" style="width:200px;float: left;"></el-input> <el-button class="search-btn" type="primary" @click="searchresult">查询</el-button> </div> </div> <div class="all-maps aaa qyResultList" v-show="companyMap" style="position: relative"> <div class="map-box" id="mapDiv" style="width: 100%;height: 100%;position:relative"></div> <div class="search-by-company" v-if="companyListBox"> <div class="close-btn" @click="companyListBox=false"><i class="el-icon-close"></i></div> <div class="list-title" v-if="false">查询结果列表</div> <div class="list-body"> <div class="list-li" v-for="(item,index) in resultList" :key="index" @click="goMapAddress(item)">{{index+1}}. {{item.companyName}}-{{item.plat}}</div> <div class="list-title" v-if="$Util.isEmpty(resultList)">暂无企业数据!</div> </div> </div> </div> <div class="map-detail-box" style="" v-if="showMapBk"> <div class="map-border-top"> <div class="mb-left"></div> <div class="mb-right"></div> </div> <div class="map-border-left"> <div class="mb-top"></div> <div class="mb-center"></div> <div class="mb-bottom"></div> </div> <div class="map-info-box"> <div class="map-title-box"> <div class="map-title"><span class="dot"></span><div>{{companyDetail.companyName}}</div></div> <div class="map-qy" v-if="false">区域:{{companyDetail.companyName}}</div> <div class="more-mapdetail" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;" @click="showMapBk=false" ><i class="el-icon-close"></i> </div> </div> <div class="map-detail-row"><div class="">地 址:</div><div class="">{{companyDetail.address}}</div></div> <div class="map-detail-row"><div class="">行 业:</div><div class="">{{companyDetail.industry}}</div></div> <div class="map-detail-row"><div class="">是否规上企业:</div><div class="">{{companyDetail.isGs}}</div></div> <div class="map-detail-row"><div class="">负责人(法人):</div><div class="">{{companyDetail.legalPerson}}</div></div> <div class="map-detail-row"><div class="">工业税收:</div><div class="">{{companyDetail.gyss}}</div></div> <div class="map-detail-row"><div class="">主营业务收入:</div><div class="">{{companyDetail.zyywsr}}</div></div> <div class="more-mapdetail" @click="goCompantDetail(companyDetail.id)">更多>></div> </div> </div> </div> <div class="charts-box" style="position:relative"> <div class="hasSearch-box" style="height: 100%;"> <div class="chart-item-box charts-one-box"> <div class="charts-line-top"> <div class="line-left-icon"></div> <div class="line-left"></div> </div> <div class="charts-line-bottom"> <div class="lb-one"></div> <div class="lb-icon"></div> <div class="lb-two"></div> </div> <div class="chart-con-box"> <div class="map-title"><span class="dot"></span>企业数量发展分布图</div> <div class="chart-li-box" id="chartsOne"></div> </div> </div> <div class="chart-item-box charts-two-box"> <div class="charts-line-bottom" style="top:0;"> <div class="lb-one"></div> <div class="lb-icon"></div> <div class="lb-two"></div> </div> <div class="charts-line-left"> <div class="cl-line"></div> <div class="cl-icon"></div> </div> <div class="charts-line-bottom"> <div class="lb-one"></div> <div class="lb-icon"></div> <div class="lb-two"></div> </div> <div class="chart-con-box"> <div class="select-types" style="top:-7px"> <div class="more-data more-detail" @click="forecastShow('qy')" v-if="false">预测</div> </div> <div class="map-title"><span class="dot"></span>企业规模分布图</div> <div class="chart-li-box" id="chartsTwo"></div> </div> </div> <div class="chart-item-box charts-three-box"> <div class="charts-line-bottom" style="top:0;"> <div class="lb-one"></div> <div class="lb-icon"></div> <div class="lb-two"></div> </div> <div class="charts-line-top" style=""> <div class="line-left-icon" style="transform: rotate(180deg)"></div> <div class="line-left"></div> </div> <div class="chart-con-box"> <div class="select-types"> <el-select v-model="qyType" placeholder="请选择" class="more-data more-select" style="right:50px;top:5px;" @change="changeQyType"> <el-option label="全部" value=""></el-option> <el-option v-for="item,index in typeList" :key="item.index" :label="item.name" :value="item.value"> </el-option> </el-select> <div class="more-data more-detail" @click="moreDataClick()">更多>></div> </div> <div class="map-title"><span class="dot"></span>企业工业总产值排名</div> <div class="chart-li-box1 bgss table-container-style" style="width:100%;height: calc(100% - 20px);margin:40px 0 0;"> <el-table :data="chartTable" :height="200"> <el-table-column align="center" label="企业名称" > <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="left"> <div class="ellipsis" style="width:100%;cursor: pointer;" @click="jumpToDetail(scope.row)">{{scope.row.name}}</div> </el-tooltip> </template> </el-table-column> <el-table-column prop="value" align="center" label="产值(亿元)"></el-table-column> <el-table-column prop="valueTb" align="center" label="同比"></el-table-column> </el-table> </div> </div> </div> </div> </div> </div> <el-dialog title="企业发展数量" :visible.sync="showForecast" width="600px" @opened="qyfzNumByTime" :close-on-click-modal=false> <div class="jjyx-tab-box"> <div class="tab-item" @click="qyfzNumByTime('month')">按月预测</div> <div class="tab-item" @click="qyfzNumByTime('year')">按年预测</div> </div> <div class="pop-chart-box" id="popQyfzChart"></div> <div slot="footer" class="dialog-footer"> <el-button @click="showForecast = false">关闭</el-button> </div> </el-dialog> <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false top="40px"> <el-table :data="moreData.list" highlight-current-row style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column property="name" label="企业名称" align="center" show-overflow-tooltip></el-table-column> <el-table-column property="value" label='产值(亿元)' align="center"></el-table-column> <el-table-column property="valueTb" label="同比" align="center" width="150"></el-table-column> </el-table> <el-pagination @current-change="morePageChange" background layout="prev, pager, next" :page-size="moreData.pageSize" :current-page="moreData.pageNum" :total="moreData.total" style="text-align: right;"></el-pagination> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </div> </el-dialog> </div> </template> <script> let month = new Date().getMonth()==0?0:new Date().getMonth(); let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month; let years =new Date().getFullYear()-1 ; export default { name: 'qyfz', data () { return { showCondition:false, filter:{ startDate:years+"-01", endDate:new Date().format("yyyy-MM") }, qyType:'', MapData:null, typeList:[ {id:'',name:'全部'}, {id:'ssgs',name:'上市公司'}, {id:'gxqy',name:'高新技术企业'}, ], chartTable:[], defaultOp:{ title: { show: false }, legend:{show:false,height:"0"}, grid:{top:10,bottom:30}, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#777' }, crossStyle: { color: 'rgba(255,255,255,.8)', } } }, xAxis: { axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/}, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}, splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}} } }, chartsTitle:{ left:'',right:''}, /**/ showForecast:false, timeType:'month', title:'企业工业总产值排名', ndUnit:'能耗(标准煤)', dialogVisible:false, moreData:{list:[{cid: 2, name: "江西科伦 ", nh: 125391.1, cz: 12.45},], pageNum:1, pageSize:10, total:0}, /*map*/ mapList:[ {name:'科技孵化园',className:'kjfhy',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}, {name:'大富工业园',className:'df',lat:'460128.551330566',lon:'3119428.95727539',companyName:'江西科诺生物科技有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}, {name:'浅水湾工业园',className:'qsw',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}, {name:'东山工业园',className:'ds',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}, {name:'渊山岗工业园',className:'ysg',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0} ], showMapBk:false, map:null, companyMap:false,showQuDeatil:false,initCompanyData:null, companyDetail:{companyName:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''}, quDetail:{name:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''}, searchCommpanyName:'',companyListBox:false, zoomVal:9329.174820613116,maxZommVal:146.3339856490493, resultList:[{lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司'}] } }, mounted (){ this.GLOBAL.app.getDictList(resp => { this.typeList = resp["企业标签"]; }) this.getQuData(); this.loadTabCharts(); }, methods:{ /*map start*/ getQuData(){ let vm = this; vm.$http.get('/dx-economy-api/map/plat',{params:vm.filter}).then(function (resp) { let _data = resp.data; if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) { vm.mapList = _data.data; } }) }, showQuTotal(item){ this.showQuDeatil = true; this.quDetail = item; }, goCompantDetail(id){ this.$router.push({name:"qyDataManage",params:{id:id}}) }, goCompanyMap(data){ this.companyMap = true; this.initCompanyData = data; this.createMap(); }, back(){ this.companyMap = false; this.showMapBk = false; this.companyListBox = false; this.searchCommpanyName='' }, searchresult(){ let vm = this; vm.$http.get('/dx-economy-api/company', {params: {companyName:vm.searchCommpanyName}}).then(function (resp) { let _data = resp.data; if(_data.code === 200){ let companyList = _data.data; if (companyList.length == 1){ vm.goMapAddress(companyList[0]); }else{ vm.resultList = companyList; vm.companyListBox = true; } } else { vm.$message.error(_data.message); } }) }, goMapAddress(item){ let vm = this; vm.showMapBk = true; vm.companyDetail = item; var pt = new esri.geometry.Point(item.lat,item.lon,vm.wgs); if (vm.zoomVal > vm.maxZommVal) { var zoomNum = vm.maxZommVal / vm.zoomVal; vm.map.centerAndZoom(pt, zoomNum); } else { vm.map.centerAt(pt); } }, createMap(){ let vm = this; var djConfig = { parseOnLoad: true }; dojo.require("esri.map"); dojo.require("esri.graphic"); dojo.require("esri.layers.ArcGISTiledMapServiceLayer"); dojo.require("esri.symbols.PictureMarkerSymbol"); dojo.require("esri.layers.GraphicsLayer"); dojo.require("esri.geometry.Point"); dojo.require("esri.geometry.Multipoint"); dojo.require("esri.SpatialReference"); vm.wgs = new esri.SpatialReference({"wkid": 2384}); if(vm.$Util.isEmpty(vm.map)) { var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://223.84.218.79:18093/arcgis/rest/services/dongxaingjkqmap0128/MapServer"); vm.map = new esri.Map("mapDiv", {logo: false}); vm.map.addLayer(layer); /*加载图层*/ vm.$http.get('/dx-economy-api/company', {}).then(function (resp) { let _data = resp.data; _data.data.forEach(function (item) { addPointSymbol(item, item) }); }); }else{ /*detail*/ var pt = new esri.geometry.Point(vm.initCompanyData.lat,vm.initCompanyData.lon,vm.wgs); if (vm.zoomVal > vm.maxZommVal) { var zoomNum = vm.maxZommVal / vm.zoomVal; vm.map.centerAndZoom(pt, zoomNum); } else { vm.map.centerAt(pt); } } function addPointSymbol(point, attributes) { point = new esri.geometry.Point(point.lat, point.lon); var symbol = new esri.symbols.PictureMarkerSymbol("./static/building.png", 30, 44).setOffset(0, 15); var graphicsLayer = new esri.layers.GraphicsLayer(); var graphic = new esri.Graphic(point, symbol, attributes); vm.map.graphics.add(graphic); vm.map.addLayer(graphicsLayer); }; vm.map.on('load',function () { $("#mapDiv").height("100%").width("100%"); vm.map.resize(); vm.map.on("extent-change", function (event) { var extentVal = event.extent; vm.zoomVal = extentVal.ymax - extentVal.ymin; }); /*click事件*/ vm.map.graphics.on('click',function (event) { vm.showMapBk = true; vm.companyDetail = event.graphic.attributes; var pt = new esri.geometry.Point(vm.companyDetail.lat,vm.companyDetail.lon,vm.wgs); if (vm.zoomVal > vm.maxZommVal) { var zoomNum = vm.maxZommVal/vm.zoomVal; vm.map.centerAndZoom(pt,zoomNum); }else{ vm.map.centerAt(pt); } }) /*初次 定位到detail*/ var pt = new esri.geometry.Point(vm.initCompanyData.lat, vm.initCompanyData.lon, vm.wgs); if (vm.zoomVal > vm.maxZommVal) { var zoomNum = vm.maxZommVal / vm.zoomVal; vm.map.centerAndZoom(pt,zoomNum); } else { vm.map.centerAt(pt); } }) var resizeTimer; dojo.connect(vm.map, 'onLoad', function(theMap) { dojo.connect(dijit.byId('mapDiv'), 'resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { vm.map.resize(); vm.map.reposition(); }, 500); }); }); }, /*map end*/ searchByCondition(){ let _this = this _this.showCondition = true; }, searchResult(){ let _this = this _this.showCondition = false; _this.loadTabCharts(); }, loadTabCharts(){ /*this.chartsTitle.left='吨标准煤';this.chartsTitle.right='同比'; this.drawLine('chartsOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]); let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}]; let legend=[]; t.forEach(function (item) { legend.push(item.name) }) this.drawPie("chartsTwo",t,legend)*/ this.getOneData(); this.getTwoData(); this.getChartsTableData(); }, changeQyType(data){ let vm = this vm.qyType = data; vm.getChartsTableData(); }, getOneData(){ let vm = this; vm.$http.get('/dx-economy-api/qyfzCharts/qyfz',{params:{}}).then(function (resp) { let t = resp.data.data vm.chartsTitle.left='';vm.chartsTitle.right=''; vm.drawLine('chartsOne',t.xAxis,t.value,null,null); }) }, getTwoData(){ let vm = this; vm.$http.get('/dx-economy-api/qyfzCharts/qygm',{params:{}}).then(function (resp) { let t = resp.data.data; /*let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}];*/ let legend=[]; t.forEach(function (item) { legend.push(item.name) }) vm.drawPie("chartsTwo",t,legend) }) }, getChartsTableData(){ let vm = this; vm.$http.get('/dx-economy-api/qyfzCharts/qysort',{params:{pageNum:1,pageSize:5,type:vm.qyType}}).then(function (resp) { let t = resp.data.data; t.list.forEach(function (i,k) { i.valueTb = i.valueTb +'%'; }); vm.chartTable= t.list }) }, /*预测*/ qyfzNumByTime(type){ let vm = this vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比'; vm.drawLine('popQyfzChart',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]); }, /*pop-table*/ morePageChange(currentPage){ this.getMoreTableData(currentPage) }, moreDataClick(){ this.getMoreTableData(1) this.dialogVisible = true }, getMoreTableData(pageNum){ let vm = this; let pageNums = vm.$Util.isEmpty(pageNum) ?vm.moreData.pageNum:pageNum; vm.$http.get('/dx-economy-api/qyfzCharts/qysort',{params:{pageNum:pageNums,pageSize:10,type:vm.qyType}}).then(function (resp) { let temp = resp.data.data; temp.list.forEach(function (i,k) { i.valueTb = i.valueTb +'%'; }); vm.moreData.list = temp.list; vm.moreData.pageNum = temp.pageNum; vm.moreData.total = temp.total; }) }, /**/ drawLine(container,cate,d1,d2,d3){ let vm = this let myChart = vm.$echarts.init(document.getElementById(container)) let op = { xAxis: { type:"category", data: cate, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}} }, yAxis:[ { type: 'value', name: vm.chartsTitle.left, minInterval: 10, nameTextStyle:{color:'rgba(255,255,255,.8)'}, axisLabel:{ color:'rgba(255,255,255,.8)', formatter: function (value) { let texts = []; if(value<1000){ texts.push(value) }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){ texts.push(Math.ceil(value/1000) + "千") }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){ texts.push(Math.ceil(value/10000) + "万") }else if(Math.ceil(value/1000000)>=1){ texts.push(Math.ceil(value/1000000) + "百万") } return texts }}, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}, splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}} }, { type: 'value', name: vm.chartsTitle.right, show:vm.chartsTitle.right ==''?false:true, minInterval: 100, nameTextStyle:{color:'rgba(255,255,255,.8)'}, axisLabel:{color:'rgba(255,255,255,.8)'}, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}, splitLine:{show:false} } ], series: [ { name: vm.chartsTitle.left, type: 'bar', color:"#6ee988", data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#6ee988' // 0% 处的颜色 }, { offset: 1, color: '#6ee988' // 100% 处的颜色 }] } } }, { name: vm.chartsTitle.left, type: 'bar', color:"#16e1ff", data: d2,//[100,200,33,56,188,123,143,23,99],//res.zcz itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#16e1ff' // 0% 处的颜色 }, { offset: 1, color: '#16e1ff' // 100% 处的颜色 }] } } }, { name: vm.chartsTitle.right, type: 'line', yAxisIndex: 1, color:"#e0e63d", show:vm.chartsTitle.right ==''?false:true, data: d3,//[10,20,30,44,77,55,66,22,100],//res.tb areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e0e63d' // 0% 处的颜色 }, { offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色 }] } } }] } myChart.setOption($.extend(true,op,vm.defaultOp)); }, drawPie(container,data,legend){ let vm = this let myChart = vm.$echarts.init(document.getElementById(container)) let op = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:['#efca5a','#7dbbea','#dd798f','#6e89ed','#a8de74','#f69914','#f61474'], legend: { type: 'scroll', orient: 'vertical', x:"left", data:legend, textStyle:{color:"rgba(255,255,255,.8)"} }, series: [ { name:'固定资产投资占比', type:'pie', radius:['50%', '88%'], minAngle: 30, center:['65%', '50%'], avoidLabelOverlap: false, label: { normal: { show:false, formatter: '{b|{b}}{abg|}\n{hr|}\n {c} {per|{d}%} ', /*backgroundColor: '#eee', borderColor: '#aaa',*/ /*borderWidth: 1, borderRadius: 4,*/ rich: { hr: {borderColor: 'rgba(255,255,255,.3)',width: '100%',borderWidth: 0.5,height: 0}, b: {lineHeight: 22,align: 'center',fontSize:10}, per: {backgroundColor: '#334455',padding: [2, 4],borderRadius: 2} } }, }, data:data } ] } myChart.setOption(op) }, } } </script> <style> .search-row-condition .el-date-editor .el-range-input{width:35%!important;} .jjyxyzt .more-data.more-select{right:50px;width:100px;position:absolute;background:rgba(22,225,255,.25);font-size: 10px;} .jjyxyzt .more-data.more-select .el-input--suffix .el-input__inner{border: none;background: rgba(7,182,255,0);padding: 0 13px 0 0;height: 20px;line-height: 20px;} .jjyxyzt .more-data.more-select .el-input__suffix{right:0px} .jjyxyzt .more-data.more-select.el-select .el-input .el-select__caret{width:13px!important;} .jjyxyzt .yzt-table{width:100%;height:calc(100% - 10px);text-align: left;margin: 10px auto 0;color: rgba(255,255,255,.8);} .jjyxyzt .yzt-table thead {background:rgba(22,225,255,.25);} .jjyxyzt .yzt-table thead tr th{padding: 3px;} .jjyxyzt .yzt-table tr td{border-bottom: 1px dotted rgba(255,255,255,.9);padding:5px 0px;} </style> <style scoped> </style>