twin2025-ui/src/views/house/pantou/index.vue

<template>
  <div style="padding:10px" @click.stop="void(0)">
      <div class="" style="text-align: center;top:2%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
          <span style="position: relative;">
              <el-button style="margin-left:10px" @click="impquery">刷新</el-button>
          </span>                
      </div>
      <div style="height: 790px;width: 100%;background-color: rgb(237 237 237 / 23%);margin-top: 10px;display: flex;">          
          <div style="height: 790px;width: 28%;margin-right: 1%;">
            <div class="table_caption" style="height: 30px;line-height: 30px;">存放时间统计(Top10)</div>
            <div style="height: 760px;width: 99%;border: 1px solid #ededed;background: #fff;padding-left: 10px;" ref="top10"></div>
          </div>
          <div style="height: 790px;width: 70%;margin-left: 1%;">
            <div class="table_caption" style="height: 30px;line-height: 30px;">库存分析（近30日）</div>
            <div style="height: 400px;width: 100%;" ref="echarts1"></div>
            <div class="table_caption" style="height: 30px;line-height: 30px;">库存统计（今日）</div>
            <el-table class="titletable" cellspacing="0" cellpadding="0" height="330px" width="800px" :data="datalist">
                <el-table-column label="种类" align="center" prop="name" fixed></el-table-column>
                <el-table-column label="当前库存" align="center" prop="curr">
                    <template  #default="scope">
                        <a v-if="scope.row.name.indexOf('空盘头')==-1&&scope.row.curr>0" javascript="void(0)" @click="currDetail(scope.row)" style="color: cornflowerblue;text-decoration: underline;">{{ scope.row.curr }}</a>
                    </template>
                </el-table-column>
                <el-table-column label="入库数量" align="center" prop="in"></el-table-column>
                <el-table-column label="出库数量" align="center" prop="out"></el-table-column>
                <el-table-column label="最大库存量" align="center" prop="max"></el-table-column>
                <el-table-column label="最小库存量" align="center" prop="min"></el-table-column>
                <el-table-column label="平均库存" align="center" prop="avg"></el-table-column>
            </el-table>
          </div>
      </div>
  </div>
  <el-dialog title="占比详情" v-model="openDetail" width="500px" append-to-body>
      <el-form style="height:450px;width:100%;">
        <el-table row-key="id" :data="detaildata" style="height:430px;width:100%;">
          <el-table-column label="名称" align="left" prop="name" ></el-table-column>
          <el-table-column label="数量" align="left" prop="num" ></el-table-column>
          <el-table-column label="占比(%)" align="left" prop="ratio">
            <template #default="scope">
              {{(scope.row.ratio*100).toFixed(2)+'%'}}
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openDetail=false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :title="currDlgTitle" v-model="currOpenDetail" width="900px" append-to-body>
        <el-form style="height:550px;width:100%;display: flex;">
            <el-table ref="currtable" row-key="id" :data="currdata" style="height:530px;width:50%;" highlight-current-row>
              <el-table-column label="长丝旦数(D)" align="left" prop="lot13" ></el-table-column>
              <el-table-column label="整经根数/验布幅宽(cm)" align="left" prop="lot15" width="200"></el-table-column>
              <el-table-column label="盘头数量" align="left" prop="num">
                <template  #default="scope">
                    <a javascript="void(0)" @click="currNumDetail(scope.row,1)" style="color: cornflowerblue;text-decoration: underline;">{{ scope.row.num }}</a>
                </template>
              </el-table-column>
            </el-table>
            <el-table row-key="id" :data="currdetaildata" style="height:530px;width:48%;margin-left: 2%;">
              <el-table-column label="时间" align="left" prop="date" ></el-table-column>
              <el-table-column label="生产人员" align="left" prop="lot12" ></el-table-column>
              <el-table-column label="生产机台" align="left" prop="lot17"></el-table-column>
            </el-table>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
          <el-button @click="currOpenDetail=false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script>
  import { ref,onMounted,watch } from 'vue';
  import {pantou,baiPi} from "@/api/house/api";
  import { ElDatePicker,ElMessage } from 'element-plus';
  import 'element-plus/dist/index.css'; // 确保导入样式文件
  import * as echarts from 'echarts';
  export default {
      props:{
      },
      components:{
          
      },
      setup(props,{emit}){
          const { proxy } = getCurrentInstance();
          let datalist=ref([]);
          let detailDataList=ref([]);
          const echarts1=ref(null);
          const top10 = ref(null);
          const detaildata=ref([]);
          const openDetail=ref(false);
          const currOpenDetail=ref(false);
          const currDlgTitle=ref('');
          const currdata=ref([]);
          const currdetaildata=ref([]);
          const loading=ref(true);
          const cacheData=ref({});
          const currtable=ref(null);
          function impquery(){
              detailDataList.value=[];
              datalist.value=[];
              const msg = ElMessage({
                      message:"正在加载数据",
                      type:"info",
                      duration:0, //一直显示
              });
              loading.value = true;
              pantou().then((res)=>{
                  loading.value = false;
                  msg.close();
                  if(res.code!=200){
                      return;
                  }
                  cacheData.value = res.data;
                  datalist.value = res.data.stocks;
                  showTop(res.data.tops);
                  showLine(res.data.usages);
              }).catch(res=>{
                  ElMessage({
                      message:"数据获取失败！",
                      type:"error",
                  });
              });
          }
          function currDetail(data){
            if(data.curr!=null && data.curr>0){
                currOpenDetail.value=true;
                currDlgTitle.value=data.name + "—当前库存详情";
                currdata.value = data.calc;                              
                currNumDetail(data.calc[0],null);
            }
          }
          function currNumDetail(data,flag){
            if(data.details!=null && data.details.length>0){
                currdetaildata.value = data.details;
                if(flag==null){
                    setTimeout(() => {
                        currtable.value.$el.querySelector('tbody tr').classList.add('current-row');
                    }, 50);  
                }else{
                    currtable.value.$el.querySelector('tbody tr').classList.remove('current-row');
                }
            }
          }
          function showLine(data){
            var myChart = echarts.init(echarts1.value);
            const dataColor = ['#4EB2FE', '#f19051', '#F47505', '#20d450'];
            const data1 = [];
            const data3 = [];
            const nameArr = [];
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              data1.push(element.max);
              data3.push(element.rate*100);
              nameArr.push(element.date.substring(5));
            }
            const axiscolor = ['#dde1e8', '#222222'];
            const colorArr1 = ['#f66c6b', '#fb8484', '#ff9d9d'];
            const colorArr2 = ['#1aa4f2', '#4eb6f9', '#88cbfe'];
            const color1 = {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: colorArr1[0]
                    },
                    {
                        offset: 0.5,
                        color: colorArr1[1]
                    },
                    {
                        offset: 1,
                        color: colorArr1[1]
                    }
                ]
            };
            const color2 = {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: colorArr2[0]
                    },
                    {
                        offset: 0.5,
                        color: colorArr2[1]
                    },
                    {
                        offset: 1,
                        color: colorArr2[1]
                    }
                ]
            };
            const barWidth = 12;
            var option = {
            // backgroundColor: 'pink',
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '100%'
                    }
                },
                legend: [
                    {
                        data: ['最大使用量'],
                        // textStyle: {
                        //   color: '#9FC6F6'
                        // },
                        top: '2%',
                        left: '40%',
                        icon: 'rect', // 形状
                        itemWidth: 10, // 宽
                        itemHeight: 10 // 高
                    },
                    {
                        data: ['使用率'],
                        // textStyle: {
                        //   color: '#9FC6F6'
                        // },
                        top: '2%',
                        left: '54%',
                        icon: 'rect',
                        itemWidth: 10,
                        itemHeight: 3
                    }
                ],
                xAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: axiscolor[1],
                            width: 2
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        fontSize: 12,
                        rotate: -45,
                        color: axiscolor[1]
                    },
                    data: nameArr
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '单位：个',
                         nameTextStyle: {
                        //    fontFamily: 'ShiShangZhongHeiJianTi',
                        //    fontSize: 20,
                            color: '#999999',
                        //    align: 'center',
                        //    padding: [0, 0, 10, 0]
                         },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: axiscolor[0],
                                width: 2
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#dde1e8',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            fontFamily: 'Dinpro',
                            fontSize: 14,
                            color: axiscolor[1]
                        }
                    },
                    {
                        name: '单位：%',
                        nameTextStyle: {
                        //    // fontFamily: 'ShiShangZhongHeiJianTi',
                        //    // fontSize: 20,
                            color: '#999999',
                        //    align: 'center',
                        //    // padding: [0, 50, 10, 0]
                        },
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: axiscolor[0],
                                width: 2
                            }
                        },
                        axisLabel: {
                            color: axiscolor[1],
                            fontFamily: 'Dinpro',
                            fontSize: 10
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#dde1e8',
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        z: 1,
                        name: '最大使用量',
                        type: 'bar',
                        barWidth: barWidth,
                        barGap: '20%',
                        data: data1,
                        itemStyle: {
                            color: color2
                        }
                    },
                    {
                        name: '使用率',
                        type: 'line',
                        smooth: true,
                        symbolSize: 1,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: dataColor[3]
                        },
                        lineStyle: {
                            width: 2,
                            color: dataColor[3]
                        },
                        // animationDuration: 5800,
                        // animationEasing: 'quadraticOut',
                        showSymbol: true,
                        data: data3
                    }
                ],
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '3%',
                    bottom: '10%'
                }
            };

            myChart.setOption(option);
              // 添加点击事件监听器
              myChart.on('click', function (params) {
              if (params.componentType === 'series') {
                console.log('点击了系列', params.seriesName, '的', params.dataIndex, '项');
                // 在这里处理你的逻辑，例如更新数据等
                openDetail.value=true;
                detaildata.value = cacheData.value['usages'][params.dataIndex].details;
              }
            });
          }
          function showTop(data){
            var myChart = echarts.init(top10.value);

            let data1 = [];
            let data2 = [];
            let data3 = [];
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              data3.push(element.day);
              data2.push(index+1);
              data1.push({
                name:element.name,
                date:element.date,
                value:element.day,
              })
            }
            let data4 = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
            let style = {
                width: 24,
                height: 18,
                padding: [2, 2, 0, 0],
                fontSize: 12,
                align: "center",
                color: "#ffffff"
            };
            var option = {
                tooltip: {
                    show: true,
                    trigger: "item",
                    padding: [8, 15],
                    backgroundColor: "rgba(12, 51, 115,0.8)",
                    borderColor: "rgba(3, 11, 44, 0.5)",
                    textStyle: {
                        color: "rgba(255, 255, 255, 1)",
                        fontFamily: "SourceHanSansCN-Normal",
                        fontSize: 14
                    },
                    formatter: function (params) {
                      if(params.seriesIndex==0) return "";
                        const name = params.name;
                        const date = params.data.date; // 假设数据中包含 date 字段
                        const value = params.value;
                        // if (params.componentType === 'yAxis' && params.componentIndex === 0) {
                        //     return null;  // 屏蔽第一个 yAxis 的提示
                        // }
                        return `${name}<br/>日期：${date}<br/>距当前天数：${value}`;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: "10%",
                    right: "8%",
                    top: "1%",
                    bottom: "2%"
                },
                xAxis: [
                    {
                        splitLine: {
                            show: false
                        },
                        type: "value",
                        show: false,
                        axisLine: {
                            //x轴坐标轴，false为隐藏，true为显示
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        type: "category",
                        axisTick: {
                            show: false
                        },
                        axisPointer: { show: false },
                        triggerEvent: false,  // 关键解决方案
                        inverse: true,
                        data: data2,
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: "rgba(255, 255, 255, 1)",
                                fontFamily: "SourceHanSansCN-Normal",
                                fontSize: 14
                            },
                            formatter: function (params, index) {
                                // var index = params;
                                const id = index + 1;
                                //console.log("111111", params);
                                if (id < 4) {
                                    return [`{rank${id}|${id}}`].join("\n");
                                } else {
                                    return [`{rank|${id}}`].join("\n");
                                }
                                // if (index - 1 < 3) {
                                // return ;
                                // } else {
                                //    return ['{b|' + index + '}'].join('\n');
                                // }
                            },
                            rich: {
                                rank1: {
                                    ...style,
                                    backgroundColor: {
                                        image:
                                            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAARZJREFUOE/tlb1KA0EUhc+5u41F1lbB1tY0Gt8iPoD2eQFtLXwAU/sMIoKQQd0tUghiqW1awZQWQiSGTLzjzrKbymKmCRkYhjt/3zDnzhza/VYXIlegbIEJQEGzTf9i0TGtZVz1+VjGsGmP9/kdaoW2k324zcGljT3o3wBdP6YptpcB1p06DAA0BdeAUisvfCWy17CPweMpgblelYocVIMyC2+x8XnM6+dJLAAAecH0pxsP4DJTBjEBT5jOjmIBbvA1OeFw+B0egOQS5uEsWhat4ks+yOYQ0a80xG9qaQrNz6rQdjZfQe4FArzRFO0m4DDb/XWZC0B2nKFASnOp+YEzG41TQFIA3nh0bmVA75gl58zzUR2wADMYXqBI8VUUAAAAAElFTkSuQmCC"
                                    }
                                },
                                rank2: {
                                    ...style,
                                    backgroundColor: {
                                        image:
                                            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAPFJREFUOE/tlTFKA0EUhr9/UuUGK9imTW4SD6CNlc2GgJgubBYPoLWHEEHwBjaWprUVIsQ+m2YnZHYdZtdydxrxwcDMMLwP5r33/7I5U9ADKEHQXLY6m9Z9eHZ79+4LuNKMZ4KQXWmDlLi7bgAHUcpJC2CsS9wPAKU+W5XSrv4Bvsg/Nbxny41yyihfVFfgiT3numbXew18J8IbYhoPULX8SzwAvFJwFgvwyJALXVL0D4A7vllE66K/OMmZKTH1eHRXU6vUibuPo1y/I417UtO1UiZNwJIRA3OL7Kk3l1C6f5lL7RsNE3KG80lJpjkfIeAAkjJvqT1lfksAAAAASUVORK5CYII="
                                    }
                                },
                                rank3: {
                                    ...style,
                                    backgroundColor: {
                                        image:
                                            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAPBJREFUOE/tlT9OwzAUh7+fYWfpAFIZOrBSpblHegC69wLtihAHoDOHQAgabsDSsV1ZKzUnaDvFla00JFG31AviWZZly3rfs98/2ZQE8Yq4xokBVJnHfXU9dSYyDGMN+PR6CpFN2XjlTmk7gDMsU8xNE2BLi9sDUFya6jnuBf+AemAYZnww0RN5kC8q/PlOhwfdsju7DzzAhTEsEElIgAN9hQR8s2UYCvDGFSP12IcAvBAxlQJF0d/M5Bz50b6aGqwGRRaU5XrOEsP9WQBipZh+vVzPuUM8Y+iWZfvYUNzNi0bzaTab38xdc8mjIn6qgAME+UlV+Na7MwAAAABJRU5ErkJggg=="
                                    }
                                },
                                rank: {
                                    ...style,
                                    backgroundColor: {
                                        image:
                                            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAQdJREFUOE/tlb9KxEAQh7/fWvkGCra2+hK59ixWbLSx8gW0FfEBFHOVna0JhyD4BjaWprUVvM5SDzQjm0tCTsQmt424zbDsn29mmPmNBiMbCi4RKxIgCFbuF/vz2QTHQe51S2cpSe1F9ec9AcGpSea1OgcYpGat1/0iqKLOfOVmu/QP+F4QiPOs4JATlSFPC09RABrc2Ae7+Y7eogDqonmYlgxjAkI/3cUDOO4/p2zFATjGy6/sXe3rPQbg7LrgKFoV/cFOTlIrJVR1ZE+xw2G5D5LXEbsktUeJjQUBitxrc15NL2wdxylizTUR1AMldKRrhsvSLML2TrMP/s7ePZs4Hm/rqQv4AucUYfTiSAZXAAAAAElFTkSuQmCC"
                                    }
                                },
                                a: {
                                    padding: [0, 0, 35, 10]
                                },

                                b: {
                                    backgroundColor: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#29DFF6"
                                            },
                                            {
                                                offset: 1,
                                                color: "#00A8FF"
                                            }
                                        ],
                                        global: false // 缺省为 false
                                    },
                                    color: "#D1E7FF",
                                    width: 60,
                                    height: 60,
                                    padding: [5, 0, 0, 0],
                                    borderRadius: 30,
                                    fontSize: 14,
                                    align: "center",
                                    fontWeight: 500
                                }
                            }
                        }
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        position: "right",
                        axisLabel: {
                            inside: true,

                            // verticalAlign: "bottom",
                            // lineHeight: 30,
                            padding: [-24, 0, 0, 0], // 上、右、下、左（负值可上移文字）
                            // verticalAlign: "top", // 设置垂直对齐方式
                            margin: 0, //刻度标签与轴线之间的距离
                            show: true,
                            textStyle: {
                                verticalAlign: "top", // 设置垂直对齐方式
                                color: "#445482",
                                fontFamily: "SourceHanSansCN-Normal",
                                fontSize: 14
                            },
                            formatter: function (value) {
                                return value + "";
                            }
                        },
                        data: data3
                    }
                ],
                series: [
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 12,
                        barGap: "-100%",
                        data: data4,
                        itemStyle: {
                            normal: {
                                color: "#D1E7FF",
                                barBorderRadius: 10
                            }
                        }
                    },
                    {
                        show: true,
                        name: "",
                        type: "bar",
                        data: data1,
                        barWidth: 12, // 柱子宽度
                        showBackground: false,
                        backgroundStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#D1E7FF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#D1E7FF"
                                    }
                                ]
                            }
                        },
                        label: {
                            show: true,
                            offset: [5, -17],
                            color: "#132852",
                            fontFamily: "SourceHanSansCN-Normal",
                            fontSize: 14,
                            fontWeight: 500,
                            position: "left",
                            align: "left",
                            formatter: function (params) {
                                return params.data.name;
                            }
                        },
                        itemStyle: {
                            barBorderRadius: [5, 5, 5, 5],
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#29DFF6"
                                    },
                                    {
                                        offset: 1,
                                        color: "#00A8FF"
                                    }
                                ]
                            }
                        }
                    }
                ],
                dataZoom: [
                    {
                        width: 15,
                        yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
                        show: false, // 是否显示滑动条，不影响使用
                        type: "slider" // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        // startValue: 1, // 从头开始。
                        // endValue: 4 // 展示到第几个。
                    }
                ]
            };

            myChart.setOption(option);
          }
          onMounted(()=>{
              impquery();
          })

          return{
              datalist,
              impquery,
              loading,
              echarts1,
              top10,
              openDetail,
              detaildata,
              currDetail,
              currOpenDetail,
              currDlgTitle,
              currdata,
              currNumDetail,
              currdetaildata,
              currtable,
          }
      }
  }
</script>
<style>
.el-table__body tr.current-row>td.el-table__cell
{
    background-color: #aacbec;
}
</style>