tire-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="小学部工资" />
          <but-card iconName="el-icon-edit-outline" name="初中部工资" />
          <but-card iconName="el-icon-edit-outline" name="高中部工资" />
          <but-card iconName="el-icon-edit-outline" name="后勤工资" />
          <but-card iconName="el-icon-edit-outline" name="添加教师" />
          <but-card iconName="el-icon-edit-outline" name="添加后勤" />
        </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="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>
  </div>
</template>

<script>
import { salaryStatistics, salaryData, salaryDataChain } 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 {
      moon: null,
      semester: null,
      moonList: [],
      fsalaryList2: [],
      studentNumberList2: [],
      fsalaryList: [],
      studentNumberList: [],
      activeNames: ["1", "2", "3", "5"],
      logActiveNames: ["24"],
      annual: "2022",
      annual2: "2022",
      annual3: "2022",
      salaryType: "",
      salaryType2: "",
      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.isHeight.height = window.innerHeight - 165 + "px";
    this.getWorkDicts("month").then(res => {
      this.moonList = res.data.data;
    });
  },
  mounted() {
    this.getsalaryStatistics();
    this.getsalaryData();
    this.getsalaryDataChain();
  },
  components: {
    indexCard,
    butCard
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    getsalaryStatistics() {
      this.fsalaryList = [];
      this.studentNumberList = [];
      salaryStatistics({
        annual: this.annual,
        salaryType: this.salaryType
      })
        .then(res => {
          res.data.data.forEach(e => {
            this.fsalaryList.push(Number(e.fsalary));
            this.studentNumberList.push(Number(e.studentNumber));
          });
        })
        .finally(() => {
          this.commoDity();
        });
    },
    moonChange() {
      this.semester = null;
      this.getsalaryDataChain();
    },
    semesterChange() {
      this.moon = null;
      this.getsalaryDataChain();
    },
    getsalaryDataChain() {
      this.yearList = [];
      this.fsalaryList2 = [];
      this.studentNumberList2 = [];
      salaryDataChain({
        annual: this.annual3,
        moon: this.moon,
        semester: this.semester
      })
        .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));
          this.fsalaryList2.push(Number(data.fsalaryTwo));
          this.fsalaryList2.push(Number(data.fsalaryThree));
          this.fsalaryList2.push(Number(data.fsalaryFour));
          this.fsalaryList2.push(Number(data.fsalaryFive));
          this.studentNumberList2.push(Number(data.studentNumber));
          this.studentNumberList2.push(Number(data.studentNumberOne));
          this.studentNumberList2.push(Number(data.studentNumberTwo));
          this.studentNumberList2.push(Number(data.studentNumberThree));
          this.studentNumberList2.push(Number(data.studentNumberFour));
          this.studentNumberList2.push(Number(data.studentNumberFive));
        })
        .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"));

      // 绘制图表
      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",
          axisLabel: {
            formatter: "{value} 元"
          }
        },
        series: [
          {
            data: this.fsalaryList,
            name: "工资",
            type: "bar"
          },
          {
            data: this.studentNumberList,
            name: "人数",
            type: "bar"
          }
        ]
      });
    },
    commoDity2() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("commoDity2"));

      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["工资", "人数"]
        },
        xAxis: {
          type: "category",
          data: this.yearList,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 元"
          }
        },
        series: [
          {
            data: this.fsalaryList2,
            name: "工资",
            type: "bar"
          },
          {
            data: this.studentNumberList2,
            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>