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')">
            查看详细 <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: {}
    }
  },
  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>