新增满意度一些页面和组件

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

@@ -45,10 +45,13 @@ export default {
     padding: 10px 11px;
     font-size: 14px;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #96B1CE;
+    min-width: 120px;
     background: url("@/assets/images/manyidu/tab.png") repeat-x top left;
     margin-right: 4px;
+    text-align: center;
     &.cur {
+      color: #FFFFFF;
       background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left;
     }
   }

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail.vue

@@ -1,16 +1,53 @@
 <template>
   <div>
+    <div class="breadcrumb">
       <Breadcrumb :list="breadcrumbList"/>
+    </div>
+    <el-row>
+      <el-col :span="10">
+        <div class="sub-title">事项详情</div>
+        <MatterDetails/>
 
+        <div class="sub-title">家庭关系</div>
+        <Family/>
+      </el-col>
+      <el-col :span="13" :offset="1">
+        <div class="sub-title">居民各项业务记录</div>
+        <BusinessRecords/>
+        <el-row>
+          <el-col :span="12">
+            <div class="sub-title">享受服务次数统计</div>
+            <EnjoyService/>
+          </el-col>
+          <el-col :span="11" :offset="1">
+            <div class="sub-title">积分记录</div>
+            <PointsRecord/>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
 
   </div>
 </template>
 
 <script>
 import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
