Merge branch 'jw_feature_zhanlibiao' into dev

src/views/dataBoard/satisfactionEval/components/Tabs/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tabs">
+    <div class="tab" :class="value2 === item.value?'cur':''" v-for="(item,index) in list" @click="tabClick(index)" :key="index">
+      {{item.label}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tabs",
+  props: {
+    list:{
+      type: Array,
+      default: () => []
+    },
+    value:{
+      type: [String,Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      value2: this.value,
+    }
+  },
+  mounted() {
+    this.value2 = this.value
+  },
+  methods: {
+    tabClick(index) {
+      this.value2 = this.list[index].value
+      this.$emit('changeVal',this.value)
+      this.$emit('changeLabel',this.list[index].label)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  display: flex;
+  .tab {
+    cursor: pointer;
+    padding: 10px 11px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #FFFFFF;
+    background: url("@/assets/images/manyidu/tab.png") repeat-x top left;
+    margin-right: 4px;
+    &.cur {
+      background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left;
+    }
+  }
+}
+</style>

src/views/dataBoard/satisfactionEval/components/Title/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="title">
+    <span class="text">
+    <span class="txt">{{ text }}</span>
+    <span class="text-shadow">{{ text }}</span>
+    </span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Title",
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.title {
+  background: linear-gradient(90deg, rgba(31, 126, 255, 0.28) 0%, rgba(13, 113, 248, 0) 70%);
+  padding: 10px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .text {
+    position: relative;
+    font-size: 22px;
+    font-family: HYShuYuanHeiJ;
+    font-weight: 400;
+
+    .txt {
+      color: #1F79FF;
+      background: linear-gradient(0deg, #2DC1FF 0%, #FFFFFF 58.5205078125%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      z-index: 2;
+    }
+
+    .text-shadow {
+      top: 4px;
+      left: 3px;
+      position: absolute;
+      color: #020F21;
+      white-space: nowrap;
+    }
+  }
+
+
+}
+</style>

src/views/dataBoard/satisfactionEval/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="satisfaction-eval">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div class="bg">
+          <Title text="不满意事项类型分析">
+            <div class="more">
+            查看详细 <i class="el-icon-arrow-right"></i>
+            </div>
+          </Title>
+
+          <TypesOfDissatisfaction/>
+        </div>
+        <div class="bg">
+          <Title text="不满意风险人员统计及回访情况"/>
+          <RiskStatistics/>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <EventSituation/>
+        <div class="bg2">
+          <Title text="不满意事项及满意度自查走势"/>
+          <SelfTrend/>
+        </div>
+        <div class="bg2">
+          <Title text="下级网格不满意事项统计"/>
+          <EventStatistics/>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="bg2">
+          <Title text="不满意人员画像"/>
+          <PersonnelPortrait/>
+        </div>
+
+        <div class="bg2">
+          <Title text="潜在不满意人数"/>
+          <PotentialPeople/>
+        </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 {}
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+.satisfaction-eval {
+  padding: 24px 20px;
+}
+
+.more {
+  font-size: 14px;
+  font-weight: 400;
+  color: #A0CDFF;
+}
+
+.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>

src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="title">12345政务热线事件办理情况</div>
+
+    <div class="current">
+      <div class="cur-month">
+        <span>{{ curMonth }}</span> 月
+      </div>
+      <div class="cur-month-list">
+        <div class="cur-month-item">
+          <div class="txt">事件总数</div>
+          <div class="num blue">52</div>
+        </div>
+        <div class="cur-month-item">
+          <div class="txt">处理中</div>
+          <div class="num orange">13</div>
+        </div>
+        <div class="cur-month-item">
+          <div class="txt">已办结</div>
+          <div class="num green">28</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="his-month">
+      <div class="his-month-item" v-for="(item,index) in eventList" :key="index">
+        <div class="month">{{ item.month }}月</div>
+        <div class="num">{{ item.num }}</div>
+        <div class="event">{{ item.env }}事件数</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EventSituation",
+  data() {
+    return {
+      eventList: [],
+      curMonth: ''
+    }
+  },
+  mounted() {
+    this.curMonth = new Date().getMonth() - 0 + 1
+    let eventList = []
+    for (let i = 5; i >= 0; i--) {
+      eventList.push({
+        month: this.curMonth - i,
+        num: 10,
+        env: 11,
+      })
+    }
+    this.eventList = eventList
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 26px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 20px #8FD4FF;
+  background: linear-gradient(0deg, #8FD4FF 0%, #FFFFFF 64.0380859375%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-align: center;
+  letter-spacing: 5px;
+}
+.current {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 60px 15px 50px;
+}
+.cur-month {
+  font-size: 18px;
+  font-weight: 400;
+  color: #3AB7FF;
+  width: 130px;
+  padding-top: 14px;
+  box-sizing: border-box;
+  height: 88px;
+  background: url("@/assets/images/manyidu/month.png");
+  text-align: center;
+
+  span {
+    font-size: 32px;
+    font-weight: bold;
+    font-style: italic;
+  }
+}
+
+.cur-month-list {
+  display: flex;
+  .cur-month-item {
+    margin-left: 71px;
+    .txt {
+      font-size: 16px;
+      font-weight: 400;
+      color: #FFFFFF;
+      white-space: nowrap;
+    }
+
+    .num {
+      font-size: 36px;
+      font-weight: bold;
+      font-style: italic;
+    }
+  }
+}
+
+.blue {
+  color: #3CF5FF;
+}
+
+.orange {
+  color: #F95619;
+}
+
+.green {
+  color: #08EBAE;
+}
+
+.his-month {
+  display: flex;
+  background: linear-gradient(-90deg, rgba(14, 121, 213, 0.10) 0%, rgba(17, 124, 213, 0) 100%);
+  padding: 20px;
+  margin-bottom: 28px;
+  .his-month-item {
+    flex: 1;
+    position: relative;
+    padding-left: 25px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(50% - 63px / 2);
+      right: 0;
+      width: 1px;
+      height: 63px;
+      background: rgba(50, 151, 255, 0.55);
+
+
+    }
+    &:last-child:after {
+      display: none;
+    }
+    .month {
+      font-size: 14px;
+      font-weight: 400;
+      color: #C1E8FF;
+      opacity: 0.75;
+    }
+
+    .num {
+      font-size: 26px;
+      font-weight: bold;
+      color: #3AB7FF;
+      margin: 13px 0 6px;
+    }
+
+    .event {
+      font-size: 12px;
+      font-weight: 400;
+      color: #4B9FCF;
+      opacity: 0.75;
+    }
+  }
+}
+</style>

src/views/dataBoard/satisfactionEval/modules/EventStatistics/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="event-statistics">
+    <div id="eventStatisticsChart" style="height: 293px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EventStatistics",
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    initCharts() {
+      let div = document.getElementById('eventStatisticsChart');
+      this.myChart = echarts.init(div);
+
+      let xData = ['XX社区第一网格','XX社区第二网格','XX社区第三网格','XX社区第四网格',];
+      let tq1 = [12, 20, 30, 60];
+      let tq2 = [10, 50, 50, 27];
+      let tq3 = [300, 90, 48, 39];
+      const max = Math.max(...tq1, ...tq2, ...tq3)
+
+      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+      var option = {
+        title: {
+          show: false,
+          text: '',
+          x: 'center',
+          top: '15px',
+          textStyle: {
+            color: '#333333',
+            fontWeight: 500,
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(13, 64, 71, 0.50)',
+          borderColor: 'rgba(143, 225, 252, 0.60)',
+          padding: 8,
+          textStyle: {
+            color: '#fff',
+          },
+          formatter:  function (params) {
+            console.log(params)
+            var res='<div"><p>'+params[0].name+'</p></div>'
+            for(var i=0;i<params.length;i++){
+              if(params[i].seriesName!=""){
+                res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
+              }
+            }
+            return res;
+          },
+        },
+        legend: {
+          // icon: 'circle',
+          data: ['12345投诉', '省满意度调查', '社区满意度自查'],
+          itemGap: 20,
+          itemWidth: 6,
+          itemHeight: 6,
+          x: 'right',
+          top: '3%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            // padding:[0, 10, 0, 10],
+          }
+        },
+        grid: {
+          top: '18%',
+          left: '2%',
+          right: '4%',
+          bottom: '8%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#323c41'
+              }
+            },
+            axisLabel: {
+              align: 'center',
+              textStyle: {
+                fontSize: 12,
+                color: '#A3B9DA'
+              }
+            },
+            boundaryGap: true,
+            data: xData,
+          },{
+            type: 'category',
+            data: xData,
+            axisLine: {show:false},
+            axisLabel: {
+              show: false,
+            },
+            boundaryGap:true,
+
+          }
+        ],
+
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位：人',
+            nameLocation: 'end',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(4,187,255,0.18)',
+                type: 'dashed'
+              },
+            },
+            nameTextStyle: {
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              },
+              align: 'center'
+            },
+            axisLabel: {
+              show: true,
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '12345投诉',
+            type: 'bar',
+            barWidth: 14,
+            itemStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(152, 72, 255, 0)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#A962FF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq1,
+          },
+          {
+            name: '省满意度调查',
+            type: 'bar',
+            barWidth: 14,
+            itemStyle: {
+              // lenged文本
+              opacity: 1, // 这个是 透明度
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 228, 102, 0)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 228, 102, 1)' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq2, //data.values
+          },
+          {
+            name: '社区满意度自查',
+            type: 'bar',
+            barWidth: 14,
+            itemStyle: {
+              // lenged文本
+              opacity: 1, // 这个是 透明度
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq3, //data.values
+          },
+          {
+            name: '',
+            type: 'bar',
+
+            barWidth:100,
+            barGap: '-60%',
+            data: barArray,
+            itemStyle: {
+              normal: {
+                color: 'rgba(22,153,152, 0.1)'
+              }
+            },
+            zlevel: -1,
+            xAxisIndex: 1,
+          }
+        ],
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => this.myChart.resize());
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event-statistics {
+  padding: 16px 16px;
+}
+</style>

