|
@@ -14,30 +14,30 @@
|
|
|
<i class="el-icon-food"></i>
|
|
|
平均值
|
|
|
</div>
|
|
|
- <div class="mpt-mu">6.16</div>
|
|
|
+ <div class="mpt-mu">{{ getSoilstat[0].value }}</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<div class="mpt-area">
|
|
|
<i class="el-icon-food"></i>
|
|
|
最大值
|
|
|
</div>
|
|
|
- <div class="mpt-mu">705万亩</div>
|
|
|
+ <div class="mpt-mu">{{getSoilstat[1].value}}万亩</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<div class="mpt-area">
|
|
|
<i class="el-icon-food"></i>
|
|
|
最小值
|
|
|
</div>
|
|
|
- <div class="mpt-mu">705万亩</div>
|
|
|
+ <div class="mpt-mu">{{getSoilstat[2].value}}万亩</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div class="list-play" v-if="$store.state.localDistrict[0].length <3">
|
|
|
<div class="lp-title"><span class="s">各区县土壤酸碱度</span> <span class="m"></span></div>
|
|
|
<div class="lp-contexts">
|
|
|
- <div v-for="item,index in ($store.state.localDistrict[0].length==2?($store.state.localDistrict[0][1] =='区级1'?listLand[0]:listLand[1]):listAreaData)" :key="index" class="lp-context">
|
|
|
+ <div v-for="item,index in curretPlayData" :key="index" class="lp-context">
|
|
|
|
|
|
- <div class="townName">{{ item.label }}</div>
|
|
|
+ <div class="townName">{{ item.townName }}</div>
|
|
|
<div :id="'sfbar' + index"></div>
|
|
|
<div class="xAxis">
|
|
|
<span class="a">SPH</span>
|
|
@@ -47,9 +47,66 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="lp-contexts" v-if="$store.state.localDistrict[0].length==3">
|
|
|
- <townAttribute :listLand='curretTwanData.townLand' :crodName="['asdsa','sadasd']" ></townAttribute>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="list-playx" v-if="$store.state.localDistrict[0].length ==3">
|
|
|
+ <div class="lp-title"><span class="s">土壤属性列表</span></div>
|
|
|
+ <!-- <el-empty v-if="getlandList.length == 0 && !getlandListLoading" :image-size="100" style="height: 195px;" description="暂无数据"></el-empty> -->
|
|
|
+ <div class="lp-contextss"
|
|
|
+ v-loading="getlandListLoading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
+ >
|
|
|
+ <div v-for="item,index in getlandList" :key="index" class="listcrop">
|
|
|
+ <div class="abs">
|
|
|
+ <div class="a">{{ index }}</div>
|
|
|
+ <span class="b">[编号{{ item.number}}]</span>
|
|
|
+ </div>
|
|
|
+ <div class="cropstatus">
|
|
|
+ <div class="cropslist1">
|
|
|
+ <div class="growingTendency"> 酸碱度:{{ item.ph }} </div>
|
|
|
+ <div class="growingTendency"> 有机物:{{ item.toc }}</div>
|
|
|
+ <div class="growingTendency">土壤碳:{{ item.c }}</div>
|
|
|
+ <div class="growingTendency">总氮:{{ item._2n }}</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="growingTendency">总磷:{{ item.p }}</div>
|
|
|
+ <div class="growingTendency">总钾:{{ item.k }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="count"
|
|
|
+ :pager-count=5
|
|
|
+ @current-change="currentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="legend">
|
|
|
+ <div class="legend-headr">图例 </div>
|
|
|
+ <div>
|
|
|
+ <div class="legend-list" >
|
|
|
+ <span :class="expansion? 'el-icon-caret-bottom':'el-icon-caret-right'" @click="clickStatus()">{{currentLegend.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="leg-list" v-show="expansion">
|
|
|
+ <div v-for="item,index of $store.state.getSFLegendList" class="leg-l" :key="index" @click="clickLeList(item)">
|
|
|
+ <span >{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="item,index of currentLegend.child" :key="index">
|
|
|
+ <div class="le-d" :style="{'background':item.colors}"></div>
|
|
|
+ <span class="le-span">{{item.names}}</span>
|
|
|
+ <input class="legend-check" type="checkbox" value="2" name="assess_mode" :checked="item.opens">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -63,219 +120,209 @@ export default {
|
|
|
watch:{
|
|
|
'$store.state.localDistrict': {
|
|
|
handler(newVal, oldVal) {
|
|
|
+ if(this.$store.state.localDistrict[0].length==3){
|
|
|
+ this.landList()
|
|
|
+ }
|
|
|
if(newVal.length<3){
|
|
|
setTimeout(() => {
|
|
|
this.setlistLand()
|
|
|
}, 200);
|
|
|
-
|
|
|
+ this.setSoilStat()
|
|
|
}
|
|
|
+
|
|
|
|
|
|
|
|
|
},
|
|
|
immediate: true,
|
|
|
deep: true
|
|
|
},
|
|
|
+ '$store.state.getSFLegendList': {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ // this.landAreaStatus = newVal
|
|
|
+ // this.chartData =[];
|
|
|
+ // this.treeData =[];
|
|
|
+ // this.resetEchart();
|
|
|
+
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- curretTwanData:null,
|
|
|
- listLand: [[
|
|
|
+ getlandList: [],
|
|
|
+ sfbarArr: [],
|
|
|
+ curretPlayData:[],
|
|
|
+ getSoilstat:[],
|
|
|
+ expansion:false,
|
|
|
+ currentLegend:null,
|
|
|
+ count:[],
|
|
|
+ legendList:[
|
|
|
{
|
|
|
- label: "镇级1",
|
|
|
- num: "12312.00",
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: "镇级2",
|
|
|
- num: "12312.00",
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: "镇级3",
|
|
|
- num: "12312.00",
|
|
|
-
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: "镇级3",
|
|
|
- num: "12312.00",
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
- ],[
|
|
|
- {
|
|
|
- label: "镇级4",
|
|
|
- num: "12312.00",
|
|
|
-
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
+ text:'土壤酸碱度',
|
|
|
+ open:true,
|
|
|
+ value:'ph',
|
|
|
+ expansion:false,
|
|
|
},{
|
|
|
- label: "镇级5",
|
|
|
- num: "12312.00",
|
|
|
-
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
- ]],
|
|
|
- listAreaData:[
|
|
|
- {
|
|
|
- label: "区级1",
|
|
|
- num: "12312.00",
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },{
|
|
|
- icona:['类型','','cftype'],
|
|
|
- iconb:['长势','- -','cfarea'],
|
|
|
- iconc:['单产','442.35kg','ptdan'],
|
|
|
- icond:['总产','135.35kg','cfzong'],
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: "区级2",
|
|
|
- num: "12312.00",
|
|
|
- townLand: [
|
|
|
- {
|
|
|
- label: 20,
|
|
|
- color: "#5470c6"
|
|
|
- }, {
|
|
|
- label: 50,
|
|
|
- color: "#91cc75"
|
|
|
- }, {
|
|
|
- label: 20,
|
|
|
- color: "#fac858"
|
|
|
- }
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
+ text:'土壤有机物',
|
|
|
+ open:false,
|
|
|
+ value:'toc',
|
|
|
+ expansion:false,
|
|
|
+ },{
|
|
|
+ text:'土壤碳',
|
|
|
+ open:false,
|
|
|
+ value:'c',
|
|
|
+ expansion:false,
|
|
|
+ },{
|
|
|
+ text:'土壤总氮',
|
|
|
+ open:false,
|
|
|
+ value:'_2n',
|
|
|
+ expansion:false,
|
|
|
+ },{
|
|
|
+ text:'土壤总磷',
|
|
|
+ open:false,
|
|
|
+ value:'p',
|
|
|
+ expansion:false,
|
|
|
+ },{
|
|
|
+ text:'土壤总钾',
|
|
|
+ open:false,
|
|
|
+ value:'k',
|
|
|
+ expansion:false,
|
|
|
+ },
|
|
|
],
|
|
|
- sfbarArr: [],
|
|
|
- curretPlayData:[],
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
created() { },
|
|
|
mounted() {
|
|
|
- this.curretPlayData = this.listAreaData
|
|
|
- if(this.$store.state.localDistrict[0].length<3){
|
|
|
- setTimeout(() => {
|
|
|
- this.setlistLand()
|
|
|
- }, 200);
|
|
|
-
|
|
|
- }
|
|
|
+ this.landList()
|
|
|
+ this.setSoilCutline()
|
|
|
},
|
|
|
methods: {
|
|
|
+ currentChange(i){
|
|
|
+
|
|
|
+ this.page =i;
|
|
|
+ this.landList()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地块列表
|
|
|
+ */
|
|
|
+ landList(){
|
|
|
+ let localDistrict = this.$store.state.localDistrict[0]
|
|
|
+ let param={
|
|
|
+ city:localDistrict[0]?localDistrict[0]:'',
|
|
|
+ district:localDistrict[1]?localDistrict[1]:'',
|
|
|
+ town:localDistrict[2]?localDistrict[2]:'',
|
|
|
+ limit:25,
|
|
|
+ page:this.page
|
|
|
+ }
|
|
|
+ this.$http.landList(param).then(res=>{
|
|
|
+ this.getlandListLoading=false
|
|
|
+ this.getlandList= res.data
|
|
|
+ for(let i of res.data){
|
|
|
+ i.area=i.area.toFixed(2);
|
|
|
+ i.perimeter=i.perimeter.toFixed(2);
|
|
|
+ i.name= this.landAreaStatus[i.parcelType].name
|
|
|
+
|
|
|
+ }
|
|
|
+ this.count = res.count
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ clickLeList(item){
|
|
|
+ this.currentLegend = item
|
|
|
+ this.expansion =false
|
|
|
+ this.setSoilStat()
|
|
|
+ },
|
|
|
+ openSimple(event,index,indexs){
|
|
|
+ // let getSFLegendList = this.$store.state.getSFLegendList
|
|
|
+ // this.openAllLegend(index)
|
|
|
+ // this.$set(getSFLegendList[index].child[indexs],'opens',event.target.checked)
|
|
|
+ // getSFLegendList = JSON.parse(JSON.toString(getSFLegendList))
|
|
|
+ // this.$store.commit('setSFLegendList',getSFLegendList)
|
|
|
+ },
|
|
|
+ openAllLegend(index){
|
|
|
+
|
|
|
+ },
|
|
|
+ setSoilCutline(){
|
|
|
+ let _r =this;
|
|
|
+ _r.$http.soil_cutline().then(res=>{
|
|
|
+ for(let i of _r.legendList){
|
|
|
+ i.child = []
|
|
|
+ for(let z = 0;z<res.data[i.value].colors.length; z++){
|
|
|
+ i.child.push({
|
|
|
+ colors:res.data[i.value].colors[z],
|
|
|
+ names:res.data[i.value].names[z],
|
|
|
+ opens:false,
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _r.currentLegend = _r.legendList[0]
|
|
|
+ _r.setSoilStat()
|
|
|
+ _r.$store.commit('setSFLegendList',_r.legendList)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ clickStatus(index){
|
|
|
+ this.expansion =!this.expansion
|
|
|
+ },
|
|
|
+ resetEchart(){
|
|
|
+
|
|
|
+ },
|
|
|
+ setSoilStat(){
|
|
|
+ let localDistrict = this.$store.state.localDistrict[0]
|
|
|
+ let param={
|
|
|
+ statType:this.currentLegend.value,
|
|
|
+ city:localDistrict[0]?localDistrict[0]:'',
|
|
|
+ district:localDistrict[1]?localDistrict[1]:'',
|
|
|
+ }
|
|
|
+ this.$http.soil_stat(param).then(res=>{
|
|
|
+ if(this.$store.state.localDistrict[0].length<3){
|
|
|
+ this.setTwoLevelList(res)
|
|
|
+ }else{
|
|
|
+ this.setThreeLevelList(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 镇级行政区
|
|
|
+ */
|
|
|
+ setThreeLevelList(res){
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 得到echarts图表
|
|
|
+ */
|
|
|
+ getEchartData(data){
|
|
|
+
|
|
|
+ let resdata =[];
|
|
|
+ for(let z of data){
|
|
|
+
|
|
|
+ z.open = true;
|
|
|
+ resdata.push(z)
|
|
|
+ }
|
|
|
+ // this.$store.commit('setSoilStat',resdata);
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 二级行政区
|
|
|
+ */
|
|
|
+ setTwoLevelList(res){
|
|
|
+ this.cityData =[]
|
|
|
+ this.curretPlayData = []
|
|
|
+ for(let i of res.data){
|
|
|
+ if(i.townName == "汇总信息"){
|
|
|
+ this.getEchartData(i.list);
|
|
|
+ this.getSoilstat =i.list;
|
|
|
+ this.getSoilstat[1].value=(this.getSoilstat[1].value).toFixed(2)
|
|
|
+ }else{
|
|
|
+ this.curretPlayData.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setlistLand()
|
|
|
+ },
|
|
|
/**
|
|
|
* 生成动态图标
|
|
|
*/
|
|
@@ -283,22 +330,35 @@ export default {
|
|
|
|
|
|
this.curretPlayData.forEach((item, index) => {
|
|
|
// debugger
|
|
|
- const settimelinWH = {
|
|
|
- width: 370,
|
|
|
- height: 150
|
|
|
- };
|
|
|
-
|
|
|
- let sfbar = this.$echarts.init(document.getElementById('sfbar' + index),
|
|
|
- null,
|
|
|
- settimelinWH
|
|
|
- );
|
|
|
- this.sfbarArr.push(sfbar);
|
|
|
-
|
|
|
- this.setbarsf(sfbar)
|
|
|
+ const settimelinWH = {
|
|
|
+ width: 370,
|
|
|
+ height: 150
|
|
|
+ };
|
|
|
+ let data = [];
|
|
|
+ if(document.getElementById('sfbar' + index)){
|
|
|
+ let sfbar = this.$echarts.init(document.getElementById('sfbar' + index),
|
|
|
+ null,
|
|
|
+ settimelinWH
|
|
|
+ );
|
|
|
+ this.sfbarArr.push(sfbar);
|
|
|
+
|
|
|
+ for(let i of item.list){
|
|
|
+ data.push({
|
|
|
+ value: i.value,
|
|
|
+ itemStyle: {
|
|
|
+ color: i.color,
|
|
|
+ borderRadius:5,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.setbarsf(sfbar,data)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
})
|
|
|
|
|
|
},
|
|
|
- setbarsf(echarts) {
|
|
|
+ setbarsf(echarts,data) {
|
|
|
let option = {
|
|
|
grid: {
|
|
|
left: '5%',
|
|
@@ -318,38 +378,8 @@ export default {
|
|
|
series: [
|
|
|
// 图标列设置
|
|
|
{ type: "bar",
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 400,
|
|
|
- itemStyle: {
|
|
|
- color: '#5470c6',
|
|
|
- borderRadius:5,
|
|
|
- }
|
|
|
- },{
|
|
|
- value: 300,
|
|
|
- itemStyle: {
|
|
|
- color: '#e6a23c',
|
|
|
- borderRadius:5,
|
|
|
- }
|
|
|
- },{
|
|
|
- value: 100,
|
|
|
- itemStyle: {
|
|
|
- color: '#67c23a',
|
|
|
- borderRadius:5,
|
|
|
- }
|
|
|
- },{
|
|
|
- value: 200,
|
|
|
- itemStyle: {
|
|
|
- color: '#66b1ff',
|
|
|
- borderRadius:5,
|
|
|
- }
|
|
|
- },{
|
|
|
- value: 900,
|
|
|
- itemStyle: {
|
|
|
- color: '#510c00',
|
|
|
- borderRadius:5,
|
|
|
- }
|
|
|
- },] },
|
|
|
+ data: data
|
|
|
+ },
|
|
|
],
|
|
|
tooltip: {
|
|
|
// 提示框组件
|
|
@@ -377,6 +407,176 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+
|
|
|
+.cropslist1{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 21px;
|
|
|
+}
|
|
|
+.abs{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+/* .perimeter{
|
|
|
+ position: relative;
|
|
|
+ color: white;
|
|
|
+ float: left;
|
|
|
+ font-size: 15px;
|
|
|
+} */
|
|
|
+
|
|
|
+.growingTendency{
|
|
|
+ position: relative;
|
|
|
+ padding: 0px 5px 0px 0px;
|
|
|
+ font-size: 14px;
|
|
|
+ float: left;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+.el-icon-location {
|
|
|
+ position: absolute;
|
|
|
+ right: 19px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #e6a23c;
|
|
|
+ top: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.b {
|
|
|
+ color: white;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 11px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.a {
|
|
|
+ height: 25px;
|
|
|
+ background-image: linear-gradient(to right, #e6a23c, #0c192800);
|
|
|
+ width: 38px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ float: left;
|
|
|
+ color: white;
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+.listcrop {
|
|
|
+ position: relative;
|
|
|
+ background: #ffffff47;
|
|
|
+ margin: 13px 10px;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+}
|
|
|
+.leg-l{
|
|
|
+ color: white;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 4px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.leg-l :hover{
|
|
|
+ color: #e6a23c;
|
|
|
+}
|
|
|
+.leg-list{
|
|
|
+ position: fixed;
|
|
|
+ color: white;
|
|
|
+ background: #000000fa;
|
|
|
+ border: 1px solid #b5acac;
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 120px;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+}
|
|
|
+.el-icon-caret-bottom{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.el-icon-caret-right{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.le-span{
|
|
|
+ font-size: 10px;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+.le-d{
|
|
|
+ width: 29px;
|
|
|
+ height: 10px;
|
|
|
+ /* background: wheat; */
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ margin: 0px 3px 0px 2px;
|
|
|
+}
|
|
|
+.lp-title .s {
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ color: white;
|
|
|
+ left: 10px;
|
|
|
+}
|
|
|
+.lp-title .m {
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ color: white;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.lp-title {
|
|
|
+ position: relative;
|
|
|
+ height: 27px;
|
|
|
+ background-image: linear-gradient(to right bottom, #ffffff7d, #0c192800);
|
|
|
+}
|
|
|
+
|
|
|
+.list-playx {
|
|
|
+ position: relative;
|
|
|
+ margin: 10px;
|
|
|
+ height: calc(100vh - 390px);
|
|
|
+ border: 1px solid #6e6d6d;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.legend-check{
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.legend-checks{
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.my-checkbox-input:checked{
|
|
|
+ border-color: #fff;
|
|
|
+ -webkit-transform: rotate(45deg) scale(1);
|
|
|
+ transform: rotate(45deg) scale(1);
|
|
|
+}
|
|
|
+
|
|
|
+.legend-checks:checked+.my-checkbox-core {
|
|
|
+ background-color: #26a2ff;
|
|
|
+ border-color: #26a2ff;
|
|
|
+}
|
|
|
+.legend-list{
|
|
|
+ position: relative;
|
|
|
+ color: white;
|
|
|
+ height: auto;
|
|
|
+ background-image: linear-gradient(to right, #ffffff7d, #0c192800);
|
|
|
+ margin: 3px 0px;
|
|
|
+ font-size: 10px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+.header-check{
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 9px;
|
|
|
+}
|
|
|
+.legend-headr{
|
|
|
+ color: white;
|
|
|
+ padding: 5px 10px;
|
|
|
+}
|
|
|
+.legend{
|
|
|
+ width: 129px;
|
|
|
+ height: 200px;
|
|
|
+ /* overflow: auto; */
|
|
|
+ position: fixed;
|
|
|
+ top: 96px;
|
|
|
+ z-index: -1;
|
|
|
+ left: 570px;
|
|
|
+ background-image: linear-gradient(to right bottom, #044060c7, #223b5954);
|
|
|
+}
|
|
|
.xAxis .a{
|
|
|
position: relative;
|
|
|
color: white;
|
|
@@ -533,3 +733,33 @@ export default {
|
|
|
height: auto;
|
|
|
}
|
|
|
</style>
|
|
|
+<style>
|
|
|
+input[type="checkbox"]{
|
|
|
+ /* -webkit-appearance: none; */
|
|
|
+ vertical-align:middle;
|
|
|
+ margin-top:0;
|
|
|
+ background: none;
|
|
|
+ border:#dcdfe6 solid 1px;
|
|
|
+ border-radius: 2px;
|
|
|
+ min-height: 14px;
|
|
|
+ min-width: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+/* 下面这个可以注释掉 只是想以后要改的时候方便些 */
|
|
|
+input[type="checkbox"]:checked {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+
|
|
|
+input[type=checkbox]:checked::after{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ top: 3px;
|
|
|
+ left: 2px;
|
|
|
+ border: #fff solid 1px;
|
|
|
+ border-top: none;
|
|
|
+ border-right: none;
|
|
|
+ height: 3px;
|
|
|
+ width: 7px;
|
|
|
+ transform: rotate(318deg);
|
|
|
+}
|
|
|
+</style>
|