625 lines
15 KiB
Vue
625 lines
15 KiB
Vue
<template>
|
|
<div class="el-overlay">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<div class="box-title">{{ props.title }}</div>
|
|
<div class="box-btn" @click="close"></div>
|
|
</div>
|
|
<div class="box-content">
|
|
<div class="box-content-chart">
|
|
<div class="pre" @click="prvePage"></div>
|
|
<div class="swiper">
|
|
<transition
|
|
:name="btnName"
|
|
v-for="(item, index) in Math.ceil(chartList.length / 8)"
|
|
:key="item.id"
|
|
>
|
|
<div v-if="index == chartIndex" style="display: flex">
|
|
<div
|
|
class="box-content-chart-item"
|
|
v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
|
|
:key="item.id"
|
|
>
|
|
<div class="chart">
|
|
<pieChart :dataMap="item" />
|
|
</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<div class="next" @click="nextPage"></div>
|
|
</div>
|
|
<div class="box-content-inBound">
|
|
<div class="box-content-inBound-title">
|
|
<span> 入库信息统计 </span>
|
|
<div>
|
|
<ul v-if="storeList">
|
|
<li><span>单位：</span><span>kg</span></li>
|
|
<li>
|
|
<span>总量：</span><span>{{ storeList.totalWeight }}</span>
|
|
</li>
|
|
<li>
|
|
<span>品牌总量：</span><span>{{ storeList.brandNum }}</span>
|
|
</li>
|
|
<li>
|
|
<span>批次数量：</span><span>{{ storeList.batchNum }}</span>
|
|
</li>
|
|
</ul>
|
|
<section class="one">
|
|
<el-date-picker
|
|
class="picker"
|
|
v-model="params.year"
|
|
type="year"
|
|
placeholder="请选择年份"
|
|
@change="
|
|
getAllBrandName(true);
|
|
"
|
|
/>
|
|
</section>
|
|
<section>
|
|
<!-- <el-date-picker
|
|
v-model="params.month"
|
|
type="month"
|
|
placeholder="请选择月份"
|
|
@change="
|
|
getAllBrandName();
|
|
"
|
|
/> -->
|
|
<el-select
|
|
v-model="params.month"
|
|
class="m-2"
|
|
placeholder="请选择月份"
|
|
clearable
|
|
@change="getAllBrandName()"
|
|
>
|
|
<el-option
|
|
v-for="(item,index) in options"
|
|
:key="'key' + index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="box-content-inBound-data">
|
|
<div class="left-data">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item title="品牌" name="1">
|
|
<div class="brand">
|
|
<div
|
|
v-for="item in brandList"
|
|
:key="item"
|
|
class="brand-item"
|
|
>
|
|
<span>{{ item.slice(0, 2) }}</span>
|
|
<span>{{ item.slice(2) }}</span>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
<div class="right-data" id="barChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
getBrandPercent,
|
|
getRepoDetails,
|
|
getBrandNames,
|
|
getBrandTimeCount,
|
|
getOutBrandPercent,
|
|
getOutRepoDetails,
|
|
getOutBrandNames,
|
|
getOutBrandTimeCount,
|
|
} from "@/api/productionInformation/index";
|
|
import pieChart from "@/components/echarts/pie";
|
|
import { ref, defineProps, onMounted, reactive } from "vue";
|
|
import * as echarts from "echarts";
|
|
const props = defineProps({
|
|
title: String,
|
|
});
|
|
|
|
const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
|
|
const activeNames = ref(["1"]);
|
|
const emit = defineEmits(["closeBoundMsg"]);
|
|
const chartIndex = ref(0);
|
|
const btnName = ref("left");
|
|
const chartList = ref([
|
|
{
|
|
id: 11,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 12,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 13,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 14,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 16,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 17,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 18,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
|
|
{
|
|
id: 19,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
{
|
|
id: 20,
|
|
name: "利群",
|
|
type: "(硬珍品)烟丝",
|
|
value: 20,
|
|
},
|
|
]);
|
|
// 获取占比图列表
|
|
function getChartList() {
|
|
if (props.title === "入库信息") {
|
|
getBrandPercent().then((res) => {
|
|
chartList.value = res.result.columnDatas.map((ele) => {
|
|
return {
|
|
type: ele.name,
|
|
value: ele.percentage * 100,
|
|
};
|
|
});
|
|
});
|
|
} else {
|
|
getOutBrandPercent().then((res) => {
|
|
chartList.value = res.result.columnDatas.map((ele) => {
|
|
return {
|
|
type: ele.name,
|
|
value: ele.percentage * 100,
|
|
};
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
const storeList = ref(null);
|
|
// 获取仓库细节
|
|
function getStoreDetail() {
|
|
if (props.title === "入库信息") {
|
|
getRepoDetails().then((res) => {
|
|
storeList.value = res.result;
|
|
});
|
|
} else {
|
|
getOutRepoDetails().then((res) => {
|
|
storeList.value = res.result;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 参数
|
|
const params = reactive({
|
|
year: new Date(),
|
|
month: "",
|
|
brandName: "",
|
|
});
|
|
// 获取所有的品牌名称
|
|
function getAllBrandName(boolean) {
|
|
if (boolean) {
|
|
params.year = params.year.getFullYear().toString();
|
|
} else{
|
|
console.log(params.month.slice(0,-2));
|
|
// params.month = params.month.slice(-2)
|
|
}
|
|
if (props.title === "入库信息") {
|
|
getBrandNames(params).then((res) => {
|
|
brandList.value = res.result;
|
|
params.brandName = brandList.value[0];
|
|
getBrandChart();
|
|
});
|
|
} else {
|
|
getOutBrandNames(params).then((res) => {
|
|
brandList.value = res.result;
|
|
params.brandName = brandList.value[0];
|
|
getBrandChart();
|
|
});
|
|
}
|
|
}
|
|
// 根据品牌名称获取chart图
|
|
function getBrandChart() {
|
|
if (props.title === "入库信息") {
|
|
getBrandTimeCount(params).then((res) => {
|
|
drawBarChart(res.result);
|
|
});
|
|
} else {
|
|
getOutBrandTimeCount(params).then((res) => {
|
|
drawBarChart(res.result);
|
|
});
|
|
}
|
|
}
|
|
// 下一页
|
|
function nextPage() {
|
|
btnName.value = "right";
|
|
if (chartIndex.value == Math.ceil(chartList.value.length / 8) - 1) {
|
|
chartIndex.value = 0;
|
|
} else {
|
|
chartIndex.value++;
|
|
}
|
|
}
|
|
// 上一页
|
|
function prvePage() {
|
|
btnName.value = "left";
|
|
if (chartIndex.value == 0) {
|
|
chartIndex.value = Math.ceil(chartList.value.length / 8) - 1;
|
|
} else {
|
|
chartIndex.value--;
|
|
}
|
|
}
|
|
|
|
function close() {
|
|
emit("closeBoundMsg", -1);
|
|
}
|
|
const value2 = ref("");
|
|
const brandList = ref([
|
|
"兰州(硬珍品)烟丝",
|
|
"利群(长嘴)烟丝",
|
|
"兰州(硬吉祥)烟丝",
|
|
"兰州(硬珍品)烟丝",
|
|
"利群(长嘴)烟丝",
|
|
"兰州(硬吉祥)烟丝",
|
|
"兰州(硬珍品)烟丝",
|
|
"利群(长嘴)烟丝",
|
|
"兰州(硬吉祥)烟丝",
|
|
]);
|
|
function drawBarChart(res) {
|
|
let dom = document.querySelector("#barChart");
|
|
dom.removeAttribute("_echarts_instance_");
|
|
let myChart;
|
|
myChart = echarts.init(dom);
|
|
let option = {
|
|
grid: {
|
|
left: "5%",
|
|
bottom: "8%",
|
|
right: "2%",
|
|
top: "15%",
|
|
},
|
|
xAxis: {
|
|
data: res.map((ele, index) => {
|
|
return index + 1;
|
|
}),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(56, 72, 89, 1)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "单位:kg",
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: "1rem",
|
|
padding: [0, 35, 10, 0],
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: "0.875rem",
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(255, 255, 255, 0.20)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 16,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: "rgba(28, 238, 251, 1)",
|
|
borderWidth: 1,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(28, 238, 251, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(28, 238, 251, 0)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: res.map((ele, index) => {
|
|
return ele;
|
|
}),
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
getChartList();
|
|
getStoreDetail();
|
|
// 获取所有品牌的种类
|
|
getAllBrandName(true);
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.swiper {
|
|
display: flex;
|
|
overflow: hidden;
|
|
transition: all linear 0.2s;
|
|
&-box {
|
|
display: flex;
|
|
|
|
// transform: translateX(-100%);
|
|
}
|
|
}
|
|
.pre,
|
|
.next {
|
|
width: vw(36);
|
|
height: vh(36);
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 40%;
|
|
background-size: 100% 100%;
|
|
}
|
|
.pre {
|
|
left: vw(20);
|
|
background-image: url("@/assets/images/dialog/pre.png");
|
|
}
|
|
.next {
|
|
right: vw(20);
|
|
background-image: url("@/assets/images/dialog/next.png");
|
|
}
|
|
.box {
|
|
width: vw(1380);
|
|
height: vh(818);
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: auto;
|
|
background-image: url("@/assets/images/dialog/device-dialog2.png");
|
|
background-size: 100% 100%;
|
|
&-header {
|
|
width: 100%;
|
|
height: vh(60);
|
|
font-family: "pangmen";
|
|
display: flex;
|
|
font-size: 1.875rem;
|
|
justify-content: center;
|
|
}
|
|
&-title {
|
|
line-height: vh(60);
|
|
}
|
|
&-btn {
|
|
background-image: url("@/assets/images/dialog/close.png");
|
|
width: vw(34);
|
|
height: vh(34);
|
|
position: absolute;
|
|
right: vw(20);
|
|
top: vh(12);
|
|
cursor: pointer;
|
|
}
|
|
&-content {
|
|
padding: vh(20) vw(20);
|
|
height: vh(818 - 60);
|
|
box-sizing: border-box;
|
|
&-chart {
|
|
padding: vh(55) vw(88) 0 vw(88);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
height: vh(238);
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
|
|
rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
|
|
)
|
|
1 1;
|
|
.swiper-box {
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
&-item {
|
|
margin-right: vw(52);
|
|
// width: vw(100);
|
|
// height: vh(170);
|
|
.chart {
|
|
width: vw(110);
|
|
height: vh(170);
|
|
}
|
|
}
|
|
&-item:nth-of-type(8n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&-inBound {
|
|
padding: vh(20) vw(20);
|
|
box-sizing: border-box;
|
|
margin-top: vh(20);
|
|
height: vh(460);
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
|
|
rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
|
|
)
|
|
1 1;
|
|
&-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: vh(36);
|
|
line-height: vh(36);
|
|
background-image: url("@/assets/images/dialog/brand-title.png");
|
|
background-size: 100% 100%;
|
|
font-family: "pangmen";
|
|
font-size: 1.375rem;
|
|
padding-left: vw(32);
|
|
box-sizing: border-box;
|
|
margin-bottom: vh(20);
|
|
div {
|
|
align-items: center;
|
|
font-family: normal;
|
|
display: flex;
|
|
ul {
|
|
display: flex;
|
|
li {
|
|
font-size: 1rem;
|
|
margin-right: vw(30);
|
|
span:nth-child(2) {
|
|
color: rgba(28, 238, 251, 1);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
.one {
|
|
margin-right: vw(12);
|
|
}
|
|
:deep(.el-input) {
|
|
width: vw(160);
|
|
height: vh(28);
|
|
}
|
|
section {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
// 数据板块内容
|
|
&-data {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left-data {
|
|
width: vw(200);
|
|
margin-right: vw(20);
|
|
.brand::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.brand {
|
|
height: vh(320);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
.brand-item {
|
|
width: vw(200);
|
|
height: vh(36);
|
|
line-height: vh(36);
|
|
margin: vh(2) 0;
|
|
padding-left: vw(14);
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
background-image: url("@/assets/images/dialog/down-default.png");
|
|
}
|
|
}
|
|
}
|
|
.right-data {
|
|
width: vw(1100);
|
|
height: vh(370);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-collapse-item__header) {
|
|
width: vw(200);
|
|
height: vh(36);
|
|
background-image: url("@/assets/images/dialog/down.png");
|
|
background-size: 100% 100%;
|
|
background-color: transparent;
|
|
color: #fff;
|
|
padding: 0 0 0 0.875rem;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
}
|
|
:deep(.el-collapse-item__content) {
|
|
background-color: transparent;
|
|
}
|
|
// :deep(.el-collapse-item__header){
|
|
// height: 1.75rem;
|
|
// padding-left: 0.625rem;
|
|
// font-size: 1rem;
|
|
// box-sizing: border-box;
|
|
// border: none;
|
|
// background-color: transparent;
|
|
// color: rgba(233, 244, 255, 1);
|
|
// background-image: url('@/assets/images/door-device.png');
|
|
// }
|
|
:deep(.el-collapse-item__content) {
|
|
background-color: transparent;
|
|
border: none !important;
|
|
// font-size: 1rem;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
:deep(.el-collapse-item__wrap) {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
:deep(.el-collapse) {
|
|
border: none;
|
|
//border-color: unset;
|
|
}
|
|
</style> |