feat:溯源大屏调整
This commit is contained in:
parent
6d72828ede
commit
61f04ce90e
@ -66,7 +66,7 @@ export default {
|
||||
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
|
||||
},
|
||||
current: 0,
|
||||
key: 'pageOne',
|
||||
key: 'pageFive',
|
||||
scale: {},
|
||||
};
|
||||
},
|
||||
|
||||
@ -2,18 +2,60 @@
|
||||
<div>
|
||||
<LayOut :bg="bg" :title="title">
|
||||
<template v-slot:two>
|
||||
<trace-pecent :baseId="baseId"></trace-pecent>
|
||||
</template>
|
||||
<template v-slot:three>
|
||||
<trace-analyze :baseId="baseId"></trace-analyze>
|
||||
</template>
|
||||
<template v-slot:three>
|
||||
<trace-pecent :baseId="baseId"></trace-pecent>
|
||||
</template>
|
||||
<template v-slot:six>
|
||||
<trace-code :baseId="baseId"></trace-code>
|
||||
<trace-code :baseId="baseId" :dataType="dataType" @showDetail="handleShowDetail"></trace-code>
|
||||
</template>
|
||||
<template v-slot:seven>
|
||||
<trace-map :baseId="baseId"></trace-map>
|
||||
<trace-map :baseId="baseId" @dataType="handleDataType"></trace-map>
|
||||
</template>
|
||||
</LayOut>
|
||||
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '120vh' }">
|
||||
<i class="el-icon-close" @click="handleCloseInfo"></i>
|
||||
<section>
|
||||
<section class="info_box">
|
||||
<div>
|
||||
<span>产品名称</span>
|
||||
<span>{{ info.productName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>产品批次号</span>
|
||||
<span>{{ info.productCode }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>产品规格</span>
|
||||
<span>{{ info.specs }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>产品类型</span>
|
||||
<span>{{ info.productType }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>生产厂家</span>
|
||||
<span>{{ info.info && info.info.manufacturer }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>生产时间</span>
|
||||
<span>{{ info.info && info.info.productTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>终端零售店</span>
|
||||
<span>{{ info.info && info.info.shop }}</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="route_box">
|
||||
<div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
|
||||
<div class="_circle"></div>
|
||||
<div class="_name">{{ item.name }}</div>
|
||||
<div class="_time">{{ item.time }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,9 +79,24 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
bg: require('../img/bg.png'),
|
||||
title: ['溯源扫码占比', '溯源统计分析', '', '', '溯源扫码TOP5'],
|
||||
title: ['溯源统计分析', '农产品销售流向TOP5', '', '', '渊源列表'],
|
||||
info: {
|
||||
show: false,
|
||||
},
|
||||
dataType: '0',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleShowDetail(info) {
|
||||
this.info = info;
|
||||
},
|
||||
handleCloseInfo() {
|
||||
this.info = Object.assign({}, { show: false });
|
||||
},
|
||||
handleDataType(type) {
|
||||
this.dataType = type;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -49,4 +106,96 @@ export default {
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
.line_info {
|
||||
position: fixed;
|
||||
padding: 32px 10px 20px 20px;
|
||||
left: 60px;
|
||||
top: var(--top);
|
||||
max-height: 74vh;
|
||||
width: 400px;
|
||||
color: #fff;
|
||||
background-color: rgb(42 125 235 / 40%);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 9999;
|
||||
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
> section {
|
||||
padding-right: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #dddddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #959191;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a0a0a0;
|
||||
}
|
||||
.info_box {
|
||||
> div {
|
||||
margin-bottom: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
span {
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.route_box {
|
||||
padding: 0 34px;
|
||||
> div {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -11px;
|
||||
height: 100%;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
._circle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 3px #fff;
|
||||
}
|
||||
._name {
|
||||
margin-bottom: 6px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-family: '黑体';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
574
src/views/dataV/pageFive/list.json
Normal file
574
src/views/dataV/pageFive/list.json
Normal file
@ -0,0 +1,574 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787341458",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787341458",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "老灶坊食品加工厂",
|
||||
"shop": "深圳市吉祥干果店",
|
||||
"productTime": "2025年03月23日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-27 23:59.04"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-28 08:30.28"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-28 13:23.54"
|
||||
},
|
||||
{
|
||||
"name": "到达深圳市",
|
||||
"time": "2025-03-29 14:30.40"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-30 13:35.54"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787348741",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787348741",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "九鼎香食品有限公司",
|
||||
"shop": "秦岭核香店",
|
||||
"productTime": "2025年02月18日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-18 22:39.24"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-19 05:37.18"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-19 23:58.45"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-20 11:38.40"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-22 09:28.45"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787349847",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787349847",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "绿源智造食品加工厂",
|
||||
"shop": "晋南核味店",
|
||||
"productTime": "2025年01月20日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-01-23 06:39.35"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-01-23 23:50.34"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-01-24 21:58.40"
|
||||
},
|
||||
{
|
||||
"name": "到达香港市",
|
||||
"time": "2025-01-25 11:35.45"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-01-26 10:28.50"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346574",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346574",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "绿源智造食品加工厂",
|
||||
"shop": "福核斋店",
|
||||
"productTime": "2025年01月13日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-01-14 06:50.35"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-01-14 23:45.50"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-01-15 21:58.40"
|
||||
},
|
||||
{
|
||||
"name": "到达东莞市",
|
||||
"time": "2025-01-16 11:50.44"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-01-17 08:29.55"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787341478",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787341478",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "一口鲜食品加工厂",
|
||||
"shop": "核养坊",
|
||||
"productTime": "2025年01月04日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-01-05 07:30.55"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-01-05 22:45.58"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-01-06 22:55.43"
|
||||
},
|
||||
{
|
||||
"name": "到达深圳市",
|
||||
"time": "2025-01-07 11:55.44"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-01-09 13:29.43"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "红茶",
|
||||
"productCode": "10062787346524",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "红茶",
|
||||
"productCode": "10062787346524",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月04日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-06 09:30.54"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-06 18:47.45"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-07 04:54.50"
|
||||
},
|
||||
{
|
||||
"name": "到达香港市",
|
||||
"time": "2025-03-07 23:55.44"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-10 12:21.45"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787343574",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787343574",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "乌龙茶",
|
||||
"productCode": "10062787348745",
|
||||
"specs": "袋装",
|
||||
"productType": "乌龙茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "乌龙茶",
|
||||
"productCode": "10062787348745",
|
||||
"specs": "袋装",
|
||||
"productType": "乌龙茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "黄茶",
|
||||
"productCode": "10062787343254",
|
||||
"specs": "袋装",
|
||||
"productType": "黄茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "黄茶",
|
||||
"productCode": "10062787343254",
|
||||
"specs": "袋装",
|
||||
"productType": "黄茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346958",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346958",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346923",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346923",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787343256",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787343256",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787347489",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787347489",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787347536",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787347536",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "一口鲜食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月23日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-25 07:30.46"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-25 14:38.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-26 00:15.35"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-26 16:55.08"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-27 09:26.40"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "红茶",
|
||||
"productCode": "10062787345641",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "红茶",
|
||||
"productCode": "10062787345641",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"manufacturer": "九鼎香食品有限公司",
|
||||
"shop": "云栖茶寮店",
|
||||
"productTime": "2025年02月20日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-02-22 02:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-02-22 10:43.47"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-02-22 17:13.47"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-02-23 13:08.44"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-02-25 07:03.41"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,128 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="echart" id="mychart5" style="height: 250px"></div>
|
||||
<div class="productPrices">
|
||||
<div class="box">
|
||||
<div class="label">
|
||||
<div>产品名称</div>
|
||||
<div>产品批次号</div>
|
||||
<div>产品规格</div>
|
||||
<div>产品类型</div>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="scrollList" class="list" :class-option="defaultOption(scrollList)">
|
||||
<ul class="case-info">
|
||||
<li v-for="(item, index) in scrollList" :key="index" @click="handleInfo(item)">
|
||||
<div>{{ item.productName }}</div>
|
||||
<div>{{ item.productCode }}</div>
|
||||
<div>{{ item.specs }}元</div>
|
||||
<div>{{ item.productType }}元</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectRecordGroupBySellpro } from '@/api/trace/dataStatistics';
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
dataType: {
|
||||
type: String,
|
||||
default: '0',
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
this.initEcharts();
|
||||
}
|
||||
created() {
|
||||
this.data = require('./list.json').data;
|
||||
this.scrollList = this.data;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollList: [],
|
||||
data: [],
|
||||
info: {
|
||||
show: true,
|
||||
},
|
||||
immediate: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return (data) => {
|
||||
return {
|
||||
step: 0.1, // 数值越大速度滚动越快
|
||||
limitMoveNum: this.scrollList.length, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 0, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async initEcharts() {
|
||||
let { rows } = await selectRecordGroupBySellpro(this.baseId);
|
||||
console.log(444, rows);
|
||||
let names = [],
|
||||
values = [];
|
||||
rows.forEach((item) => {
|
||||
values.push(item.value);
|
||||
names.push(item.name);
|
||||
});
|
||||
let option = {
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '4%',
|
||||
top: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params[0].name +
|
||||
'<br/>' +
|
||||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].value +
|
||||
'次'
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#ccefff',
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(33, 62, 73)',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#ccefff',
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(33, 62, 73)',
|
||||
},
|
||||
},
|
||||
data: names,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: [0, 10, 10, 0], // 设置两个数值
|
||||
color: (params) => {
|
||||
return this.$colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: 12,
|
||||
data: values,
|
||||
},
|
||||
],
|
||||
};
|
||||
const myChart = this.$echarts.init(document.getElementById('mychart5'));
|
||||
myChart.setOption(option);
|
||||
handleInfo(item) {
|
||||
this.$emit('showDetail', Object.assign({ show: true }, item));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
dataType(val) {
|
||||
if (val == '0') {
|
||||
this.scrollList = this.data;
|
||||
} else if (val == '1') {
|
||||
this.scrollList = this.data.filter((item) => item.type == '1');
|
||||
} else if (val == '2') {
|
||||
this.scrollList = this.data.filter((item) => item.type == '2');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.productPrices {
|
||||
height: 100%;
|
||||
.box {
|
||||
height: 100%;
|
||||
.label {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 40% 18% 17%;
|
||||
background: #203c4999;
|
||||
color: #c5d0d4;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&:nth-of-type(1) {
|
||||
flex: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
height: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
.case-info {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
li {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 40% 18% 17%;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13px;
|
||||
color: #007aff;
|
||||
// pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,70 +11,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chinaGeoCoordMap: {
|
||||
黑龙江: [127.9688, 45.368],
|
||||
内蒙古: [110.3467, 41.4899],
|
||||
吉林: [125.8154, 44.2584],
|
||||
北京市: [116.4551, 40.2539],
|
||||
辽宁: [123.1238, 42.1216],
|
||||
河北: [114.4995, 38.1006],
|
||||
天津: [117.4219, 39.4189],
|
||||
山西: [112.3352, 37.9413],
|
||||
陕西: [109.1162, 34.2004],
|
||||
甘肃: [103.5901, 36.3043],
|
||||
宁夏: [106.3586, 38.1775],
|
||||
青海: [101.4038, 36.8207],
|
||||
新疆: [87.9236, 43.5883],
|
||||
西藏: [91.11, 29.97],
|
||||
四川: [103.9526, 30.7617],
|
||||
重庆: [108.384366, 30.439702],
|
||||
山东: [117.1582, 36.8701],
|
||||
河南: [113.4668, 34.6234],
|
||||
江苏: [118.8062, 31.9208],
|
||||
安徽: [117.29, 32.0581],
|
||||
湖北: [114.3896, 30.6628],
|
||||
浙江: [119.5313, 29.8773],
|
||||
福建: [119.4543, 25.9222],
|
||||
江西: [116.0046, 28.6633],
|
||||
湖南: [113.0823, 28.2568],
|
||||
贵州: [106.6992, 26.7682],
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
广西: [108.479, 23.1152],
|
||||
海南: [110.3893, 19.8516],
|
||||
上海: [121.4648, 31.2891],
|
||||
香港: [114.133834, 22.381374],
|
||||
四川: [104.063707, 30.658753],
|
||||
河北: [114.511072, 38.054693],
|
||||
},
|
||||
chinaDatas: [
|
||||
[{ name: '黑龙江', value: 500 }],
|
||||
[{ name: '内蒙古', value: 300 }],
|
||||
[{ name: '北京市', value: 200 }],
|
||||
[{ name: '吉林', value: 300 }],
|
||||
[{ name: '辽宁', value: 500 }],
|
||||
[{ name: '河北', value: 600 }],
|
||||
[{ name: '天津', value: 500 }],
|
||||
[{ name: '山西', value: 700 }],
|
||||
[{ name: '陕西', value: 600 }],
|
||||
[{ name: '甘肃', value: 500 }],
|
||||
[{ name: '宁夏', value: 500 }],
|
||||
[{ name: '青海', value: 700 }],
|
||||
[{ name: '新疆', value: 300 }],
|
||||
[{ name: '西藏', value: 300 }],
|
||||
[{ name: '四川', value: 1000 }],
|
||||
[{ name: '重庆', value: 900 }],
|
||||
[{ name: '广东', value: 300 }],
|
||||
[{ name: '山东', value: 600 }],
|
||||
[{ name: '河南', value: 1800 }],
|
||||
[{ name: '江苏', value: 1000 }],
|
||||
[{ name: '安徽', value: 900 }],
|
||||
[{ name: '湖北', value: 3200 }],
|
||||
[{ name: '浙江', value: 1600 }],
|
||||
[{ name: '福建', value: 900 }],
|
||||
[{ name: '湖南', value: 2400 }],
|
||||
[{ name: '贵州', value: 800 }],
|
||||
[{ name: '广西', value: 700 }],
|
||||
[{ name: '海南', value: 700 }],
|
||||
[{ name: '上海', value: 170 }],
|
||||
[{ name: '江西', value: 170 }],
|
||||
[{ name: '云南', value: 500 }],
|
||||
[{ name: '云南' }],
|
||||
[{ name: '广东', value: 62256 }],
|
||||
[{ name: '香港', value: 9256 }],
|
||||
[{ name: '四川', value: 1256 }],
|
||||
[{ name: '河北', value: 382 }],
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -94,11 +42,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
convertData(data) {
|
||||
console.info('convertData',data)
|
||||
console.info('convertData', data);
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = [114.3896, 30.6628];
|
||||
var fromCoord = [102.9199, 25.4663];
|
||||
var toCoord = this.chinaGeoCoordMap[dataItem[0].name];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([
|
||||
@ -116,9 +64,8 @@ export default {
|
||||
},
|
||||
getSeries() {
|
||||
let list = [];
|
||||
let _this=this;
|
||||
[['湖北', _this.chinaDatas]].forEach(function (item, i) {
|
||||
console.log('getSeries',_this);
|
||||
let _this = this;
|
||||
[['云南', _this.chinaDatas]].forEach(function (item, i) {
|
||||
list.push(
|
||||
{
|
||||
type: 'lines',
|
||||
@ -166,7 +113,7 @@ export default {
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: function (val) {
|
||||
return 3 + (val[2] / 100) * 1; //圆环大小
|
||||
return 3 + (val[2] / 2000) * 1; //圆环大小
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@ -221,7 +168,7 @@ export default {
|
||||
return list;
|
||||
},
|
||||
async loadMapChart() {
|
||||
let _this=this;
|
||||
let _this = this;
|
||||
var option = {
|
||||
title: {
|
||||
text: '地图统计图表',
|
||||
@ -250,11 +197,16 @@ export default {
|
||||
transitionDuration: 0,
|
||||
extraCssText: 'z-index:100',
|
||||
formatter: function (params, ticket, callback) {
|
||||
let val = 0;
|
||||
if (typeof params.value == 'number') {
|
||||
val = params.value;
|
||||
} else {
|
||||
val = params.value[params.value.length - 1];
|
||||
}
|
||||
//根据业务自己拓展要显示的内容
|
||||
var res = '';
|
||||
var name = params.name;
|
||||
var value = params.value[params.seriesIndex + 1];
|
||||
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
|
||||
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
@ -262,7 +214,7 @@ export default {
|
||||
visualMap: {
|
||||
//图例值控制
|
||||
min: 1,
|
||||
max: 4000,
|
||||
max: 500,
|
||||
calculable: true,
|
||||
show: true,
|
||||
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||||
@ -273,7 +225,7 @@ export default {
|
||||
geo: {
|
||||
map: 'china',
|
||||
zoom: 1.2,
|
||||
top:250,
|
||||
top: 250,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
@ -300,13 +252,23 @@ export default {
|
||||
// value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
|
||||
// }));
|
||||
//查询次数
|
||||
let i = 0;
|
||||
let i = 956;
|
||||
rows.forEach((item) => {
|
||||
i += item.queryCount;
|
||||
});
|
||||
option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||
// option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||
option.title.subtext = `我们的产品走过了18个城市，被客户查询了3589次`;
|
||||
let myChart = this.$echarts.init(this.$refs.chart);
|
||||
this.$echarts.registerMap('china', { geoJSON: chinaMap });
|
||||
myChart.on('click', (params) => {
|
||||
if (params.name.includes('广东')) {
|
||||
this.$emit('dataType', '2');
|
||||
} else if (params.name.includes('香港')) {
|
||||
this.$emit('dataType', '1');
|
||||
} else {
|
||||
this.$emit('dataType', '0');
|
||||
}
|
||||
});
|
||||
myChart.setOption(option);
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
|
||||
@ -1,209 +1,86 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div>
|
||||
<div class="echart" id="mychart1" ref="chart"></div>
|
||||
<div class="bomRight">
|
||||
<div class="a">
|
||||
<span>广州</span>
|
||||
<span class="num">62,256</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="echart" id="mychart2"></div>
|
||||
<div class="b">
|
||||
<span>香港</span>
|
||||
<span class="num">9,256</span>
|
||||
</div>
|
||||
<div class="c">
|
||||
<span>珠海</span>
|
||||
<span class="num">823</span>
|
||||
</div>
|
||||
<div class="d">
|
||||
<span>深圳</span>
|
||||
<span class="num">4,958</span>
|
||||
</div>
|
||||
<div class="e">
|
||||
<span>佛山</span>
|
||||
<span class="num">94</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { selectRecordGroupByCity } from '@/api/trace/dataStatistics';
|
||||
import { autoHover } from '../echartsOption';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
this.initEcharts();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async initEcharts() {
|
||||
let { rows } = await selectRecordGroupByCity(this.baseId);
|
||||
let list1 = [],
|
||||
list2 = [];
|
||||
rows.forEach((item) => {
|
||||
list1.push(item.value);
|
||||
list2.push(item.name);
|
||||
});
|
||||
let sum = rows.reduce((sum, item) => sum + item.value, 0);
|
||||
let option = {
|
||||
color: this.$colorList,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
radius: ['50%', '60%'],
|
||||
data: rows,
|
||||
startAngle: 180,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `{title|合计次数}\n{titleValue|${sum}}{titleUnit|次}`,
|
||||
rich: {
|
||||
name: {
|
||||
color: '#DEDEDE',
|
||||
fontSize: 16,
|
||||
align: 'left',
|
||||
padding: [0, 10, 20, 0],
|
||||
},
|
||||
name1: {
|
||||
color: '#DEDEDE',
|
||||
fontSize: 16,
|
||||
align: 'left',
|
||||
padding: [0, 0, 0, 10],
|
||||
},
|
||||
value: {
|
||||
color: '#ccc',
|
||||
fontSize: 14,
|
||||
align: 'left',
|
||||
},
|
||||
title: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
titleUnit: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
padding: [15, 0, 0, 0],
|
||||
},
|
||||
titleValue: {
|
||||
color: '#fff',
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
padding: [15, 5, 5, 5],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const myChart = this.$echarts.init(document.getElementById('mychart1'));
|
||||
myChart.setOption(option);
|
||||
autoHover(myChart, option, 1500);
|
||||
|
||||
let option2 = {
|
||||
grid: {
|
||||
top: '6%',
|
||||
left: '1%',
|
||||
right: '20%',
|
||||
bottom: '30%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: '{b0}: {c0}',
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
show: false, //是否显示x轴
|
||||
type: 'value',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
inverse: true, //让y轴数据逆向
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666', //y轴字体颜色
|
||||
},
|
||||
formatter: function (value, index) {
|
||||
return ['{title|' + value + '} '].join('\n');
|
||||
},
|
||||
//定义富文本标签
|
||||
rich: {
|
||||
lg: {
|
||||
fontWeight: 'bold',
|
||||
fontSize: 12, //字体默认12
|
||||
color: '#08C',
|
||||
padding: [0, 5, 0, 0],
|
||||
},
|
||||
title: {
|
||||
color: '#fff',
|
||||
fontWeight: 'lighter',
|
||||
},
|
||||
},
|
||||
},
|
||||
splitLine: { show: false }, //横向的线
|
||||
axisTick: { show: false }, //y轴的端点
|
||||
axisLine: { show: false }, //y轴的线
|
||||
data: list2,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数据内框',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right', // top, right, inside, insideTop,...
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 12,
|
||||
},
|
||||
formatter: '{c}' + '次',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: (params) => {
|
||||
return this.$colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
data: list1,
|
||||
},
|
||||
{
|
||||
name: '外框',
|
||||
type: 'bar',
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: '#285079',
|
||||
},
|
||||
},
|
||||
barGap: '-100%',
|
||||
z: 0,
|
||||
barWidth: 10,
|
||||
data: [50, 50, 50, 50, 50],
|
||||
},
|
||||
],
|
||||
};
|
||||
const myChart2 = this.$echarts.init(document.getElementById('mychart2'));
|
||||
myChart2.setOption(option2);
|
||||
autoHover(myChart2, option2, 1500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script></script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
#mychart1 {
|
||||
width: 300px;
|
||||
height: 296px;
|
||||
}
|
||||
#mychart2 {
|
||||
width: 360px;
|
||||
height: 380px;
|
||||
.bomRight {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
span {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 4px #fff;
|
||||
color: rgba($color: #fff, $alpha: 0.8);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.a {
|
||||
top: 5px;
|
||||
left: 175px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: url('../img/27.png') no-repeat center/cover;
|
||||
}
|
||||
.b {
|
||||
bottom: 18px;
|
||||
left: 50px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: url('../img/26.png') no-repeat center/cover;
|
||||
}
|
||||
.c {
|
||||
bottom: 0px;
|
||||
left: 300px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: url('../img/25.png') no-repeat center/cover;
|
||||
}
|
||||
.d {
|
||||
top: 32px;
|
||||
right: 110px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url('../img/26.png') no-repeat center/cover;
|
||||
}
|
||||
.e {
|
||||
bottom: 28px;
|
||||
right: 58px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: url('../img/25.png') no-repeat center/cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user