Smart_platform_ui/src/views/wel/home/tongjiSchool.vue

<template>
  <div>
    <basic-container>
      <div class="container" style="height: 400px;">
        <div class="container-items">
          <but-card
            iconName="el-icon-edit-outline"
            name="小学部工资"
            @click.native="inPage(1)"
          />
          <but-card
            iconName="el-icon-edit-outline"
            name="初中部工资"
            @click.native="inPage(2)"
          />
          <but-card
            iconName="el-icon-edit-outline"
            name="高中部工资"
            @click.native="inPage(3)"
          />
          <but-card
            iconName="el-icon-edit-outline"
            name="后勤部工资"
            @click.native="inPage(4)"
          />
          <but-card
            iconName="el-icon-edit-outline"
            name="添加教师"
            @click.native="inPage(5)"
          />
          <but-card
            iconName="el-icon-edit-outline"
            name="添加后勤"
            @click.native="inPage(6)"
          />
        </div>
        <index-card title="教师工资总体数据" iconName="el-icon-view">
          <div slot="select">
            <el-date-picker
              v-model="annual2"
              type="year"
              size="mini"
              placeholder="选择年"
              value-format="yyyy"
              style="margin-right:10px"
              @change="getsalaryData"
            >
            </el-date-picker>
            <el-select
              slot="content"
              size="mini"
              v-model="salaryType2"
              placeholder="请选择"
              @change="getsalaryData"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div slot="content" style="height:290px">
            <avue-data-icons :option="option"></avue-data-icons>
          </div>
        </index-card>
      </div>
    </basic-container>
    <basic-container>
      <index-card
        title="工资总额环比走势图"
        iconName="el-icon-s-fold"
        style="height:500px;margin-bottom: 30px"
      >
        <div slot="select">
          <el-date-picker
            v-model="annual"
            type="year"
            size="mini"
            placeholder="选择年"
            value-format="yyyy"
            style="margin-right:10px"
            @change="getsalaryStatistics"
          >
          </el-date-picker>
          <el-select
            slot="content"
            size="mini"
            v-model="salaryType"
            placeholder="请选择"
            @change="getsalaryStatistics"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div slot="content" style="height:450px" id="commoDity"></div>
      </index-card>
      <br />
    </basic-container>
    <basic-container>
      <index-card
        title="工资总额同比走势图"
        iconName="el-icon-s-fold"
        style="height:500px;margin-bottom: 30px"
      >
        <div slot="select">
          <el-date-picker
            v-model="annual3"
            type="year"
            size="mini"
            placeholder="选择年"
            value-format="yyyy"
            style="margin-right:10px"
            @change="getsalaryDataChain"
          >
          </el-date-picker>
          <el-select
            slot="content"
            size="mini"
            v-model="salaryType3"
            placeholder="请选择"
            style="margin-right:10px"
            @change="getsalaryDataChain"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            slot="content"
            size="mini"
            v-model="moon"
            placeholder="请选择月份"
            @change="moonChange"
            clearable
            style="margin-right:10px"
          >
            <el-option
              v-for="item in moonList"
              :key="item.value"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
          <el-select
            slot="content"
            size="mini"
            v-model="semester"
            placeholder="请选择学期"
            clearable
            @change="semesterChange"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div slot="content" style="height:450px" id="commoDity2"></div>
      </index-card>
      <br />
    </basic-container>
    <basic-container>
      <index-card
        title="人均月工资对比走势图"
        iconName="el-icon-s-fold"
        style="height:500px;margin-bottom: 30px"
      >
        <div slot="select">
          <el-date-picker
            v-model="annual4"
            type="year"
            size="mini"
            placeholder="选择年"
            value-format="yyyy"
            style="margin-right:10px"
            @change="getsalaryAverage"
          >
          </el-date-picker>
        </div>
        <div slot="content" style="height:450px" id="commoDity3"></div>
      </index-card>
      <br />
    </basic-container>
  </div>
</template>

