|
|
|
|
|
<template>
|
|
|
<div class="box">
|
|
|
<div class="top-box">
|
|
|
<div class="topbox-item">
|
|
|
<div class="topBOxitem">
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
:content="countryC"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<div class="topBOxitem-top">
|
|
|
<span>{{ countryC || 0 }}</span> <span>次</span>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
|
|
|
<div class="topBOxitem-bottom">国家检测次数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="topbox-item">
|
|
|
<div class="topBOxitem">
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
:content="provinceC"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<div class="topBOxitem-top">
|
|
|
<span>{{ provinceC || 0 }}</span> <span>次</span>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
|
|
|
<div class="topBOxitem-bottom">省级抽检次数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="topbox-item">
|
|
|
<div class="topBOxitem">
|
|
|
<div class="topBOxitem-top">
|
|
|
<span>{{ pt }}%</span>
|
|
|
</div>
|
|
|
<div class="topBOxitem-bottom">抽检合格率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom-content">
|
|
|
<div class="left-echart" ref="left-echart"></div>
|
|
|
<div class="right-echart" ref="right-echart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
import { getCPCJ } from "@/api/largeScreen/index";
|
|
|
export default {
|
|
|
name: "informationBox",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
topList: [
|
|
|
{
|
|
|
order: "12",
|
|
|
jcaddress: "国家检测次数",
|
|
|
},
|
|
|
{
|
|
|
order: "31",
|
|
|
jcaddress: "省级检测次数",
|
|
|
},
|
|
|
{
|
|
|
order: "14",
|
|
|
jcaddress: "抽检合格率",
|
|
|
},
|
|
|
],
|
|
|
|
|
|
option1: {},
|
|
|
// echarts
|
|
|
myChart1: {},
|
|
|
option2: {},
|
|
|
// echarts
|
|
|
myChart2: {},
|
|
|
//==============
|
|
|
provinceC: 0,
|
|
|
countryC: 0,
|
|
|
//合格率
|
|
|
pt: 0,
|
|
|
//抽样类型
|
|
|
sccy: 0,
|
|
|
ltcy: 0,
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
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;
|
|
|
// }
|
|
|
// });
|
|
|
this.countryC = 12;
|
|
|
this.provinceC = 12;
|
|
|
this.pt = 67;
|
|
|
this.sccy = 60;
|
|
|
this.ltcy = 40;
|
|
|
this.$nextTick(() => {
|
|
|
let chartDom = this.$refs["left-echart"];
|
|
|
this.myChart1 = echarts.init(chartDom);
|
|
|
this.initEcharts();
|
|
|
let chartDom2 = this.$refs["right-echart"];
|
|
|
this.myChart2 = echarts.init(chartDom2);
|
|
|
this.initEcharts2();
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
initEcharts() {
|
|
|
this.option1 = {
|
|
|
color: ["#007EFF", "#2CD8EC"],
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
// formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
'<div style="line-height: 1;">' +
|
|
|
params.marker +
|
|
|
params.name +
|
|
|
": " +
|
|
|
params.value +
|
|
|
" (" +
|
|
|
params.percent +
|
|
|
"%)</div>"
|
|
|
);
|
|
|
},
|
|
|
extraCssText:
|
|
|
"padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;", // 设置提示框的样式
|
|
|
},
|
|
|
legend: {
|
|
|
orient: "horizontal",
|
|
|
bottom: 0,
|
|
|
itemWidth: 10,
|
|
|
itemHeight: 10,
|
|
|
itemGap: 25,
|
|
|
data: ["生产抽样环节", "流通环节抽样"],
|
|
|
textStyle: {
|
|
|
color: "auto",
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
radius: ["45%", "70%"],
|
|
|
center: ["50%", "40%"], // 调整 y 值为 '40%'，使饼图向上位移
|
|
|
// itemStyle:{
|
|
|
// borderWidth:1, //设置border的宽度有多大
|
|
|
// borderColor:'#fff',
|
|
|
// },
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
length: 15, // 指示线宽度
|
|
|
position: "outer", // 将标签线放在扇区外部转折点
|
|
|
lineStyle: function (params) {
|
|
|
// 根据数据项的颜色动态设置文字颜色
|
|
|
return {
|
|
|
color: params.color,
|
|
|
fontSize: 14,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
// 各分区的提示内容
|
|
|
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
|
|
|
formatter: function (params) {
|
|
|
return params.percent + "%";
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: "auto",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: [
|
|
|
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
|
|
|
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
|
|
|
{
|
|
|
value: 39,
|
|
|
name: "生产抽样环节",
|
|
|
// percent: "39",
|
|
|
// itemStyle: { color: "#007EFF" },
|
|
|
},
|
|
|
{
|
|
|
value: 21,
|
|
|
name: "流通环节抽样",
|
|
|
// percent: "21",
|
|
|
// itemStyle: { color: "#2CD8EC" },
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
this.myChart1.setOption(this.option1);
|
|
|
},
|
|
|
initEcharts2() {
|
|
|
this.option2 = {
|
|
|
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
top: "8%",
|
|
|
left: "10%",
|
|
|
right: "10%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
|
|
|
axisLine: {
|
|
|
show: false, // 隐藏 x 轴线
|
|
|
lineStyle: {
|
|
|
color: "#233e64",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: "#B7D4F5",
|
|
|
fontSize: 12,
|
|
|
margin: 0,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: ["辽宁", "江苏", "湖南", "山西", "湖北", "山东"],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
show: true,
|
|
|
type: "value",
|
|
|
name: "123",
|
|
|
splitLine: {
|
|
|
show: true, // 显示背后的横线
|
|
|
lineStyle: {
|
|
|
color: "#233e64",
|
|
|
type: "dashed", // 可以设置为实线或虚线
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false, // 隐藏 y 轴线
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: "#6a9cd5",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
type: "bar",
|
|
|
barWidth: "16",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
// background: linear-gradient(0deg, #21B5E1 100%);
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(33,181,225,1)", // 起始颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(6,31,55,0.1)", // 结束颜色
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'top'
|
|
|
// }
|
|
|
},
|
|
|
},
|
|
|
|
|
|
data: [12, 15, 17, 20, 25, 26],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
this.myChart2.setOption(this.option2);
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
.box {
|
|
|
}
|
|
|
|
|
|
.top-box {
|
|
|
margin: 10px 0;
|
|
|
height: 85px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
.topbox-item {
|
|
|
width: 240px;
|
|
|
display: flex;
|
|
|
flex-direction: row-reverse;
|
|
|
align-items: center;
|
|
|
padding-right: 30px;
|
|
|
|
|
|
&:nth-of-type(1) {
|
|
|
background: url("../../../assets/images/daping/jiance1.png");
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
:nth-of-type(1) {
|
|
|
background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
background: url("../../../assets/images/daping/jiance2.png");
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
:nth-of-type(1) {
|
|
|
background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&:nth-of-type(3) {
|
|
|
background: url("../../../assets/images/daping/jiance3.png");
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
:nth-of-type(1) {
|
|
|
background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.topBOxitem {
|
|
|
margin-top: -40px;
|
|
|
|
|
|
.topBOxitem-top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
:nth-of-type(1) {
|
|
|
display: block;
|
|
|
max-width: 90px;
|
|
|
white-space: nowrap;
|
|
|
/* 不换行 */
|
|
|
overflow: hidden;
|
|
|
/* 溢出内容隐藏 */
|
|
|
text-overflow: ellipsis;
|
|
|
/* 显示省略号 */
|
|
|
font-size: 34px;
|
|
|
font-family: YouSheBiaoTiHei;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
:nth-of-type(2) {
|
|
|
font-size: 14px;
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.topBOxitem-bottom {
|
|
|
font-size: 16px;
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom-content {
|
|
|
height: 210px;
|
|
|
display: flex;
|
|
|
|
|
|
.left-echart {
|
|
|
flex: 0.7;
|
|
|
}
|
|
|
|
|
|
.right-echart {
|
|
|
flex: 1.3;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
