src/api/house/api.js

@@ -31,4 +31,12 @@ export function d_global_sales(query){
         method: 'get',
         params: query
     })
+}
+
+export function d_global_cogs(query){
+    return request({
+        url: '/api/driver/cogs',
+        method: 'get',
+        params: query
+    })
 }

src/views/dashboard/global/index3.vue

@@ -0,0 +1,660 @@
+<template>
+  <div style="padding:10px" @click.stop="void(0)">
+      <div class="" v-if="false" style="text-align: left;top:2%;width: 100%;letter-spacing: 5px;font-size: 18px;">
+          <span style="position: relative;">日期</span>
+          <el-date-picker
+            style="width: 180px;"
+            v-model="daterangeTime"
+            value-format="YYYY-MM-DD"
+            date-format="YYYY-MM-DD" 
+            format="YYYY-MM-DD" 
+            :value-format="'YYYY-MM-DD'"
+            type="date"
+            placeholder="请选择日期"
+          ></el-date-picker>
+      </div>
+      <div style="display: flex; height:820px;width:100%;background-color:#fff;margin-top:10px;box-shadow: 2px 5px 8px 2px rgb(160 129 129 / 32%);border-radius: 5px;padding: 25px;">          
+        <div class="left" style="height: 100%;width: 45%;"> 
+            <div style="height: 60%;width: 100%;position: relative;padding: 20px;">   
+              <div class="table_caption" style="position: absolute;left:0px;top:0px;font-size: 20px;">成本控制</div>
+              <div class="masterimg">
+                <img src="@/assets/images/a_001.png">
+                <span><b>{{datalist.curr.total||'-'}}</b> 元/公斤</span>
+              </div>
+              <div :class="'masterblock block'+ind" v-for="(item,ind) in cogslist">
+                <div style="height: 36px;"><span style="font-size: 20px;"><b>{{ item['keyp'] }}</b> %</span><span style="color:#e16762;font-size: 12px;float: right;">约为 {{ item['keyv'] }}元</span></div>
+                <div style="font-size: 12px;color:#2b2b2b">{{ item['keyn'] }}</div>
+              </div>
+              <div class="block_line" style="width: 2px;height: 59%;left: 50%;margin-left: -1px;top: 105px;">
+                <div class="cirle" style="margin-left: -4px;top: 0px;left: 50%;"></div><div class="cirle" style="margin-left: -4px;bottom: 0px;left: 50%;"></div>
+              </div>
+              <div class="block_line" style="width: 53%;height: 2px;top:38%;left:173px;">
+                <div class="cirle" style="left: 0;top: 50%;margin-top: -4px;"></div><div class="cirle" style="right: 0;top: 50%;margin-top: -4px;"></div>
+              </div>
+              <div class="block_line" style="width: 53%;height: 2px;top:62%;left:173px;">
+                <div class="cirle" style="left: 0;top: 50%;margin-top: -4px;"></div><div class="cirle" style="right: 0;top: 50%;margin-top: -4px;"></div>
+              </div>
+            </div>
+            <div style="height: 33%;width: 100%;margin-top: 2%;">
+              <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>成本曲线</div>
+              <div style="height: 100%;width: 100%;" ref="leftbottom_echarts"></div>              
+            </div>
+        </div>
+        <div class="right" style="height: 100%;width: 53%;margin-left: 2%;">
+          <div class="righttop" style="display: flex;height: 60%;">
+            <div style="height: 100%;width: 50%;margin-bottom: 2%;">
+              <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>单位成本</div>
+              <div style="height: 50%;width: 100%;" ref="righttop_echarts1"></div>
+              <div style="padding-left: 10px;font-size: 14px;font-weight: bold;text-align: center;">{{ cogsName }}</div>
+              <div style="height: 30%;width: 100%;" ref="righttop_echarts11"></div>
+            </div>
+            <div style="height: 100%;width: 50%;margin-bottom: 2%;">
+              <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>人均单位产出</div>
+              <div style="height: 90%;width: 100%;" ref="righttop_echarts2"></div>
+            </div>
+          </div>
+          <div class="rightbouttom" style="height: 40%;width: 100%;">
+            <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>成本明细</div>
+            <div style="height: 90%;width: 100%;">
+              <el-table :data="cogsdetaillist" style="height: 100%;width: 100%;">
+                <el-table-column label="" prop="item"></el-table-column>
+                <el-table-column label="加弹" prop="value0"></el-table-column>
+                <el-table-column label="经编" prop="value1"></el-table-column>
+                <el-table-column label="前整" prop="value2"></el-table-column>
+                <el-table-column label="印染" prop="value3"></el-table-column>
+                <el-table-column label="后整" prop="value4"></el-table-column>
+                <el-table-column label="成品" prop="value5"></el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </div>
+      </div> 
+  </div>
+</template>
+<script>
+  import { ref,onMounted,watch } from 'vue';
+  import {d_global_cogs} 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({curr:{}});
+          const daterangeTime=ref("");
+          const cogslist=ref([]);
+          daterangeTime.value = new Date().Format('yyyy-MM-dd')
+          const leftbottom_echarts=ref(null);
+          const righttop_echarts1 = ref(null);
+          const righttop_echarts11 = ref(null);
+          const righttop_echarts2 = ref(null);
+          const loading=ref(true);
+          const cogsName=ref('');
+          const cogsdetaillist = ref([]);
+          function impquery(){
+              const msg = ElMessage({
+                      message:"正在加载数据",
+                      type:"info",
+                      duration:0, //一直显示
+              });
+              loading.value = true;
+              d_global_cogs({"date":daterangeTime.value}).then((res)=>{
+                  loading.value = false;
+                  msg.close();
+                  if(res.code!=200){
+                      return;
+                  }
+                  datalist.value = res.data; 
+                  showLeftTop(res.data);            
+                  showLeftBottom(res.data.trend);
+                  showRightTop(res.data);
+                  showRightTop2(res.data.prod);
+                  showRightBottom(res.data.detail);
+              }).catch(res=>{
+                console.log(res)
+                  ElMessage({
+                      message:"数据获取失败！",
+                      type:"error",
+                  });
+              });
+          }
+          function showLeftTop(data){
+            var tmp = [];
+            for (let index = 1; index <= 6; index++) {
+              const keyp = 'p'+index,keyv='v'+index,keyn='n'+index;
+              tmp.push({keyp:data.curr[keyp],keyv:data.curr[keyv],keyn:data.curr[keyn]})
+            }
+            cogslist.value = tmp;
+          }
+          function showLeftBottom(trenddata){
+            let months = [];
+            let values = [];
+            trenddata.forEach(element => {
+              months.push(element.month);
+              values.push(element.value);
+            });
+            let option = {
+                backgroundColor: '#fff',
+                    tooltip: {
+                      trigger: 'axis'
+                    },
+                    grid: {
+                      left: '3%',
+                      right: '3%',
+                      bottom: "5%",
+                      top: "5%",
+                      containLabel: true
+                    },
+                    legend: {
+                      show:false,
+                      bottom: 0,
+                      itemWidth: 20,
+                      itemHeight: 10,                      
+                      textStyle: {
+                        color: '#242424',
+                        fontSize: 12
+                      }
+                    },
+                    xAxis: {
+                      type: 'category',
+                      data: months,
+                      axisLabel: {
+                        rotate: 320,//坐标轴字体颜色
+                        textStyle: {
+                          color: '#242424',
+                          fontSize: 12
+                        }
+                      },
+                      axisLine: {
+                        show: false,
+                        lineStyle: {
+                          color: '#242424'
+                        }
+                      },
+                      axisTick: {       //y轴刻度线
+                        show: false
+                      },
+                      splitLine: {    //网格
+                        show: false
+                      },
+                      boundaryGap: false
+                    },
+                    yAxis: {
+                      type: 'value',
+                      axisLabel: {        //坐标轴字体颜色
+                        textStyle: {
+                          color: '#3E3E3E',
+                          fontSize: 12
+                        }
+                      },
+                      axisLine: {
+                        show: false,
+                        lineStyle: {
+                          color: '#242424'
+                        }
+                      },
+                      axisTick: {       //y轴刻度线
+                        show: false
+                      },
+                      splitLine: {    //网格
+                        show: true,
+                        lineStyle:{
+                          color:'#dadde4',
+                          type:"dashed"
+                        }
+                      }
+                    },
+
+                    series: [{
+                      name: '成本',
+                      type: 'line',
+                      smooth: true,
+                      symbol: 'none',
+                      symbolSize: 8,
+                      itemStyle: {
+                        color: '#2F5FFE',
+                        borderColor: '#fff',
+                        borderWidth: 2
+                      },
+                      lineStyle: {
+                        normal: {
+                          color: '#2F5FFE52'
+
+                        }
+                      },
+                      areaStyle: {
+                        normal: {
+                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: 'rgba(52,99,254,0.52)'
+                          }, {
+                            offset: 1,
+                            color: 'rgba(255,255,255,0.3)'
+                          }])
+                        }
+                      },
+                      data: values
+                    }]                    
+            };
+            var mychat = echarts.init(leftbottom_echarts.value);
+            mychat.setOption(option)
+          }
+          function showRightTop2(proddata){
+            const data = {
+                 total: {
+                    title: '总计',
+                    figure: '0'
+                 },
+                 data: []
+            }
+            data.data = proddata;
+            let  option = {
+                 //你的代码
+                 color: ['#53bee7', '#ee6666', '#fc8452', '#9a60b4', '#ea7ccc',"#5470c6",'#3ba272'],
+                 grid:{
+                  top:'15%'
+                 },
+                 tooltip: {
+                    trigger: 'item',
+                    padding: 0,
+                    borderWidth: 0,
+                    formatter: (params) => {
+                       return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
+                  box-shadow: 0 4px 9px 0 rgba($color: #000000, $alpha: 0.1);
+                  padding:0 12px;
+                  display: flex;
+                  align-items: center;
+                  border-radius: 4px;
+                  font-size: 12px;" class="tooltip-area"><p>${params.marker}${params.name}</p><h4 style="margin-left: 30px;">${params.value}</h4></div>`
+                    },
+                 },
+                 legend: {
+                    show: true,
+                    top:'5%'
+                 },
+                 title: {
+                    show:false,
+                    text: data.total.title,
+                    textStyle: {
+                       color: 'rgba(28, 31, 35, 0.80)',
+                       fontSize: '12px',
+                       fontWeight: 'normal'
+                    },
+                    subtext: data.total.figure,
+                    subtextStyle: {
+                       color: '#1C1F23',
+                       fontSize: '20px',
+                       fontWeight: '600'
+                    },
+                    top: "center",
+                    left: 'center'
+                 },
+                 series: [
+                    {
+                       name: '',
+                       type: 'pie',
+                       radius: ['30%', '45%'],
+                       avoidLabelOverlap: false,
+                       label: {
+                          formatter: `{a|{b}}: {b|{c}}`,
+                          alignTo: 'labelLine',
+                          rich: {
+                             a: {
+                                color: 'rgba(28, 31, 35, 0.80)',
+                                fontSize: '12px',
+                             },
+                             b: {
+                                color: '#1C1F23',
+                                fontSize: '14px',
+                                fontWeight: '600'
+                             }
+                          }
+                       },
+                       labelLine: {
+                          lineStyle: {
+                             cap: 'round'
+                          }
+                       },
+                       data: data.data
+                    }
+                 ]
+              };
+            let mychat = echarts.init(righttop_echarts2.value);
+            mychat.setOption(option);
+          }
+          function showRightTop(data){
+            const color = ['#84b8e8', '#62a2de', '#467dce', '#2e4ca152', '#2e4ca1','#84b8e853'];
+            const datas = [];
+            for (let index = 1; index <= 6; index++) {
+              datas.push({value:data.curr['v'+index],name:data.curr['n'+index],"ind":index})
+            }
+            let option = {
+               color,
+               tooltip: {
+                  trigger: "item",
+                  extraCssText: "width: 150px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
+                  formatter: function (params) {
+                     let str =
+                        (params.data &&
+                           `<div style="font-weight: bold;width:100%;">${params.name}</div>
+                        <div style="justify-content: space-between; align-items: center;">
+                            <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
+                            <span>${params.percent}%</span>
+                        </div>`) ||
+                        "";
+                     return str;
+                  }
+               },
+               series: [
+                  {
+                     type: "pie",
+                     radius: "65%",
+                     center: ["50%", "50%"],
+                     label: {
+                        normal: {
+                           formatter: "{xx|{b} }{yy|{d} %}",
+                           rich: {
+                              xx: {
+                                 fontSize: 12,
+                                 lineHeight: 32,
+                                 color: '#4E5969'
+                              },
+                              yy: {
+                                 fontSize: 16,
+                                 fontWeight: 600,
+                                 lineHeight: 32,
+                                 color: '#1D2129'
+                              }
+                           }
+                        }
+                     },
+                     data: datas,
+                     itemStyle: {
+                        emphasis: { // 鼠标经过扇形区域时的阴影效果
+                           shadowBlur: 10,
+                           shadowOffsetX: 0,
+                           shadowColor: "rgba(0, 0, 0, 0.5)"
+                        }
+                     },
+                     labelLine: {
+                        normal: {
+                           length: 5,
+                           length2: 20,
+                           smooth: true
+                        }
+                     }
+                  }
+               ]
+            };
+            let mychat = echarts.init(righttop_echarts1.value);
+            mychat.setOption(option);
+            mychat.on('click',function(params){
+              let dataInd = params.data.ind;
+              showRightTop3(params.data.name,dataInd);
+            });
+            showRightTop3(datas[0].name,datas[0].ind);
+          }
+          function showRightTop3(name,ind){
+            cogsName.value = name;
+            let months = [];
+            let values = [];
+            datalist.value.his['n'+ind].forEach(element => {
+              months.push(element.month);
+              values.push(element.value);
+            });
+            let option = {
+                backgroundColor: '#fff',
+                    tooltip: {
+                      trigger: 'axis'
+                    },
+                    grid: {
+                      left: '3%',
+                      right: '5%',
+                      bottom: "5%",
+                      top: "5%",
+                      containLabel: true
+                    },
+                    legend: {
+                      show:false,
+                      bottom: 0,
+                      itemWidth: 20,
+                      itemHeight: 10,                      
+                      textStyle: {
+                        color: '#242424',
+                        fontSize: 12
+                      }
+                    },
+                    xAxis: {
+                      type: 'category',
+                      data: months,
+                      axisLabel: {
+                        rotate: 320,//坐标轴字体颜色
+                        textStyle: {
+                          color: '#242424',
+                          fontSize: 12
+                        }
+                      },
+                      axisLine: {
+                        show: false,
+                        lineStyle: {
+                          color: '#242424'
+                        }
+                      },
+                      axisTick: {       //y轴刻度线
+                        show: false
+                      },
+                      splitLine: {    //网格
+                        show: false
+                      },
+                      boundaryGap: false
+                    },
+                    yAxis: {
+                      type: 'value',
+                      axisLabel: {        //坐标轴字体颜色
+                        textStyle: {
+                          color: '#3E3E3E',
+                          fontSize: 12
+                        }
+                      },
+                      axisLine: {
+                        show: false,
+                        lineStyle: {
+                          color: '#242424'
+                        }
+                      },
+                      axisTick: {       //y轴刻度线
+                        show: false
+                      },
+                      splitLine: {    //网格
+                        show: true,
+                        lineStyle:{
+                          color:'#dadde4',
+                          type:"dashed"
+                        }
+                      }
+                    },
+
+                    series: [{
+                      name: name,
+                      type: 'line',
+                      smooth: false,
+                      symbol: 'circle',
+                      symbolSize: 8,
+                      itemStyle: {
+                        color: '#fbc16b',
+                        borderColor: '#fff',
+                        borderWidth: 2
+                      },
+                      lineStyle: {
+                        normal: {
+                          color: '##fbc16b'
+
+                        }
+                      },
+                      areaStyle: {
+                        normal: {
+                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#feebd0'
+                          }, {
+                            offset: 1,
+                            color: '#feebd010'
+                          }])
+                        }
+                      },
+                      data: values
+                    }]                    
+            };
+            var mychat = echarts.init(righttop_echarts11.value);
+            mychat.setOption(option)
+          }
+          function showRightBottom(data){
+            var tmp=[];
+            data.forEach(item=>{
+              tmp.push({
+                item:item.item,
+                value0:item.values[0],
+                value1:item.values[1],
+                value2:item.values[2],
+                value3:item.values[3],
+                value4:item.values[4],
+                value5:item.values[5],
+              })
+            });
+            cogsdetaillist.value = tmp;
+          }  
+          onMounted(()=>{
+              impquery();
+          })
+
+          return{
+              datalist,
+              cogslist,
+              cogsName,
+              cogsdetaillist,
+              impquery,
+              loading,             
+              daterangeTime,
+              leftbottom_echarts,
+              righttop_echarts1,
+              righttop_echarts11,
+              righttop_echarts2,
+          }
+      }
+  }
+</script>
+<style>
+.el-table__body tr.current-row>td.el-table__cell
+{
+    background-color: #aacbec;
+}
+.table_caption{
+    font-weight: bold;
+    font-size: 18px;
+
+}
+
+.line{
+    height: 60%;
+    width: 5px;
+    background-color: #000;
+    border-radius: 5px;
+    float: left;
+    margin-right: 8px;
+    margin-top: 6px;
+}
+.spanBtn{
+    font-weight: normal;
+    margin: 3px;
+    font-size: 14px;
+    cursor: pointer;
+}
+.active{
+    background-color: cornflowerblue;
+    color: #fff;
+    padding: 5px;
+
+}
+.masterblock{
+  position: absolute;
+  width: 174px;
+  height: 86px;
+  border-radius: 5px;
+  border: 1px solid #dadada;
+  padding: 15px;
+  border-left: 3px solid #2c94ff;
+  z-index: 0;
+}
+.block0{
+  margin-left: -87px;
+  top:20px;
+  left: 50%;
+}
+.block1{
+  right: 0px;
+  top:25%;
+}
+.block5{
+  left: 0px;
+  top:25%;
+}
+.block2{
+  left: 0px;
+  top:55%;
+}
+.block3{
+  bottom: 0px;
+  left: 50%;
+  margin-left: -87px;
+}
+.block4{
+  right: 0px;
+  top:55%;
+}
+.block_line{
+  position:absolute;
+  z-index:1;
+  left:0;
+  top:0;  
+  background-color: #2c94ff;
+}
+.block_line .cirle{
+  position:absolute;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  border: 2px solid #2c94ff;
+  background-color: #fff;
+}
+.masterimg{
+  position: absolute;
+  width: 174px;
+  height: 86px;
+  border-radius: 5px;
+  left: 50%;
+  top:50%;
+  margin-top: -42px;
+  margin-left: -87px;
+  z-index: 10;
+}
+.masterimg img{
+  width: 174px;
+  height: 86px;
+  border-radius: 5px;
+}
+.masterimg span{
+  position: absolute;
+  top: 36%;
+  width: 100%;
+  display: block;
+  text-align: center;
+  color: #fff;
+  font-size: 20px;
+}
+
+</style>