From bc296e0cb90d67ab71e18aeab893a2cf154fa90f Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 6 Mar 2023 09:06:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B2=E9=9D=96=E7=9F=9B=E7=9B=BE=E8=B0=83?=
 =?UTF-8?q?=E8=A7=A3=E8=BF=81=E7=A7=BB=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/AppReportAiWill/AppReportAtWill.vue   |  65 +++++
 .../app/AppReportAiWill/components/Detail.vue | 271 ++++++++++++++++++
 .../app/AppReportAiWill/components/List.vue   | 126 ++++++++
 3 files changed, 462 insertions(+)
 create mode 100644 project/qujing/app/AppReportAiWill/AppReportAtWill.vue
 create mode 100644 project/qujing/app/AppReportAiWill/components/Detail.vue
 create mode 100644 project/qujing/app/AppReportAiWill/components/List.vue

diff --git a/project/qujing/app/AppReportAiWill/AppReportAtWill.vue b/project/qujing/app/AppReportAiWill/AppReportAtWill.vue
new file mode 100644
index 00000000..ed09578b
--- /dev/null
+++ b/project/qujing/app/AppReportAiWill/AppReportAtWill.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Detail from './components/Detail'
+
+  export default {
+    name: 'AppReportAtWill',
+    label: '矛盾调解',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {}
+      }
+    },
+
+    components: {
+      List,
+      Detail
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/qujing/app/AppReportAiWill/components/Detail.vue b/project/qujing/app/AppReportAiWill/components/Detail.vue
new file mode 100644
index 00000000..4e559a01
--- /dev/null
+++ b/project/qujing/app/AppReportAiWill/components/Detail.vue
@@ -0,0 +1,271 @@
+<template>
+  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
+    <template #title>
+      <ai-title title="矛盾调解详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template #content>
+      <div class="detail-content__wrapper">
+        <ai-card class="detail-content__wrapper--left" title="基础信息">
+          <template #content>
+            <ai-wrapper>
+              <ai-info-item label="上报人员" :value="detail.name"/>
+              <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
+              <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
+              <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
+              <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
+              <ai-info-item label="现场照片" isLine>
+                <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
+              </ai-info-item>
+              <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
+              <ai-info-item label="事件位置" isLine>
+                <div id="map" style="width: 500px; height: 280px;"></div>
+              </ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <div class="rightZone">
+          <ai-card title="办理进度">
+            <template #content>
+              <el-steps direction="vertical" :active="1">
+                <el-step v-for="(item, i) in processList" :key="i"
+                    :title="item.systemExplain" :description="item.doTime">
+                  <template #title>
+                    <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
+                      {{ item.user }}
+                      {{ item.title }}
+                    </h2>
+                  </template>
+                  <template #description>
+                    <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
+                    <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
+                    <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
+                  </template>
+                </el-step>
+              </el-steps>
+            </template>
+          </ai-card>
+        </div>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Detail',
+  props: ['dict', 'instance', 'params'],
+
+  data() {
+    return {
+      isLoading: true,
+      detail: {},
+      processList: []
+    }
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  created() {
+    this.dict.load('clapEventStatus').then(() => {
+      this.getDetail()
+    })
+  },
+
+  methods: {
+    getDetail() {
+      this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
+        params: {id: this.params.id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+          this.processList = res.data.processList.map(item => {
+            item.user = /\$(.+?)\$/g.exec(item.systemExplain)[1]
+            item.title = item.systemExplain.replace(/\$(.+?)\$/g, '')
+
+            return item
+          })
+
+          this.$nextTick(() => {
+            this.initMap()
+          })
+          this.isLoading = false
+        }
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh
+      })
+    },
+
+    onChange(e) {
+      this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
+        if (res.code === 0) {
+          this.form.ruleId = ''
+          this.eventList = res.data.records
+        }
+      })
+    },
+
+    initMap() {
+      let {lng, lat} = this.detail
+      let center = [lng, lat]
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0'
+      }).then(AMap => {
+        let map = new AMap.Map('map', {
+          center,
+          zoom: 14
+        })
+        let marker = new AMap.Marker({
+          position: new AMap.LngLat(lng, lat),
+          title: this.detail.address
+        })
+        map.add(marker)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reportAtWillDetail {
+  height: 100%;
+
+  .el-steps {
+    :deep( .el-step__icon ) {
+      font-size: 12px;
+      color: #555555;
+      border-color: #d0d4dc;
+    }
+
+    :deep( .el-step__head.is-finish ) {
+      .el-step__icon.is-text {
+        border: none;
+        color: #fff;
+        font-size: 12px;
+        background: #2266ff;
+      }
+    }
+
+    :deep( .el-step__line ) {
+      background-color: #d0d4dc;
+    }
+  }
+
+  .imgs {
+    font-size: 0;
+
+    img {
+      width: 108px;
+      height: 108px;
+      margin-right: 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  :deep( .el-step__head.is-process ) {
+    color: #555;
+    border-color: #555;
+  }
+
+  :deep( .is-finish h2 ) {
+    color: #2266ff;
+  }
+
+  .step-title {
+    color: #555;
+  }
+
+  .detail-content__wrapper {
+    display: flex;
+    width: 100%;
+
+    .detail-content__wrapper--left {
+      flex: 1;
+      margin-right: 20px;
+    }
+  }
+
+  :deep( .ai-detail__content ) {
+    background: #f3f6f9;
+
+    .ai-detail__content--wrapper {
+      display: flex;
+      gap: 16px;
+      width: 100%;
+      max-width: 100%;
+      padding: 16px;
+      box-sizing: border-box;
+
+      & > .el-card {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .rightZone {
+        width: 400px;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+    }
+  }
+
+  :deep( .el-card ) {
+    .el-card__header {
+      padding: 12px 16px;
+      font-weight: bold;
+    }
+
+    .el-card__body {
+      padding: 8px;
+    }
+
+    #amap {
+      width: 466px;
+      height: 232px;
+    }
+
+    .el-steps {
+      margin-left: 8px;
+    }
+
+    .imgFormItem > .el-form-item__content {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+
+      &:before {
+        content: none;
+      }
+
+      .el-image__inner {
+        width: 82px;
+        height: 82px;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/qujing/app/AppReportAiWill/components/List.vue b/project/qujing/app/AppReportAiWill/components/List.vue
new file mode 100644
index 00000000..fe5c5cef
--- /dev/null
+++ b/project/qujing/app/AppReportAiWill/components/List.vue
@@ -0,0 +1,126 @@
+<template>
+  <ai-list>
+    <template #title>
+      <ai-title title="矛盾调解" isShowBottomBorder></ai-title>
+    </template>
+    <template #content>
+      <ai-search-bar>
+        <template #left>
+          <ai-select
+              v-model="search.eventStatus"
+              clearable
+              placeholder="处理状态"
+              :selectList="dict.getDict('clapEventStatus')"
+              @change="search.current = 1, getList()">
+          </ai-select>
+        </template>
+        <template #right>
+          <el-input
+              v-model="search.content"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="请输入内容描述"
+              clearable
+              @change="getList"
+              @clear="search.current = 1, search.content = '', getList()"
+              suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table class="mar-t8" :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size"
+                @getList="getList">
+        <el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
+          <div class="table-options" slot-scope="{row}">
+            <el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'List',
+  label: "事件上报",
+  props: {
+    instance: Function,
+    dict: Object
+  },
+  data() {
+    return {
+      userList: [],
+      search: {
+        current: 1,
+        size: 10,
+        eventStatus: '',
+        content: ''
+      },
+      total: 0,
+      tableData: [],
+      content: '',
+      id: ''
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        {prop: 'createTime', label: '上报时间'},
+        {prop: 'content', label: '内容描述', width: '300px'},
+        {prop: 'groupName', label: '事件类型', align: 'center'},
+        {prop: 'girdName', label: '所属网格', align: 'center'},
+        {prop: 'eventStatus', label: '事件状态', align: 'center', dict:"clapEventStatus"},
+        {prop: 'userName', label: '上报人', align: 'center'},
+        {slot: 'options'}
+      ]
+    }
+  },
+
+  created() {
+    this.dict.load('clapEventStatus').then(() => {
+      this.getList()
+    })
+
+    this.getGirdList()
+  },
+
+  methods: {
+    getList() {
+      this.instance.post(`/app/appclapeventinfo/list`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    getGirdList() {
+      // this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`).then(res => {
+      //   if (res.code == 0) {
+      //   }
+      // })
+    },
+
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id: id || ''
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>