src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="personnel-portrait">
+    <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
+    <div class="screen">
+      <div class="txt">不满意人员画像</div>
+      <el-select v-model="typeCondition" placeholder="请选择" class="select">
+        <el-option
+            v-for="item in typeConditionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+
+    <div class="portrait">
+      <div class="tag yellow"><div class="text">第一网格</div></div>
+      <div class="tag blue"><div class="text">30-40岁</div></div>
+      <div class="tag red"><div class="text">流动人员</div></div>
+      <div class="tag light"><div class="text">月收入5000以下</div></div>
+      <div class="tag green"><div class="text">专科</div></div>
+      <div class="tag orange"><div class="text">已婚</div></div>
+      <div class="tag purple"><div class="text">男</div></div>
+    </div>
+
+    <div class="btn">
+      <div>按画像匹配到同类：<span> <b>372</b>人</span></div>
+      <i class="el-icon-arrow-right"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "PersonnelPortrait",
+  components: {Tabs},
+  data() {
+    return {
+      resultType: 1,
+      resultTypeList: [{
+        label: ' 按省调查/社区自查结果',
+        value: 1
+
+      }, {
+        label: '按12345热线投诉结果',
+        value: 2
+      }],
+      typeCondition: 1,
+      typeConditionList: [
+        {
+          label: '基础教育',
+          value: 1
+        }, {
+          label: '病有所医',
+          value: 2
+        }, {
+          label: '老有所养',
+          value: 3
+        }, {
+          label: '文化设施',
+          value: 4
+        }, {
+          label: '生态环境',
+          value: 5
+        }, {
+          label: '体育设施',
+          value: 6
+        }, {
+          label: '社会救助',
+          value: 7
+        },
+      ],
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    resultTypeChange() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$yellow: #ef9700;
+$blue: #1a95ff;
+$red: #ee3030;
+$light: #2ab6be;
+$green: #1b7d47;
+$orange: #f95619;
+$purple: #6642fd;
+.personnel-portrait {
+  padding: 16px 16px 40px;
+}
+
+.screen {
+  display: flex;
+  align-items: center;
+  margin: 25px 0 47px;
+
+  .txt {
+    font-size: 16px;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 22px;
+    margin-right: 25px;
+  }
+
+  /deep/ .el-input__inner {
+    width: 110px !important;
+    height: 24px !important;
+    background: #021C49 !important;
+    border: 1px solid #125AAA !important;
+    border-radius: 12px !important;
+    color: #A0CDFF;
+  }
+
+  /deep/ .el-input__icon {
+    line-height: 24px !important;
+    color: #A0CDFF;
+  }
+}
+
+.portrait {
+  width: 388px;
+  height: 345px;
+  position: relative;
+  background: url("@/assets/images/manyidu/hx_bg.png") no-repeat center;
+  margin: 0 auto;
+  cursor: pointer;
+  .tag {
+    position: absolute;
+    width: 76px;
+    height: 76px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .text {
+      width: 60px;
+      height: 60px;
+      top: 0;
+      left: 0;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
+    &:after {
+      content: "";
+      opacity: .3;
+      display: block;
+      width: 76px;
+      height: 76px;
+      position: absolute;
+      border-radius: 50%;
+
+    }
+    &:nth-of-type(1) {
+      left: 162px;
+      top: 0;
+    }
+    &:nth-of-type(2) {
+      left: 297px;
+      top: 73px;
+    }
+    &:nth-of-type(3) {
+      left: 316px;
+      top: 203px;
+    }
+    &:nth-of-type(4) {
+      left: 228px;
+      top: 269px;
+    }
+    &:nth-of-type(5) {
+      left: 77px;
+      top: 257px;
+    }
+    &:nth-of-type(6) {
+      left: 0px;
+      top: 158px;
+    }
+    &:nth-of-type(7) {
+      left: 48px;
+      top: 57px;
+    }
+  }
+  .yellow {
+    .text {
+    background: $yellow;
+    }
+    &:after {
+      background: $yellow;
+    }
+  }
+  .blue {
+    .text {
+    background: $blue;
+    }
+    &:after {
+      background: $blue;
+    }
+  }
+  .red {
+    .text {
+    background: $red;
+    }
+    &:after {
+      background: $red;
+    }
+  }
+  .light {
+    .text {
+    background: $light;
+    }
+    &:after {
+      background: $light;
+    }
+  }
+  .green {
+    .text {
+    background: $green;
+    }
+    &:after {
+      background: $green;
+    }
+  }
+  .orange {
+    .text {
+    background: $orange;
+    }
+    &:after {
+      background: $orange;
+    }
+  }
+  .purple {
+    .text {
+    background: $purple;
+    }
+    &:after {
+      background: $purple;
+    }
+  }
+}
+.btn {
+  width: 240px;
+  height: 46px;
+  border: 1px solid #125AAA;
+  border-radius: 23px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin: 33px auto 0;
+  span {
+    font-size: 18px;
+  }
+}
+
+</style>

src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="potential-people">
+    <div class="potential-people-item">
+      <div class="icon">
+        <img src="@/assets/images/manyidu/qz_wjj.png" alt="">
+      </div>
+      <div class="txt">
+        事件未解决 <br>
+        上报人数
+      </div>
+      <div class="num"><span class="orange">78</span>人</div>
+    </div>
+    <div class="potential-people-item">
+      <div class="icon">
+        <img src="@/assets/images/manyidu/qz_wmz.png" alt="">
+      </div>
+      <div class="txt">
+        需求未满足 <br>
+        人数
+      </div>
+      <div class="num"><span class="green">128</span>人</div>
+    </div>
+    <div class="potential-people-item">
+      <div class="icon">
+        <img src="@/assets/images/manyidu/qz_wx.png" alt="">
+      </div>
+      <div class="txt">
+        应享未享 <br>
+        服务人数
+      </div>
+      <div class="num"><span class="light">527</span>人</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PotentialPeople"
+}
+</script>
+
+<style scoped lang="scss">
+.potential-people {
+  padding: 16px 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .potential-people-item {
+    margin: 14px;
+    text-align: center;
+    flex: 1;
+    border: 1px solid rgba(28, 67, 111, 0.22);
+    background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31,121,255,0) 100%);
+    padding: 26px 0 31px;
+    .icon {
+      width: 86px;
+      height: 86px;
+      margin: 0 auto;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .txt {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A3B9DA;
+      line-height: 24px;
+      margin: 11px 0 22px;
+    }
+
+    .num {
+      font-size: 14px;
+      font-weight: 500;
+      color: #A3B9DA;
+
+      span {
+        font-size: 32px;
+        font-weight: bold;
+        font-style: italic;
+      }
+
+    }
+  }
+}
+
+.orange {
+  color: #FFB73C;
+}
+
+.green {
+  color: #08EBAE;
+}
+
+.light {
+  color: #7FCEFF;
+}
+
+</style>

src/views/dataBoard/satisfactionEval/modules/RiskStatistics/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="number-list">
+      <div class="number-item">
+        <div class="img">
+          <img src="@/assets/images/manyidu/hf_ts.png" alt="">
+        </div>
+        <div>
+          <div class="txt">
+            12345热线 <br>
+            投诉人数
+          </div>
+          <div class="num"><span>7</span> 人</div>
+        </div>
+
+      </div>
+      <div class="number-item">
+        <div class="img">
+          <img src="@/assets/images/manyidu/hf_bmy.png" alt="">
+        </div>
+        <div>
+          <div class="txt">
+            省满意度调查 <br>
+            不满意人数
+          </div>
+          <div class="num"><span>7</span> 人</div>
+        </div>
+
+      </div>
+      <div class="number-item">
+        <div class="img">
+          <img src="@/assets/images/manyidu/hf_zpbmy.png" alt="">
+        </div>
+        <div>
+          <div class="txt">
+            社区满意度自评 <br>
+            不满意人数
+          </div>
+          <div class="num"><span>7</span> 人</div>
+        </div>
+      </div>
+    </div>
+    <div class="number-list2">
+      <div class="number-item">
+        <div class="txt">
+          本月回访 <br>
+          次数
+        </div>
+        <div class="num"><span class="grey">112</span> 人</div>
+      </div>
+      <div class="number-item">
+        <div class="txt">
+          本月回访消除 <br>
+          风险人员数
+        </div>
+        <div class="num"><span class="green">112</span> 人</div>
+      </div>
+      <div class="number-item">
+        <div class="txt">
+          累计回访 <br>
+          次数
+        </div>
+        <div class="num"><span class="purple">112</span> 人</div>
+      </div>
+      <div class="number-item">
+        <div class="txt">
+          累计回访消除 <br>
+          风险人员数
+        </div>
+        <div class="num"><span class="blue">112</span> 人</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RiskStatistics"
+}
+</script>
+
+<style scoped lang="scss">
+.number-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 40px 0;
+  padding: 0 15px 0 8px;
+
+  .number-item {
+    display: flex;
+
+    .image {
+      width: 98px;
+      height: 70px;
+    }
+
+    .txt {
+      font-size: 16px;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 24px;
+      margin-bottom: 22px;
+    }
+
+    .num {
+      font-size: 14px;
+      font-weight: 500;
+      color: #A3B9DA;
+
+      span {
+        font-size: 32px;
+        font-weight: bold;
+        font-style: italic;
+        color: #3AB7FF;
+      }
+    }
+  }
+}
+
+.number-list2 {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30px 39px;
+  .number-item {
+    .txt {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A3B9DA;
+      line-height: 24px;
+      margin-bottom: 16px;
+    }
+    .num {
+      font-size: 14px;
+      font-weight: 500;
+      color: #A3B9DA;
+
+      span {
+        font-size: 32px;
+        font-weight: bold;
+        font-style: italic;
+      }
+    }
+  }
+}
+.grey {
+  color: #78C4F3;
+}
+.green {
+  color: #08EBAE;
+}
+.purple {
+  color: #A761FD;
+}
+.blue {
+  color: #356EFF;
+}
+</style>