+import MatterDetails from "./modules/MatterDetails"
+import Family from "./modules/Family"
+import BusinessRecords from "./modules/BusinessRecords"
+import EnjoyService from "./modules/EnjoyService"
+import PointsRecord from "./modules/PointsRecord"
+
 export default {
   name: "dissatisfiedPersonnelDetail",
-  components: {Breadcrumb},
+  components: {
+    Breadcrumb,
+    MatterDetails,
+    Family,
+    BusinessRecords,
+    EnjoyService,
+    PointsRecord
+  },
   data() {
     return {
       breadcrumbList: [{
@@ -34,6 +71,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-
+.sub-title {
+  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 22px;
+  padding-left: 26px;
+  margin-bottom: 20px;
+}
+.breadcrumb {
+  margin-bottom: 25px;
+}
 </style>

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/index.vue

@@ -133,7 +133,6 @@ export default {
 
     },
     handleView({name,id}) {
-      this.$router.push('/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name=张三&id=1')
     }
   }
 }

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/BusinessRecords.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="business-records">
+    <Tabs v-model="type" :list="typeList" @changeVal="typeChange"/>
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column
+            label="序号"
+            type="index"
+            width="80"/>
+        <el-table-column
+            label="评价周期"
+            prop="key"
+            width=""/>
+        <el-table-column
+            label="姓名"
+            prop="key"
+            width=""/>
+        <el-table-column
+            label="电话"
+            prop="key"
+            width=""/>
+        <el-table-column
+            label="不满意类型"
+            prop="key"
+            width=""/>
+        <el-table-column
+            label="不满意原因"
+            prop="key"
+            width=""/>
+        <el-table-column label="操作" width="90" align="center">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "BusinessRecords",
+  components: {Tabs},
+  data() {
+    return {
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+      type: 1,
+      typeList: [{
+        label: ' 12345投诉',
+        value: 1
+      }, {
+        label: '省满意度调查',
+        value: 2
+      }, {
+        label: '社区满意度自查',
+        value: 3
+      }, {
+        label: '事件',
+        value: 4
+      }, {
+        label: '需求',
+        value: 5
+      }, {
+        label: '服务',
+        value: 6
+      }, {
+        label: '回访记录',
+        value: 7
+      }],
+      list: [{},{},{},{},{}]
+    }
+  },
+  methods: {
+    typeChange() {
+
+    },
+    getList() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td, /deep/ .el-table th, /deep/ .el-table tr {
+    padding: 14px !important;
+    border:none!important;
+    min-height: 52px;
+
+  }
+  /deep/ .el-table td, /deep/ .el-table th {
+    background: none!important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #FFFFFF;
+    text-shadow: 1px 2px 4px rgba(10,32,60,0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+      background: rgba(14, 56, 115, 0.4);
+    }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #A3B9DA !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none!important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none!important;
+  }
+}
+</style>

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/EnjoyService.vue

@@ -0,0 +1,188 @@
+<template>
+  <div className="event-statistics">
+    <div id="enjoyServiceChart" style="height: 360px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EnjoyService",
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    initCharts() {
+      let div = document.getElementById('enjoyServiceChart');
+      this.myChart = echarts.init(div);
+
+      let xData = ['岗位找人', '技能找人', '温暖找人', '服务找人'];
+      let tq = [300, 90, 48, 39];
+      const max = Math.max(...tq)
+
+      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 = ''
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].seriesName != "") {
+                res += '<p>' + params[0].name + ':' + params[i].data + '</p>'
+              }
+            }
+            return res;
+          },
+        },
+        grid: {
+          top: '0',
+          left: '1%',
+          right: '2%',
+          bottom: '0',
+          containLabel: true
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#323c41'
+              }
+            },
+            axisLabel: {
+              align: 'right',
+              textStyle: {
+                fontSize: 12,
+                color: '#A3B9DA'
+              }
+            },
+            boundaryGap: true,
+            data: xData,
+          }, {
+            type: 'category',
+            data: xData,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {show: false},
+            axisLabel: {
+              show: false,
+            },
+            boundaryGap: true,
+
+          }
+        ],
+
+        xAxis: [
+          {
+            type: 'value',
+            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: [
+          {
+            type: 'bar',
+            barWidth: 16,
+            itemStyle: {
+              // lenged文本
+              opacity: 1, // 这个是 透明度
+              color: new echarts.graphic.LinearGradient(
+                  1,
+                  0,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: '#6EDDFE' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#0B1F57' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq, //data.values
+          },
+          {
+            name: '',
+            type: 'bar',
+
+            barWidth: 66,
+            barGap: '-60%',
+            data: barArray,
+            itemStyle: {
+              normal: {
+                color: 'rgba(89,130,194,0.12)'
+              }
+            },
+            zlevel: -1,
+            yAxisIndex: 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/dissatisfiedPersonnel/modules/Family.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="family">
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Family"
+}
+</script>
+
+<style scoped lang="scss">
+.family {
+  width: 464px;
+  height: 340px;
+  background: url('@/assets/images/manyidu/gx_bg.png') no-repeat center;
+  position: relative;
+  margin: 40px auto;
+}
+.tag {
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 22px;
+  padding: 18px 24px;
+  box-sizing: border-box;
+  position: absolute;
+  &:nth-of-type(1),
+  &:nth-of-type(2) {
+    background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+    width: 180px;
+    height: 100px;
+  }
+  &:nth-of-type(3),
+  &:nth-of-type(4) {
+    background: url("@/assets/images/manyidu/gx_small.png") no-repeat center;
+    width: 180px;
+    height: 70px;
+    padding: 15px 24px;
+  }
+  &:nth-of-type(1) {
+    left: -98px;
+    top: 34px;
+  }
+  &:nth-of-type(2) {
+    right: -68px;
+    top: 34px;
+  }
+  &:nth-of-type(3) {
+    left: -91px;
+    bottom: 41px;
+  }
+  &:nth-of-type(4) {
+    right: -44px;
+    bottom: 41px;
+  }
+}
+</style>

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/MatterDetails.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="matter-details">
+    <div class="user-img">
+      <img src="@/assets/images/manyidu/dn_bg1.png" alt="">
+    </div>
+    <div class="tags">
+      <div class="tag red">满意度风险人员</div>
+      <div class="tag small">与子女同住</div>
+      <div class="tag">第三网格</div>
+      <div class="tag small">入户一致</div>
+      <div class="tag">13343999999</div>
+      <div class="tag">四季景园1号楼1单元101</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MatterDetails"
+}
+</script>
+
+<style scoped lang="scss">
+.matter-details {
+  width: 607px;
+  height: 372px;
+  background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom;
+  position: relative;
+  margin: 12px auto 60px;
+}
+.user-img {
+  position: absolute;
+  left: calc(50% - 87px);
+  top: calc(50% - 37px);
+}
+.tag {
+  position: absolute;
+  background: url("@/assets/images/manyidu/dn_big.png") center no-repeat;
+  width: 108px;
+  height: 107px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 16px;
+  box-sizing: border-box;
+  padding: 24px;
+  text-align: center;
+  word-break: break-all;
+  &.small {
+    width: 89px;
+    height: 89px;
+    background: url("@/assets/images/manyidu/dn_small.png") center no-repeat;
+    padding: 16px;
+  }
+  &.red {
+    background: url("@/assets/images/manyidu/dn_red.png") center no-repeat;
+    color: #FE0000;
+  }
+  &:nth-of-type(1) {
+    left: 0;
+    bottom: 15px;
+  }
+
+  &:nth-of-type(2) {
+    left: 42px;
+    bottom: 185px;
+  }
+
+  &:nth-of-type(3) {
+    left: 194px;
+    bottom: 245px;
+  }
+
+  &:nth-of-type(4) {
+    left: 384px;
+    bottom: 240px;
+  }
+
+  &:nth-of-type(5) {
+    left: 499px;
+    bottom: 157px;
+  }
+
+  &:nth-of-type(6) {
+    left: 453px;
+    bottom: 10px;
+  }
+}
+
+</style>

src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/PointsRecord.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="enjoy-service">
+      <div class="enjoy-service-item" v-for="(item,index) in 5">
+        <div class="num">+10</div>
+        <div class="info">
+          <div class="title">便民服务-配餐服务</div>
+          <div class="time">2023-07-15 15:30:30</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PointsRecord"
+}
+</script>
+
+<style scoped lang="scss">
+
+.enjoy-service {
+  padding-left: 26px;
+}
+.enjoy-service-item {
+  color: #FFFFFF;
+  display: flex;
+  padding: 14px 16px 14px;
+  margin-bottom: 8px;
+  background: #07266B;
+  .num {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+  .info {
+    font-size: 14px;
+    margin-left: 40px;
+    .title {
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+    .time {
+      font-weight: 400;
+      color: #A3B9DA;
+    }
+  }
+}
+
+</style>