updata

src/views/PaySlips.vue

@@ -48,6 +48,253 @@
 
 <script>
 import "../assets/css/labor.css";
+import "../assets/js/jquery.min.js";
+import "../assets/js/echarts.min.js";
+
+var myChart = echarts.init(document.getElementById("chart"));
+var dataAxis = [
+  "01",
+  "02",
+  "03",
+  "04",
+  "05",
+  "06",
+  "07",
+  "08",
+  "09",
+  "10",
+  "11",
+  "12"
+];
+var columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10000];
+var yMax = 15000;
+var dataShadow = [];
+var date = new Date();
+var cur_year = date.getFullYear();
+for (var i = 0; i < columnData.length; i++) {
+  dataShadow.push(yMax);
+}
+option = {
+  xAxis: {
+    offset: 10,
+    name: "元",
+    nameLocation: "start",
+    nameTextStyle: {
+      padding: [45, -10, 0, 0]
+    },
+    data: dataAxis,
+    axisLabel: {
+      inside: false,
+      textStyle: {
+        color: "#BABFC2"
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    z: 10
+  },
+  yAxis: {
+    name: "月/",
+    nameLocation: "start",
+    nameTextStyle: {
+      padding: [2, 55, 0, 0]
+    },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      // grid 分割线设置
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      textStyle: {
+        color: "#BABFC2"
+      }
+    }
+  },
+  grid: {
+    bottom: "30%",
+    top: "10%",
+    width: "82%",
+    left: "15%"
+  },
+  // dataZoom: [
+  //     {
+  //         type: 'inside'
+  //     }
+  // ],
+  series: [
+    {
+      // For shadow
+      type: "bar",
+      itemStyle: {
+        normal: { color: "rgba(0,0,0,0.05)" }
+      },
+      barGap: "-100%",
+      barCategoryGap: "40%",
+      data: dataShadow,
+      animation: false
+    },
+    {
+      type: "bar",
+      barWidth: 8,
+      itemStyle: {
+        normal: {
+          barBorderRadius: [50, 50, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#33CD8B" },
+            { offset: 0.5, color: "#22BD7A" },
+            { offset: 1, color: "#22BD7A" }
+          ])
+        },
+        emphasis: {
+          barBorderRadius: [50, 50, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#33CD8B" },
+            { offset: 0.5, color: "#22BD7A" },
+            { offset: 1, color: "#22BD7A" }
+          ]),
+          label: {
+            show: true,
+            position: "top",
+            rich: {},
+            textStyle: {
+              // color: '#FC8936',
+              color: "#FFFFFF"
+            },
+            backgroundColor: {
+              image: "../assets/images/echart_backgorund.png"
+            },
+            padding: [10, 12, 12, 8]
+          }
+        }
+      },
+      data: columnData
+    }
+  ]
+};
+
+function init() {
+  option.series[1].data = columnData;
+  myChart.setOption(option);
+
+  myChart.dispatchAction({
+    type: "highlight",
+    seriesIndex: 0,
+    dataIndex: 12
+  });
+}
+
+window.onresize = function() {
+  myChart.resize();
+};
+//select
+//初始化赋值
+$(".select-head .select-head-cont").html(
+  $(".option li")
+    .eq(0)
+    .html()
+);
+$(".option li")
+  .eq(0)
+  .addClass("click_bg")
+  .siblings()
+  .removeClass("click_bg");
+
+//点击弹出下拉列表
+$(".select-head").click(function(event) {
+  event.stopPropagation(); //阻止冒泡~必须条件！！
+  $(".option").slideToggle();
+
+  //箭头动画
+  if ($(".select-icon").hasClass("rotate")) {
+    $(".select-icon")
+      .addClass("rotate1")
+      .removeClass("rotate");
+  } else {
+    $(".select-icon")
+      .removeClass("rotate1")
+      .addClass("rotate");
+  }
+});
+
+//点击下拉菜单之外隐藏列表
+$(document).click(function(event) {
+  $(".option").hide();
+  $(".select-icon")
+    .addClass("rotate1")
+    .removeClass("rotate");
+});
+
+function transData(data, cur_year) {
+  columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+  let obj = [];
+  let yearList = [];
+
+  for (const item in data) {
+    if (data.hasOwnProperty(item)) {
+      const element = data[item];
+      if (element.pay_time) {
+        const year = element.pay_time.substr(0, 4);
+        if (year == cur_year) {
+          yearList.push(year);
+        }
+      }
+    }
+  }
+
+  yearList = [...new Set(yearList)];
+  if (yearList.length < 1) {
+    return;
+  }
+  for (const year of yearList) {
+    const o = { year: year, list: [] };
+    obj.push(o);
+  }
+
+  for (const yObj of obj) {
+    const oy = yObj.year;
+    const set = new Set();
+    for (const item of data) {
+      const iy = item.pay_time.substr(0, 4);
+      if (oy === iy) {
+        const month = item.pay_time.substr(5, 2);
+        set.add(month);
+      }
+    }
+    set.forEach(m => {
+      yObj.list.push({ month: m, sum: 0, list: [] });
+    });
+  }
+
+  for (const y of obj) {
+    const yl = y.list;
+    for (const m of yl) {
+      const month = m.month;
+      let sum = 0;
+      for (const item of data) {
+        if (item.pay_time.indexOf(month) > -1) {
+          m.list.push(item);
+          sum += item.current_real_wage;
+        }
+      }
+      let mon = parseInt(month);
+      columnData[mon] = sum;
+      m.sum = sum;
+    }
+  }
+
+  return obj;
+}
+
+
 export default {};
 </script>
 

src/views/PaySlipsMonth.vue

@@ -64,6 +64,8 @@
 <script>
 import "../assets/css/labor.css";
 export default {};
+
+
 </script>
 
 <style lang="less">