src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="self-trend">
+    <div class="screen">
+      <Tabs v-model="trendType" :list="trendTypeList" @changeVal="trendTypeChange"/>
+    </div>
+    <div id="selfTrendChart" style="height: 243px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "SelfTrend",
+  components: {Tabs},
+  data() {
+    return {
+      trendType: 1,
+      trendTypeList: [{
+        label: '不满意事项走势',
+        value: 1
+
+      }, {
+        label: '社区自查结果走势',
+        value: 2
+
+      }],
+    }
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    trendTypeChange(data) {
+
+    },
+    initCharts() {
+      let div = document.getElementById('selfTrendChart');
+      this.myChart = echarts.init(div);
+
+      let xData = ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09'];
+      let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49];
+      let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20];
+      let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100];
+      const max = Math.max(...tq1, ...tq2, ...tq3)
+
+      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+      var option = {
+        title: {
+          show: false,
+          text: '',
+          x: 'center',
+          top: '15px',
+          textStyle: {
+            color: '#333333',
+            fontWeight: 500,
+            fontSize: 18,
+          },
+        },
+
+        legend: {
+          // icon: 'circle',
+          data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'],
+          itemGap: 20,
+          itemWidth: 16,
+          itemHeight: 6,
+          x: 'right',
+          top: '3%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            // padding:[0, 10, 0, 10],
+          }
+        },
+        grid: {
+          top: '18%',
+          left: '2%',
+          right: '4%',
+          bottom: '8%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#323c41'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              align: 'center',
+              rotate: '40',
+              margin: '25',
+              textStyle: {
+                fontSize: 12,
+                color: '#A3B9DA'
+              }
+            },
+            boundaryGap: true,
+            data: xData,
+          },
+        ],
+
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位：人',
+            nameLocation: 'end',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(4,187,255,0.18)',
+                type: 'dashed'
+              },
+            },
+            nameTextStyle: {
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              },
+              align: 'center'
+            },
+            axisLabel: {
+              show: true,
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }
+
+        ],
+        series: [
+          {
+            name: '12345投诉事件数',
+            type: 'line',
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#F95619',
+              },
+            },
+            label: {
+              show: false,
+              position: 'top',
+              textStyle: {
+                color: '#F95619',
+              },
+            },
+            itemStyle: {
+              color: '#F95619',
+              borderColor: '#F95619',
+              borderWidth: 2,
+            },
+            data: tq1,
+          },
+          {
+            name: '省调查不满意数',
+            type: 'line',
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#F9E066',
+              },
+            },
+            label: {
+              show: false,
+              position: 'top',
+              textStyle: {
+                color: '#F9E066',
+              },
+            },
+            itemStyle: {
+              color: '#F9E066',
+              borderColor: '#F9E066',
+              borderWidth: 2,
+            },
+            data: tq2, //data.values
+          },
+          {
+            name: '社区自查不满意数',
+            type: 'line',
+            yIndex: 0,
+            showAllSymbol: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                color: '#25F0F6',
+              },
+            },
+            label: {
+              show: false,
+              position: 'top',
+              textStyle: {
+                color: '#25F0F6',
+              },
+            },
+            itemStyle: {
+              color: '#25F0F6',
+              borderColor: '#25F0F6',
+              borderWidth: 2,
+            },
+            data: tq3, //data.values
+          },
+          {
+            // name: '占位背景',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                show: true,
+                color: 'rgba(89,130,194,0.12)',
+              },
+            },
+            silent: true,
+            barWidth: '50%',
+            barGap: 0,
+            data: barArray,
+            animation: false,
+          },
+        ],
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => this.myChart.resize());
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.self-trend {
+  padding: 16px 16px;
+}
+</style>

