epmet-work-pc/src/views/dataBoard/satisfactionEval/index.vue

<template>
  <div class="satisfaction-eval">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="bg">
          <Title text="不满意事项类型分析">
            <div class="more" @click="goToPage(`/dataBoard/satisfactionEval/dissatisfied/${index}/${type}/${time}`)">查看详细 <i class="el-icon-arrow-right"></i></div>
          </Title>

          <TypesOfDissatisfaction @timeChange="timeChange" />
        </div>
        <div class="bg">
          <Title text="不满意风险人员统计及回访情况" />
          <RiskStatistics :date="typeDate" />
        </div>
      </el-col>
      <el-col :span="8">
        <EventSituation />
        <div class="bg2">
          <Title text="不满意事项及满意度自查走势" />
          <SelfTrend />
        </div>
        <div class="bg2">
          <Title text="下级组织不满意事项统计" />
          <EventStatistics :date="typeDate" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg2">
          <Title text="不满意人员画像" />
          <PersonnelPortrait />
        </div>

        <div class="bg2">
          <Title text="潜在不满意人数" />
          <PotentialPeople :date="typeDate" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TypesOfDissatisfaction from "./modules/TypesOfDissatisfaction";
import RiskStatistics from "./modules/RiskStatistics";
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import EventSituation from "@/views/dataBoard/satisfactionEval/modules/EventSituation";
import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend";
import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics";
import PersonnelPortrait from "@/views/dataBoard/satisfactionEval/modules/PersonnelPortrait";
import PotentialPeople from "@/views/dataBoard/satisfactionEval/modules/PotentialPeople";

export default {
  name: "satisfactionEvaluation",
  components: {
    EventStatistics,
    SelfTrend,
    EventSituation,
    TypesOfDissatisfaction,
    RiskStatistics,
    Title,
    PersonnelPortrait,
    PotentialPeople,
  },
  data() {
    return {
      typeDate: {},
      index: 0,
      type: 0,
      time: 0,
    };
  },
  methods: {
    goToPage(url) {
      this.$router.push(url);
    },
    timeChange(date) {
      this.typeDate = date;
    },
  },
};
</script>

<style scoped lang="scss">
.satisfaction-eval {
  //padding: 24px 20px;
}

.more {
  font-size: 14px;
  font-weight: 400;
  color: #a0cdff;
  cursor: pointer;
}

.bg2 {
  background: linear-gradient(180deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
}

.bg {
  background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
}
</style>