|
|
|
|
@ -76,7 +76,25 @@ export default {
|
|
|
|
|
option1: {},
|
|
|
|
|
// echarts
|
|
|
|
|
myChart1: {},
|
|
|
|
|
myChart1data: [
|
|
|
|
|
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
|
|
|
|
|
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
|
|
|
|
|
{
|
|
|
|
|
value: "0",
|
|
|
|
|
name: "生产抽样环节",
|
|
|
|
|
percent: "0",
|
|
|
|
|
// itemStyle: { color: "#007EFF" },
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "0",
|
|
|
|
|
name: "流通环节抽样",
|
|
|
|
|
percent: "0",
|
|
|
|
|
// itemStyle: { color: "#2CD8EC" },
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
option2: {},
|
|
|
|
|
myChart2data: [],
|
|
|
|
|
myChart2data2: [],
|
|
|
|
|
// echarts
|
|
|
|
|
myChart2: {},
|
|
|
|
|
//==============
|
|
|
|
|
@ -94,21 +112,51 @@ export default {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
reducefn(data = []) {
|
|
|
|
|
return data.reduce((accumulator, current) => current.sampleType + accumulator, 0);
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
let newRouter = this.$route.query;
|
|
|
|
|
getCPCJ({ name: newRouter.code }).then((res) => {
|
|
|
|
|
res.data.result.forEach((value, index) => {
|
|
|
|
|
if (value.sampleType == 1) {
|
|
|
|
|
this.provinceC += 1;
|
|
|
|
|
} else if (value.sampleType == 2) {
|
|
|
|
|
this.countryC += 1;
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
if (res.data.result.length != 0) {
|
|
|
|
|
|
|
|
|
|
// 计算生产抽样数量
|
|
|
|
|
this.myChart1data[0].value = res.data.result.filter(item => item.inspectType === "生产环节").length
|
|
|
|
|
this.myChart1data[0].percent = ((res.data.result.filter(item => item.inspectType === "生产环节").length / res.data.result.length) * 100).toFixed(1)
|
|
|
|
|
this.myChart1data[1].value = res.data.result.filter(item => item.inspectType === "流通环节").length
|
|
|
|
|
this.myChart1data[1].percent = ((res.data.result.filter(item => item.inspectType === "流通环节").length / res.data.result.length) * 100).toFixed(1)
|
|
|
|
|
// 计算省份次数
|
|
|
|
|
let mergedData = {};
|
|
|
|
|
res.data.result.forEach((item) => {
|
|
|
|
|
if (item.qualified === "合格") {
|
|
|
|
|
if (mergedData[item.province]) {
|
|
|
|
|
mergedData[item.province].sampleType += item.sampleType;
|
|
|
|
|
} else {
|
|
|
|
|
mergedData[item.province] = {
|
|
|
|
|
province: item.province,
|
|
|
|
|
sampleType: item.sampleType
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// this.countryC = 12;
|
|
|
|
|
// this.provinceC = 12;
|
|
|
|
|
// this.pt = 67;
|
|
|
|
|
// this.sccy = 60;
|
|
|
|
|
// this.ltcy = 40;
|
|
|
|
|
const result = Object.values(mergedData);
|
|
|
|
|
result.forEach(item=>{
|
|
|
|
|
this.myChart2data.push(item.province)
|
|
|
|
|
this.myChart2data2.push(item.sampleType)
|
|
|
|
|
})
|
|
|
|
|
// 国家次数显示
|
|
|
|
|
this.countryC = res.data.result.length
|
|
|
|
|
// 计算合格率
|
|
|
|
|
const filteredData = res.data.result.filter(item => item.qualified === "不合格");
|
|
|
|
|
this.pt = Math.floor(((this.reducefn(res.data.result) - this.reducefn(filteredData)) / this.reducefn(res.data.result)) * 100)
|
|
|
|
|
}else{
|
|
|
|
|
this.myChart2data = ["暂无"]
|
|
|
|
|
this.myChart2data2 = ['0']
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
let chartDom = this.$refs["left-echart"];
|
|
|
|
|
this.myChart1 = echarts.init(chartDom);
|
|
|
|
|
@ -131,9 +179,9 @@ export default {
|
|
|
|
|
params.marker +
|
|
|
|
|
params.name +
|
|
|
|
|
": " +
|
|
|
|
|
params.value +
|
|
|
|
|
( params.value||0) +
|
|
|
|
|
" (" +
|
|
|
|
|
params.percent +
|
|
|
|
|
( params.percent || 0) +
|
|
|
|
|
"%)</div>"
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
@ -156,15 +204,15 @@ export default {
|
|
|
|
|
{
|
|
|
|
|
name: "",
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["45%", "70%"],
|
|
|
|
|
center: ["50%", "40%"], // 调整 y 值为 '40%'，使饼图向上位移
|
|
|
|
|
radius: ["45%", "66%"],
|
|
|
|
|
center: ["50%", "44%"], // 调整 y 值为 '40%'，使饼图向上位移
|
|
|
|
|
// itemStyle:{
|
|
|
|
|
// borderWidth:1, //设置border的宽度有多大
|
|
|
|
|
// borderColor:'#fff',
|
|
|
|
|
// },
|
|
|
|
|
labelLine: {
|
|
|
|
|
normal: {
|
|
|
|
|
length: 15, // 指示线宽度
|
|
|
|
|
length: 10, // 指示线宽度
|
|
|
|
|
position: "outer", // 将标签线放在扇区外部转折点
|
|
|
|
|
lineStyle: function (params) {
|
|
|
|
|
// 根据数据项的颜色动态设置文字颜色
|
|
|
|
|
@ -180,7 +228,7 @@ export default {
|
|
|
|
|
// 各分区的提示内容
|
|
|
|
|
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
return params.percent + "%";
|
|
|
|
|
return (params.data.percent || 0) + "%";
|
|
|
|
|
},
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "auto",
|
|
|
|
|
@ -188,22 +236,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
|
|
|
|
|
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
|
|
|
|
|
{
|
|
|
|
|
value: "1",
|
|
|
|
|
name: "生产抽样环节",
|
|
|
|
|
// percent: "39",
|
|
|
|
|
// itemStyle: { color: "#007EFF" },
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "1",
|
|
|
|
|
name: "流通环节抽样",
|
|
|
|
|
// percent: "21",
|
|
|
|
|
// itemStyle: { color: "#2CD8EC" },
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
data: this.myChart1data
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
@ -238,11 +271,12 @@ export default {
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
margin: 0,
|
|
|
|
|
},
|
|
|
|
|
rotate: -30, // 设置文字倾斜角度
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
data: ["辽宁", "江苏", "湖南", "山西", "湖北", "山东"],
|
|
|
|
|
data: this.myChart2data
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
@ -302,7 +336,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: [12, 15, 17, 20, 25, 26],
|
|
|
|
|
data: this.myChart2data2
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
@ -313,8 +347,7 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
|
|
.box {
|
|
|
|
|
}
|
|
|
|
|
.box {}
|
|
|
|
|
|
|
|
|
|
.top-box {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
