新增满意度子页面

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

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(item,index) in list" :to="item.path" :key="index">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Breadcrumb",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.breadcrumb {
+  background: url("@/assets/images/manyidu/breadcrumb_bg.png") no-repeat left top;
+  height: 50px;
+  color: #fff;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+
+  /deep/ .el-breadcrumb__inner {
+    color: #fff!important;
+
+    &.is-link {
+      color: #A3B9DA!important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+        :background="background"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :pager-count="pagerCount"
+        :total="total"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, prev, pager, next, jumper, sizes'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  padding: 32px 16px;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  /deep/ .el-pagination__total {
+    position: absolute;
+    left: 16px;
+    top: 32px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination__jump {
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .btn-next,
+  /deep/ .el-pagination.is-background .btn-prev,
+  /deep/ .el-pagination.is-background .el-pager li {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-input__inner {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: #1A95FF;
+    border-radius: 2px;
+    color: #FFFFFF!important;
+  }
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="title">
+  <div class="title" :class="noBg?'no-bg':''">
     <span class="text">
     <span class="txt">{{ text }}</span>
     <span class="text-shadow">{{ text }}</span>
@@ -15,6 +15,10 @@ export default {
     text: {
       type: String,
       default: ''
+    },
+    noBg: {
+      type: Boolean,
+      default: false
     }
   }
 }
@@ -52,7 +56,8 @@ export default {
       white-space: nowrap;
     }
   }
-
+}
-
+.no-bg {
+  background: none;
 }
 </style>

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

@@ -0,0 +1,201 @@
+<template>
+  <el-dialog
+      append-to-body
+      class="dissatisfied-detail"
+      title=""
+      :visible.sync="dialogVisible"
+      width="1118px"
+      :before-close="handleClose">
+    <div class="content">
+      <div class="main-title">
+        <Title text="不满意事项详情" noBg/>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="10">
+          <div class="sub-title">事项详情</div>
+          <div class="detail">
+            <p>
+              小区垃圾急需要处理，垃圾桶旁边垃圾堆积严重，现在已经影响居民的日常生活和出行，望有关部门能够重视。
+            </p>
+            <ul>
+              <li><span>事项来源：</span>省满意度调查</li>
+              <li><span>事项类型：</span>生态环境</li>
+              <li><span>所属月份：</span>2023-09</li>
+              <li><span>所属社区：</span>XXX社区</li>
+              <li><span>提交人：</span>张**</li>
+              <li><span>提交人电话：</span>133</li>
+            </ul>
+          </div>
+        </el-col>
+        <el-col :span="10" :offset="4">
+          <div class="sub-title">历史不满意事项</div>
+          <div class="number-list">
+            <div class="number-item">
+              <div class="text">12345投诉</div>
+              <div class="num">
+                <span class="orange">39</span>
+                人
+              </div>
+            </div>
+            <div class="number-item">
+              <div class="text">省满意度调查</div>
+              <div class="num">
+                <span class="green">102</span>
+                人
+              </div>
+            </div>
+            <div class="number-item">
+              <div class="text">社区满意度自评</div>
+              <div class="num">
+                <span class="light">273</span>
+                人
+              </div>
+            </div>
+          </div>
+          <div class="sub-title">回访记录</div>
+          <div class="log">
+            <div class="log-item" v-for="(item,index) in 3">
+              <div class="name">杨建国（网格长）</div>
+              <div>2023-08-17</div>
+              <div>上门回访 <i class="el-icon-arrow-right"></i></div>
+            </div>
+          </div>
+
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Title from "@/views/dataBoard/satisfactionEval/components/Title"
+
+export default {
+  name: "DissatisfiedDetail",
+  components: {Title},
+  data() {
+    return {
+      dialogVisible: false
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.dialogVisible = false
+    },
+    open() {
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dissatisfied-detail {
+  /deep/ .el-dialog {
+    background: url("@/assets/images/manyidu/dialog_bg.png") no-repeat left top;
+    width: 1118px;
+    height: 506px;
+    color: #fff;
+
+    .el-dialog__header {
+      border-bottom: none !important;
+    }
+
+    .el-dialog__headerbtn {
+      top: 30px;
+      right: 30px;
+
+      .el-dialog__close {
+        color: #fff;
+      }
+    }
+  }
+
+  .content {
+    padding: 0 64px;
+  }
+
+  .main-title {
+    margin-bottom: 40px;
+  }
+
+  .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;
+  }
+
+  .detail {
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 32px;
+      margin: 0 0 10px;
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+    li {
+      color: #FFFFFF;
+      line-height: 28px;
+      span {
+        color: #9CB4D3
+      }
+    }
+  }
+
+  .number-list {
+    padding-left: 26px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    .text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A3B9DA;
+      margin-bottom: 17px;
+    }
+    .num {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A3B9DA;
+      span {
+        font-size: 32px;
+        font-weight: bold;
+        font-style: italic;
+      }
+    }
+  }
+  .orange {
+    color: #FFB73C;
+  }
+  .green {
+    color: #08EBAE;
+  }
+  .light {
+    color: #7FCEFF;
+  }
+  .log {
+    padding-left: 26px;
+    .log-item {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      color: #fff;
+      background: url("@/assets/images/manyidu/hf_line.png") bottom center no-repeat;
+      padding: 9px 0;
+      .name {
+        flex: 0 0 33.33333%;
+      }
+    }
+  }
+
+}
+</style>

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

@@ -1,13 +1,207 @@
 <template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="screen">
+      <el-form :model="queryParams" inline>
 
+        <el-select v-model="queryParams.month" size="small" placeholder="按月度">
+          <el-option
+              v-for="item in monthOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+
+        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+          <el-option
+              v-for="item in monthOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+
+        <el-select v-model="queryParams.matterSource" size="small" placeholder="按不满意事项来源">
+          <el-option
+              v-for="item in monthOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+
+        <el-select v-model="queryParams.matterType" size="small" placeholder="按不满意事项类型">
+          <el-option
+              v-for="item in monthOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+        <el-input v-model="queryParams.name" size="small" placeholder="按人员姓名"></el-input>
+        <el-input v-model="queryParams.tel" size="small" placeholder="按人员电话"></el-input>
+        <el-button size="small" class="btn" type="primary">查询</el-button>
+      </el-form>
+    </div>
+
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column
+            label="序号"
+            type="index"
+            width="80"/>
+
+        <el-table-column
+            prop="name"
+            label="月度"
+            width="114"/>
+
+        <el-table-column
+            prop="address"
+            width="118"
+            label="所属社区"/>
+
+        <el-table-column
+            prop="address"
+            width="168"
+            label="事项来源">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118"
+            label="事项类型"/>
+
+        <el-table-column
+            prop="address"
+            show-overflow-tooltip
+            label="事项描述"/>
+
+        <el-table-column
+            prop="address"
+            width="197"
+            label="提交时间"/>
+
+        <el-table-column
+            prop="address"
+            width="119"
+            label="姓名"/>
+
+        <el-table-column
+            prop="address"
+            width="153"
+            label="电话"/>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="是否完成">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="是否回访">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="消除风险">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <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>
+    </div>
+
+    <Pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <DissatisfiedDetail ref="detail"/>
+  </div>
 </template>
 
 <script>
+import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
+import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination'
+import DissatisfiedDetail from './detail.vue'
+
 export default {
-  name: "dissatisfied"
+  name: "dissatisfied",
+  components: {Breadcrumb, DissatisfiedDetail, Pagination},
+  data() {
+    return {
+      queryParams: {
+        month: '',
+        org: '',
+        matterSource: '',
+        matterType: '',
+        name: '',
+        tel: '',
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      breadcrumbList: [{
+        path: '/dataBoard/satisfactionEval/index',
+        name: '满意度评价'
+      }, {
+        path: '',
+        name: '不满意事项列表'
+      }],
+      monthOptions: new Array(12).fill(0).map((_, index) => {
+        return {label: (index - 0 + 1) + '月', value: (index - 0 + 1)}
+      }),
+      list: [{}, {}, {}]
+    }
+  },
+  methods: {
+    getList() {
+
+    },
+    handleView() {
+      this.$refs.detail.open()
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
 
+  .el-select, .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      background: none;
+      border: none;
+      color: #fff;
+    }
+  }
+
+  .btn {
+    margin-left: 46px;
+    height: 32px;
+  }
+}
 </style>

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

@@ -1,10 +1,36 @@
 <template>
+<div>
+  <Breadcrumb :list="breadcrumbList"/>
 
+
+</div>
 </template>
 
 <script>
+import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
 export default {
-  name: "dissatisfiedPersonnelDetail"
+  name: "dissatisfiedPersonnelDetail",
+  components: {Breadcrumb},
+  data() {
+    return {
+      breadcrumbList: [{
+        path: '/dataBoard/satisfactionEval/index',
+        name: '满意度评价'
+      }, {
+        path: '/dataBoard/satisfactionEval/dissatisfiedPersonnel',
+        name: '画像匹配同类不满意人员'
+      }, {
+        path: '',
+        name: ''
+      }],
+    }
+  },
+  mounted() {
+    console.log(this.breadcrumbList,this.$route)
+
+    this.$set(this.breadcrumbList[2],'name',this.$route.query.name)
+    this.breadcrumbList[2].name = this.$route.query.name
+  }
 }
 </script>
 

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

@@ -1,13 +1,169 @@
 <template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="main-title">
+      <Title text="“基础教育”画像匹配同类不满意人员" noBg/>
+    </div>
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column
+            label="序号"
+            type="index"
+            width="80"/>
 
+        <el-table-column
+            prop="name"
+            label="月度"
+            width="114"/>
+
+        <el-table-column
+            prop="address"
+            width="118"
+            label="所属社区"/>
+
+        <el-table-column
+            prop="address"
+            width="168"
+            label="事项来源">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118"
+            label="事项类型"/>
+
+        <el-table-column
+            prop="address"
+            show-overflow-tooltip
+            label="事项描述"/>
+
+        <el-table-column
+            prop="address"
+            width="197"
+            label="提交时间"/>
+
+        <el-table-column
+            prop="address"
+            width="119"
+            label="姓名"/>
+
+        <el-table-column
+            prop="address"
+            width="153"
+            label="电话"/>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="是否完成">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="是否回访">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <el-table-column
+            prop="address"
+            width="118px"
+            label="消除风险">
+          <template slot-scope="data"></template>
+        </el-table-column>
+
+        <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>
+    </div>
+
+    <Pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+  </div>
 </template>
 
 <script>
+import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
+import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination'
+import Title from "@/views/dataBoard/satisfactionEval/components/Title"
+
+
 export default {
-  name: "dissatisfiedPersonnel"
+  name: "dissatisfied",
+  components: {Breadcrumb, Pagination,Title},
+  data() {
+    return {
+      queryParams: {
+        month: '',
+        org: '',
+        matterSource: '',
+        matterType: '',
+        name: '',
+        tel: '',
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      breadcrumbList: [{
+        path: '/dataBoard/satisfactionEval/index',
+        name: '满意度评价'
+      }, {
+        path: '',
+        name: '画像匹配同类不满意人员'
+      }],
+      monthOptions: new Array(12).fill(0).map((_, index) => {
+        return {label: (index - 0 + 1) + '月', value: (index - 0 + 1)}
+      }),
+      list: [{}, {}, {}]
+    }
+  },
+  methods: {
+    getList() {
+
+    },
+    handleView({name,id}) {
+      this.$router.push('/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name=张三&id=1')
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "@/assets/scss/dataBoard/table.scss";
 
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select, .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      background: none;
+      border: none;
+      color: #fff;
+    }
+  }
+
+  .btn {
+    margin-left: 46px;
+    height: 32px;
+  }
+}
+.main-title {
+  margin: 25px 0 32px;
+}
 </style>

src/views/dataBoard/satisfactionEval/index.vue

@@ -4,7 +4,7 @@
       <el-col :span="8">
         <div class="bg">
           <Title text="不满意事项类型分析">
-            <div class="more">
+            <div class="more" @click="goToPage('/dataBoard/satisfactionEval/dissatisfied')">
             查看详细 <i class="el-icon-arrow-right"></i>
             </div>
           </Title>
@@ -68,6 +68,11 @@ export default {
   data() {
     return {}
   },
+  methods: {
+    goToPage(url) {
+      this.$router.push(url)
+    }
+  }
 
 }
 </script>
@@ -81,6 +86,7 @@ export default {
   font-size: 14px;
   font-weight: 400;
   color: #A0CDFF;
+  cursor: pointer;
 }
 
 .bg2 {

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

@@ -23,7 +23,7 @@
       <div class="tag purple"><div class="text">男</div></div>
     </div>
 
-    <div class="btn">
+    <div class="btn" @click="$router.push('/dataBoard/satisfactionEval/dissatisfiedPersonnel')">
       <div>按画像匹配到同类：<span> <b>372</b>人</span></div>
       <i class="el-icon-arrow-right"></i>
     </div>
@@ -259,6 +259,7 @@ $purple: #6642fd;
   justify-content: space-between;
   padding: 0 20px;
   margin: 33px auto 0;
+  cursor: pointer;
   span {
     font-size: 18px;
   }