src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="types-dissatisfaction">
+    <div class="screen">
+    <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
+    <el-select v-model="typeCondition" placeholder="请选择" class="select">
+      <el-option
+          v-for="item in typeConditionList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+      </el-option>
+    </el-select>
+    </div>
+    <div id="typeConditionChart" style="height: 542px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "TypesOfDissatisfaction",
+  components: {Tabs},
+  data() {
+    return {
+      resultType: 1,
+      resultTypeList: [{
+        label: ' 按省调查/社区自查结果',
+        value: 1
+
+      }, {
+        label: '按12345热线投诉结果',
+        value: 2
+
+      }],
+      typeCondition: 1,
+      typeConditionList: [
+        {
+          label: '本月',
+          value: 1
+        }, {
+          label: '上月',
+          value: 2
+        }, {
+          label: '近3月',
+          value: 3
+        }, {
+          label: '近半年',
+          value: 4
+        }, {
+          label: '近1年',
+          value: 5
+        },
+      ],
+
+    }
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    resultTypeChange(data) {
+
+    },
+    initCharts() {
+      let div = document.getElementById('typeConditionChart');
+      this.myChart = echarts.init(div);
+      var dataname = ['老有所养', '社会治安', '生态环境', '体育设施', '社会救助', '文化设施', '基础教育', '病有所医']
+      var datamax = [20, 20, 20, 20, 20, 20, 20, 20]
+      var datavaule = [10, 16, 18, 15, 12, 18, 18, 18]
+      var datavaule2 = [12, 17, 20, 16, 13, 19, 19, 19]
+      var indicator = []
+      for (var i = 0; i < dataname.length; i++) {
+        indicator.push({
+          name: dataname[i],
+          max: datamax[i],
+        })
+      }
+
+      function contains(arrays, obj) {
+        var i = arrays.length;
+        while (i--) {
+          if (arrays[i] === obj) {
+            return i;
+          }
+        }
+        return false;
+      }
+
+      var option = {
+        tooltip: {
+          show: false,
+          trigger: "item",
+        },
+        legend: {
+          show: true,
+          textStyle: {
+            color: '#ffffff',
+            rich: {
+              name: {
+                fontSize: 14,
+                lineHeight: 22,
+                padding: [24, 0, 0, 0]
+              },
+            }
+          },
+          itemWidth: 6,
+          itemHeight: 6,
+          y: 0,
+          x: 'right',
+          formatter: name => {
+            return `{name|${name}}`
+          },
+          data: ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数'],
+        },
+        radar: {
+          center: ["50%", "60%"],
+          radius: "50%",
+          startAngle: 90,
+          splitNumber: 5,
+          /*        splitArea: {
+                      areaStyle: {
+                          color: [
+                              'rgba(0,96,208, 0.1)', 'rgba(0,96,208, 0.2)',
+                              'rgba(0,96,208, 0.4)', 'rgba(0,96,208, 0.6)',
+                              'rgba(0,96,208, 0.8)', 'rgba(0,96,208, 1)'
+                          ].reverse()
+                      }
+                  },*/
+          splitArea: {
+            areaStyle: {
+              color: 'transparent'
+            }
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "transparent"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#527AA8"
+            }
+          },
+          name: {
+            textStyle: {
+              color: '#ffffff',
+              fontSize: '16',
+              borderRadius: 3,
+              padding: [3, 5]
+            }
+          },
+          indicator: indicator
+        },
+
+        series: [{
+          name: "省满意度调查\n各项不满意人数",
+          type: "radar",
+          symbol: "circle",
+          symbolSize: 7,
+          areaStyle: {
+            normal: {
+              color: 'rgba(58,128,231,0.36)',
+            }
+          },
+          itemStyle: {
+            color: '#3A80E7',
+            borderColor: '#3AB7FF',
+            borderWidth: 1,
+          },
+          lineStyle: {
+            normal: {
+              color: "#3AB7FF",
+              width: 2
+            }
+          },
+          data: [datavaule]
+        }, {
+          name: "社区满意度自查\n各项不满意人数",
+          type: "radar",
+          symbol: "circle",
+          symbolSize: 7,
+          areaStyle: {
+            normal: {
+              color: 'rgba(170, 216, 255, 0)',
+            }
+          },
+          itemStyle: {
+            color: '#EB8E16',
+            borderColor: '#EF9700',
+            borderWidth: 1,
+          },
+          lineStyle: {
+            normal: {
+              color: "#EF9700",
+              width: 2
+            }
+          },
+          data: [datavaule2]
+        }]
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => this.myChart.resize());
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.types-dissatisfaction {
+  padding: 16px 32px;
+}
+.screen {
+  display: flex;
+  justify-content: space-between;
+  /deep/ .el-input__inner {
+    width: 90px!important;
+    height: 24px!important;
+    background: #021C49!important;
+    border: 1px solid #125AAA!important;
+    border-radius: 12px!important;
+    color: #A0CDFF;
+  }
+  /deep/ .el-input__icon {
+    line-height: 24px!important;
+    color: #A0CDFF;
+  }
+}
+</style>