|
@@ -13,7 +13,7 @@
|
|
|
<img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
|
|
|
<div id="eCharts-category" v-show="dataType"></div>
|
|
|
<div class="position-max-box" v-show="dataType">
|
|
|
- <div class="position-for-box" v-for="(item,index) in data1" :key="index">
|
|
|
+ <div class="position-for-box" v-for="(item,index) in newData" :key="index">
|
|
|
<p :style="'background:'+eChartsListColor[index]+';'"></p>
|
|
|
<p>{{item.classifyAttribute}}</p>
|
|
|
<p>{{item.chemicalMix}}</p>
|
|
@@ -22,64 +22,68 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemicalManage'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'categoryStatistics',
|
|
|
data () {
|
|
|
return {
|
|
|
dataType:false,
|
|
|
eChartsListColor : ["#009DFF","#0045AF","#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4"],
|
|
|
- maxNum:234,
|
|
|
- data1:[
|
|
|
- {
|
|
|
- name:"易燃气体",
|
|
|
- value:"4",
|
|
|
- classifyAttribute: "易燃气体",
|
|
|
- chemicalMix: "4%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"易燃液体",
|
|
|
- value:"4",
|
|
|
- classifyAttribute: "易燃液体",
|
|
|
- chemicalMix: "4%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"爆炸品",
|
|
|
- value:"32",
|
|
|
- classifyAttribute: "爆炸品",
|
|
|
- chemicalMix: "32%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"有毒品",
|
|
|
- value:"21",
|
|
|
- classifyAttribute: "有毒品",
|
|
|
- chemicalMix: "21%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"压缩气体或液化气体",
|
|
|
- value:"15",
|
|
|
- classifyAttribute: "压缩气体或液化气体",
|
|
|
- chemicalMix: "15%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"易挥发",
|
|
|
- value:"14",
|
|
|
- classifyAttribute: "易挥发",
|
|
|
- chemicalMix: "14%"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"其他",
|
|
|
- value:"10",
|
|
|
- classifyAttribute: "其他",
|
|
|
- chemicalMix: "10%"
|
|
|
- }
|
|
|
- ],
|
|
|
+ maxNum:0,
|
|
|
+ // data1:[
|
|
|
+ // {
|
|
|
+ // name:"易燃气体",
|
|
|
+ // value:"4",
|
|
|
+ // classifyAttribute: "易燃气体",
|
|
|
+ // chemicalMix: "4%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"易燃液体",
|
|
|
+ // value:"4",
|
|
|
+ // classifyAttribute: "易燃液体",
|
|
|
+ // chemicalMix: "4%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"爆炸品",
|
|
|
+ // value:"32",
|
|
|
+ // classifyAttribute: "爆炸品",
|
|
|
+ // chemicalMix: "32%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"有毒品",
|
|
|
+ // value:"21",
|
|
|
+ // classifyAttribute: "有毒品",
|
|
|
+ // chemicalMix: "21%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"压缩气体或液化气体",
|
|
|
+ // value:"15",
|
|
|
+ // classifyAttribute: "压缩气体或液化气体",
|
|
|
+ // chemicalMix: "15%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"易挥发",
|
|
|
+ // value:"14",
|
|
|
+ // classifyAttribute: "易挥发",
|
|
|
+ // chemicalMix: "14%"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:"其他",
|
|
|
+ // value:"10",
|
|
|
+ // classifyAttribute: "其他",
|
|
|
+ // chemicalMix: "10%"
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ newData:[],
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
-
|
|
|
+ this.chemicalIndexChemicalGroup();
|
|
|
},
|
|
|
mounted(){
|
|
|
- this.getInfo();
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
methods:{
|
|
|
//获取数据
|
|
@@ -87,12 +91,24 @@
|
|
|
this.$set(this,'dataType',true);
|
|
|
this.eChartsDraw();
|
|
|
},
|
|
|
+ chemicalIndexChemicalGroup(){
|
|
|
+ let self=this;
|
|
|
+ let list=[];
|
|
|
+ chemicalIndexChemicalGroup().then(response => {
|
|
|
+ self.maxNum=response.data.count;
|
|
|
+ response.data.list.forEach(function(item,index) {
|
|
|
+ list.push({name:item.name,value:item.number,classifyAttribute:item.name,chemicalMix:item.ratio})
|
|
|
+ })
|
|
|
+ this.$set(this, 'newData',list)
|
|
|
+ this.getInfo();
|
|
|
+ });
|
|
|
+ },
|
|
|
//eCharts绘制
|
|
|
eChartsDraw(){
|
|
|
let myChart = this.$echarts.init(document.getElementById('eCharts-category'));
|
|
|
let bgColor = "#fff";
|
|
|
let title = "化学品总数";
|
|
|
- let echartData = this.data1;
|
|
|
+ let echartData = this.newData;
|
|
|
let formatNumber = function (num) {
|
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
|
return num.toString().replace(reg, ",");
|