<script>
import { getYearDate } from "@/util/date";
import {
  salaryStatistics,
  salaryData,
  salaryDataChain,
  salaryAverage
} from "@/api/wel";
import { mapGetters } from "vuex";
import indexCard from "../components/card.vue";
import butCard from "../components/butCard.vue";
export default {
  name: "wel",
  data() {
    return {
      tradeType: null,
      moon: null,
      semester: null,
      moonList: [],
      fsalaryList2: [],
      studentNumberList2: [],
      fsalaryContrastList2: [],
      studentNumberContrastList2: [],
      fsalaryList: [],
      studentNumberList: [],
      fsalaryContrastList: [],
      studentNumberContrastList: [],
      activeNames: ["1", "2", "3", "5"],
      logActiveNames: ["24"],
      annual: "",
      annual2: "",
      annual3: "",
      annual4: "",
      salaryType: "",
      salaryType2: "",
      salaryType3: "",
      salaryType4: "",
      xxList: [],
      czList: [],
      gzList: [],
      isHeight: {},
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "小学部",
          label: "小学部"
        },
        {
          value: "初中部",
          label: "初中部"
        },
        {
          value: "高中部",
          label: "高中部"
        },
        {
          value: "后勤部",
          label: "后勤部"
        }
      ],
      options2: [
        {
          value: "上学期",
          label: "上学期"
        },
        {
          value: "下学期",
          label: "下学期"
        }
      ],
      option: {
        span: 6,
        data: [
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年工资总额",
            count: 0,
            decimals: 2,
            icon: "el-icon-tickets"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年工资额增长率(%)",
            count: 0,
            decimals: 2,
            icon: "el-icon-s-marketing"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年人均工资",
            count: 0,
            decimals: 2,
            icon: "el-icon-s-finance"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年人均工资增长率(%)",
            count: 0,
            decimals: 2,
            icon: "el-icon-s-claim"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年保险总额",
            count: 0,
            decimals: 2,
            icon: "el-icon-s-cooperation"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年保险总额同比(%)",
            count: 0,
            decimals: 2,
            icon: "el-icon-notebook-1"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年人均保险",
            count: 0,
            decimals: 2,
            icon: "el-icon-s-custom"
            // href:'https://avuejs.com',
            // target: "_blank"
          },
          {
            // click: function(item) {
            //   // alert(JSON.stringify(item));
            // },
            title: "年人均保险同比(%)",
            count: 0,
            icon: "el-icon-notebook-2"
            // href:'https://avuejs.com',
            // target: "_blank"
          }
        ]
      }
    };
  },
  created() {
    this.annual = getYearDate().toString();
    this.annual2 = getYearDate().toString();
    this.annual3 = getYearDate().toString();
    this.annual4 = getYearDate().toString();
    this.isHeight.height = window.innerHeight - 165 + "px";
    this.getWorkDicts("month").then(res => {
      this.moonList = res.data.data;
    });
  },
  mounted() {
    this.getsalaryStatistics();
    this.getsalaryData();
    this.getsalaryDataChain();
    this.getsalaryAverage();
  },
  components: {
    indexCard,
    butCard
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    inPage(type) {
      switch (type) {
        case 1:
          this.$router.push("/salaryManagement/primarySchool/index");
          break;
        case 2:
          this.$router.push("/salaryManagement/juniorhighSchool/index");
          break;
        case 3:
          this.$router.push("/salaryManagement/highSchool/index");
          break;
        case 4:
          this.$router.push("/salaryManagement/logisticsDepartment/index");
          break;
        case 5:
          this.$router.push("/basicData/facultyManagement/index");
          break;
        case 6:
          this.$message.error("暂无此页面");
          break;
      }
    },
    getsalaryStatistics() {
      this.fsalaryList = [];
      this.studentNumberList = [];
      this.fsalaryContrastList = [];
      this.studentNumberContrastList = [];
      salaryStatistics({
        annual: this.annual,
        salaryType: this.salaryType
      })
        .then(res => {
          res.data.data.forEach(e => {
            this.fsalaryList.push(Number(e.fsalary).toFixed(6));
            this.studentNumberList.push(Number(e.studentNumber).toFixed(2));
            this.fsalaryContrastList.push(Number(e.fsalaryContrast).toFixed(2));
            this.studentNumberContrastList.push(
              Number(e.studentNumberContrast).toFixed(2)
            );
          });
        })
        .finally(() => {
          this.commoDity();
        });
    },
    moonChange() {
      this.semester = null;
      this.getsalaryDataChain();
    },
    semesterChange() {
      this.moon = null;
      this.getsalaryDataChain();
    },
    getsalaryAverage() {
      this.xxList = [];
      this.czList = [];
      this.gzList = [];
      salaryAverage({ annual: this.annual4 })
        .then(res => {
          res.data.data.forEach(e => {
            if (e.salaryType == "小学部") {
              this.xxList.push(Number(e.fsalary));
            }
            if (e.salaryType == "初中部") {
              this.czList.push(Number(e.fsalary));
            }
            if (e.salaryType == "高中部") {
              this.gzList.push(Number(e.fsalary));
            }
          });
        })
        .finally(() => {
          this.commoDity3();
        });
    },
    getsalaryDataChain() {
      this.yearList = [];
      this.fsalaryList2 = [];
      this.studentNumberList2 = [];
      this.fsalaryContrastList2 = [];
      this.studentNumberContrastList2 = [];
      salaryDataChain({
        annual: this.annual3,
        moon: this.moon,
        semester: this.semester,
        salaryType: this.salaryType3
      })
        .then(res => {
          let data = res.data.data;
          for (let i = 5; i >= 0; i--) {
            this.yearList.push(Number(this.annual3) - i + "年");
          }
          this.fsalaryList2.push(Number(data.fsalary));
          this.fsalaryList2.push(Number(data.fsalaryOne).toFixed(2));
          this.fsalaryList2.push(Number(data.fsalaryTwo).toFixed(2));
          this.fsalaryList2.push(Number(data.fsalaryThree).toFixed(2));
          this.fsalaryList2.push(Number(data.fsalaryFour).toFixed(2));
          this.fsalaryList2.push(Number(data.fsalaryFive).toFixed(2));
          this.studentNumberList2.push(Number(data.studentNumber).toFixed(2));
          this.studentNumberList2.push(
            Number(data.studentNumberOne).toFixed(2)
          );
          this.studentNumberList2.push(
            Number(data.studentNumberTwo).toFixed(2)
          );
          this.studentNumberList2.push(
            Number(data.studentNumberThree).toFixed(2)
          );
          this.studentNumberList2.push(
            Number(data.studentNumberFour).toFixed(2)
          );
          this.studentNumberList2.push(
            Number(data.studentNumberFive).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryContrast).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryOneContrast).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryTwoContrast).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryThreeContrast).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryFourContrast).toFixed(2)
          );
          this.fsalaryContrastList2.push(
            Number(data.fsalaryFiveContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberOneContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberTwoContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberThreeContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberFourContrast).toFixed(2)
          );
          this.studentNumberContrastList2.push(
            Number(data.studentNumberFiveContrast).toFixed(2)
          );
        })
        .finally(() => {
          this.commoDity2();
        });
    },
    getsalaryData() {
      salaryData({
        annual: this.annual2,
        salaryType: this.salaryType2
      }).then(res => {
        let data = res.data.data;
        this.option.data.forEach(e => {
          if (e.title == "年工资总额") {
            e.count = data.salaryRental;
          } else if (e.title == "年工资额增长率(%)") {
            e.count = data.annualWageGrowth;
          } else if (e.title == "年人均工资") {
            e.count = data.averageWage;
          } else if (e.title == "年人均工资增长率(%)") {
            e.count = data.averageWageGrowthRate;
          } else if (e.title == "年保险总额") {
            e.count = data.insuredSum;
          } else if (e.title == "年保险总额同比(%)") {
            e.count = data.insuredSumYear;
          } else if (e.title == "年人均保险") {
            e.count = data.insuredMean;
          } else if (e.title == "年人均保险同比(%)") {
            e.count = data.insuredMeanYear;
          }
        });
      });
    },
    handleChange(val) {
      window.console.log(val);
    },
    commoDity() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("commoDity"));
      const colors = ["#5470C6", "#91CC75", "#EE6666", "#00008b"];
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(param) {
            let obj = param[0].name + "<br/>";
            param.forEach(el => {
              if (
                el.seriesName == "工资增加率" ||
                el.seriesName == "人数增长率"
              ) {
                obj +=
                  el.marker +
                  el.seriesName +
                  ":" +
                  Number(el.data).toFixed(2) +
                  "%<br/>";
              } else {
                obj +=
                  el.marker +
                  el.seriesName +
                  ":" +
                  Number(el.data).toFixed(2) +
                  "<br/>";
              }
            });
            return obj;
          }
        },
        legend: {
          data: ["工资", "人数", "工资增加率", "人数增长率"],
          selected: {
            工资: true,
            人数: true,
            工资增加率: false,
            人数增长率: false
          }
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            name: "人民币",
            position: "left",
            offset: 80,
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} 元"
            }
          },
          {
            type: "value",
            name: "人数",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} 人"
            }
          },
          {
            type: "value",
            name: "工资增加率",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} %"
            }
          },
          {
            type: "value",
            name: "工资增加率",
            position: "right",
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[3]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            data: this.fsalaryList,
            name: "工资",
            type: "bar"
          },
          {
            data: this.studentNumberList,
            name: "人数",
            yAxisIndex: 1,
            type: "bar"
          },
          {
            data: this.fsalaryContrastList,
            name: "工资增加率",
            yAxisIndex: 2,
            type: "line"
          },
          {
            data: this.studentNumberContrastList,
            name: "人数增长率",
            yAxisIndex: 3,
            type: "line"
          }
        ]
      });
    },
    commoDity2() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("commoDity2"));
      const colors = ["#5470C6", "#91CC75", "#EE6666", "#00008b"];
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(param) {
            let obj = param[0].name + "<br/>";
            param.forEach(el => {
              if (
                el.seriesName == "工资增加率" ||
                el.seriesName == "人数增长率"
              ) {
                obj +=
                  el.marker +
                  el.seriesName +
                  ":" +
                  Number(el.data).toFixed(2) +
                  "%<br/>";
              } else {
                obj +=
                  el.marker +
                  el.seriesName +
                  ":" +
                  Number(el.data).toFixed(2) +
                  "<br/>";
              }
            });
            return obj;
          }
        },
        legend: {
          data: ["工资", "人数", "工资增加率", "人数增长率"],
          selected: {
            工资: true,
            人数: true,
            工资增加率: false,
            人数增长率: false
          }
        },
        xAxis: {
          type: "category",
          data: this.yearList
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            name: "人民币",
            position: "left",
            offset: 80,
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} 元"
            }
          },
          {
            type: "value",
            name: "人数",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} 人"
            }
          },
          {
            type: "value",
            name: "工资增加率",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} %"
            }
          },
          {
            type: "value",
            name: "工资增加率",
            position: "right",
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[3]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            data: this.fsalaryList2,
            name: "工资",
            type: "bar"
          },
          {
            data: this.studentNumberList2,
            name: "人数",
            yAxisIndex: 1,
            type: "bar"
          },
          {
            data: this.fsalaryContrastList2,
            name: "工资增加率",
            yAxisIndex: 2,
            type: "line"
          },
          {
            data: this.studentNumberContrastList2,
            name: "人数增长率",
            yAxisIndex: 3,
            type: "line"
          }
        ]
      });
    },
    commoDity3() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("commoDity3"));
      const colors = ["#5470C6", "#91CC75", "#EE6666", "#00008b"];
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["小学部", "初中部", "高中部"]
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            name: "人民币",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              },
              onZero: false
            },
            axisLabel: {
              formatter: "{value} 元"
            }
          }
        ],
        series: [
          {
            data: this.xxList,
            name: "小学部",
            type: "bar"
          },
          {
            data: this.czList,
            name: "初中部",
            type: "bar"
          },
          {
            data: this.gzList,
            name: "高中部",
            type: "bar"
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50%);
  grid-template-rows: 40% 30% 30%;
  .container-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33.33%);
    grid-template-rows: repeat(auto-fill, 140%);
    align-items: center;
  }
}
//今日营业
.operate {
  display: grid;
  grid-template-rows: repeat(auto-fill, 33.33%);
  .operate-item {
    display: flex;
    align-items: center;
    .item-text {
      display: flex;
      align-items: end;
      font-size: 14px;
      .item-point {
        line-height: 14px;
        width: 14px;
        height: 14px;
        border-radius: 2px;
        background: #ff7d13;
        margin-right: 4px;
        margin-bottom: 1px;
      }
    }
    p {
      font-size: 24px;
      line-height: 24px;
      margin: 0 4px !important;
    }
  }
}
</style>