更新

src/api/equipment/equipment_passenger.js

@@ -33,10 +33,34 @@ export function deleteByIds(ids) {
   })
 }
 
-export function findDetail(id) {
+export function findDetail(id, orgId) {
   return request({
     url: '/equipment/passenger/findDetail',
     method: 'post',
-    params: { id }
+    params: { id: id, orgId: orgId }
   })
 }
+
+export function qweatherGet(lat, lng) {
+  return request({
+    url: '/qweather/get',
+    method: 'get',
+    params: { lat: lat, lng: lng }
+  })
+}
+
+export function qweatherAir(lat, lng) {
+  return request({
+    url: '/qweather/air',
+    method: 'get',
+    params: { lat: lat, lng: lng }
+  })
+}
+
+export function ambitusRoadConditions(lat, lng) {
+  return request({
+    url: '/qweather/ambitusRoadConditions',
+    method: 'get',
+    params: { lat: lat, lng: lng }
+  })
+}

src/router/index.js

@@ -50,6 +50,13 @@ export const asyncRoutes = [
         hidden: true,
         component: () => import('@/views/equipment/passenger/Detail'),
         meta: { title: '景区客流数据采集系统' }
+      },
+      {
+        path: 'passenger/traffic',
+        name: 'PassengerEquipmentTraffic',
+        hidden: true,
+        component: () => import('@/views/equipment/passenger/traffic'),
+        meta: { title: '景区客流数据采集系统 - 交通路况' }
       }
     ]
   },
@@ -124,14 +131,14 @@ export const asyncRoutes = [
         path: 'file',
         name: 'StatisticsFile',
         component: () => import('@/views/statistics/file'),
-        meta: { title: '多媒体信息管理', authorities: ['upload.file.find'] }
-      },
-      {
-        path: 'media',
-        name: 'BzMedia',
-        component: () => import('@/views/bz/media'),
-        meta: { title: '多媒体资源管理', authorities: ['bz.media'] }
+        meta: { title: '多媒体资源管理', authorities: ['upload.file.find'] }
       },
+      // {
+      //   path: 'media',
+      //   name: 'BzMedia',
+      //   component: () => import('@/views/bz/media'),
+      //   meta: { title: '多媒体资源管理', authorities: ['bz.media'] }
+      // },
       {
         path: 'baseInfo',
         name: 'PlaceBaseInfo',

src/views/equipment/passenger/Detail.vue

@@ -1,21 +1,62 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20" style="height: 200px;font-size: 12px;color: #333333;margin-bottom: 20px">
+    <el-row
+      :gutter="20"
+      style="
+        height: 200px;
+        font-size: 12px;
+        color: #333333;
+        margin-bottom: 20px;
+      "
+    >
       <el-col :span="6">
         <el-card class="card">
           <strong>天气</strong>
-          <span style="color: #999999;margin-left: 34px">03月07日 周一 农历二月初五</span>
+          <span style="color: #999999; margin-left: 34px">
+            {{ getDateTime() }}
+          </span>
           <div style="clear: both" />
           <div style="margin-top: 30px">
-            <el-image src="/images/sun@3x.png" style="width: 30px;" />
-            <span style="font-size: 20px;margin-left: 24px;">10</span>
+            <el-image
+              src="/images/rain@3x.png"
+              style="width: 30px"
+              v-if="qweather.now.weatherName === '雨'"
+            />
+            <el-image
+              src="/images/snow@3x.png"
+              style="width: 30px"
+              v-else-if="qweather.now.weatherName === '雪'"
+            />
+            <el-image
+              src="/images/cloud@3x.png"
+              style="width: 30px"
+              v-else-if="qweather.now.weatherName === '云'"
+            />
+            <el-image src="/images/sun@3x.png" style="width: 30px" v-else />
+            <span style="font-size: 20px; margin-left: 24px">
+              {{ qweather.now.temp }}
+            </span>
             <span>℃</span>
-            <span style="color: #FFAA33;margin-left: 10px">晴</span>
+            <span style="color: #ffaa33; margin-left: 10px">
+              {{ qweatherAir.now.text }}
+            </span>
           </div>
           <el-divider />
-          <span style="color: #666666">西南风＜3级</span>
+          <span style="color: #666666">
+            {{ qweather.now.windDir }}＜{{ qweather.now.windScale }}级
+          </span>
           <el-divider direction="vertical" style="padding: 0 10px" />
-          <span style="display: inline-block;background: #F37868;padding: 2px 8px;color: white;border-radius: 2px"> 69 良</span>
+          <span
+            style="
+              display: inline-block;
+              background: #f37868;
+              padding: 2px 8px;
+              color: white;
+              border-radius: 2px;
+            "
+          >
+            {{ qweather.now.feelsLike }} {{ qweather.now.category }}
+          </span>
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -24,15 +65,17 @@
           <el-row style="margin-top: 40px">
             <el-col :span="11" style="text-align: center">
               <div style="color: #999999">空气质量指数</div>
-              <div style="color: #45CA9D;line-height: 85px;font-size: 50px">25</div>
+              <div style="color: #45ca9d; line-height: 85px; font-size: 50px">
+                {{ qweatherAir.now.aqi }}
+              </div>
             </el-col>
             <el-col :span="2">
               <el-divider direction="vertical" class="vertical-divider-100" />
             </el-col>
             <el-col :span="11" class="air-quality-info">
-              <div>首要污染物：酸雨</div>
-              <div>PM2.5：19</div>
-              <div>空气质量：优</div>
+              <div>首要污染物：{{ qweatherAir.now.primary }}</div>
+              <div>PM2.5：{{ qweatherAir.now.pm2p5 }}</div>
+              <div>空气质量：{{ qweatherAir.now.category }}</div>
             </el-col>
           </el-row>
         </el-card>
@@ -40,25 +83,36 @@
       <el-col :span="6">
         <el-card class="card">
           <strong>交通情况</strong>
-          <div style="color: #45CA9D;font-size: 30px;line-height: 50px;padding: 25px 0;text-align: center">畅通</div>
+          <div
+            @click="goToTraffic()"
+            style="
+              color: #45ca9d;
+              font-size: 30px;
+              line-height: 50px;
+              padding: 25px 0;
+              text-align: center;
+            "
+          >
+            畅通
+          </div>
           <el-row>
             <el-col :span="12">
-              <div style="background: #D34400;" class="sample-block" />
+              <div style="background: #d34400" class="sample-block" />
               严重拥挤
             </el-col>
             <el-col :span="12">
-              <div style="background: #FF8B33;" class="sample-block" />
+              <div style="background: #ff8b33" class="sample-block" />
               拥挤
             </el-col>
           </el-row>
           <div style="height: 10px" />
           <el-row>
             <el-col :span="12">
-              <div style="background: #FFAA33;" class="sample-block" />
+              <div style="background: #ffaa33" class="sample-block" />
               缓行
             </el-col>
             <el-col :span="12">
-              <div style="background: #45CA9D;" class="sample-block" />
+              <div style="background: #45ca9d" class="sample-block" />
               畅通
             </el-col>
           </el-row>
@@ -70,14 +124,16 @@
           <el-row style="margin-top: 40px">
             <el-col :span="11" style="text-align: center">
               <div style="color: #999999">负氧离子(个/cm3)</div>
-              <div style="color: #45CA9D;line-height: 85px;font-size: 50px">1688</div>
+              <div style="color: #45ca9d; line-height: 85px; font-size: 50px">
+                1688
+              </div>
             </el-col>
             <el-col :span="2">
               <el-divider direction="vertical" class="vertical-divider-100" />
             </el-col>
             <el-col :span="11" class="air-quality-info">
-              <div>湿度：56.0%</div>
-              <div>气压：100kPa</div>
+              <div>湿度：{{ qweather.now.humidity }}%</div>
+              <div>气压：{{ qweather.now.pressure }}Pa</div>
             </el-col>
           </el-row>
         </el-card>
@@ -87,16 +143,19 @@
       <el-col :span="8">
         <el-card>
           <div slot="header">节假日访客数量</div>
+          <div id="visitorsListEchart" style="width: 100%; height: 200px"></div>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header">节假日访客停留时长</div>
+          <div id="timersListEchart" style="width: 100%; height: 200px"></div>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header">出入境数据</div>
+          <div id="entryAndExitEchart" style="width: 100%; height: 200px"></div>
         </el-card>
       </el-col>
     </el-row>
@@ -113,11 +172,15 @@
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">总接待人数</p>
-          <p style="font-size: 20px">{{ detailData.inCount + detailData.outCount }}</p>
+          <p style="font-size: 20px">
+            {{ detailData.inCount + detailData.outCount }}
+          </p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">实时容量</p>
-          <p style="font-size: 20px">{{ detailData.inCount - detailData.outCount }}</p>
+          <p style="font-size: 20px">
+            {{ detailData.inCount - detailData.outCount }}
+          </p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">平均停留时长</p>
@@ -129,25 +192,28 @@
       <el-col :span="8">
         <el-card>
           <div slot="header">性别</div>
-          <div id="gender-box" style="width: 100%;height:200px;" />
+          <div id="gender-box" style="width: 100%; height: 200px" />
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header">来源</div>
-          <div id="from-source-box" style="width: 100%;height:200px;" />
+          <div id="from-source-box" style="width: 100%; height: 200px" />
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
-          <el-row v-for="item in detailData.listFromSource" :key="item.name" style="margin: 12px 0">
+          <el-row
+            v-for="item in detailData.listFromSource"
+            :key="item.name"
+            style="margin: 12px 0"
+          >
             <el-col :span="12">{{ item.name }}</el-col>
             <el-col :span="12">{{ item.value }}人次</el-col>
           </el-row>
         </el-card>
       </el-col>
     </el-row>
-
   </div>
 </template>
 <style>
@@ -158,7 +224,7 @@
 }
 
 .card strong {
-  font-size: 24px
+  font-size: 24px;
 }
 
 .vertical-divider-100 {
@@ -175,33 +241,106 @@
   width: 20px;
   height: 10px;
   display: inline-block;
-  margin-right: 5px
+  margin-right: 5px;
 }
 </style>
 <script>
 import * as echarts from 'echarts'
-import { findDetail } from '@/api/equipment/equipment_passenger'
+import { findDetail, qweatherGet, qweatherAir, ambitusRoadConditions } from '@/api/equipment/equipment_passenger'
 
 export default {
   components: {},
   data() {
     return {
-      detailData: {}
+      detailData: {},
+      qweather: { now: {} },
+      qweatherAir: { now: {} }
     }
   },
   computed: {},
   mounted() {
     const id = this.$route.params.id
-    console.log(id)
-    findDetail(id).then(detailData => {
+    const queryForm = this.$route.query;
+    findDetail(id, queryForm.orgId).then(detailData => {
+      if (detailData.latLng) {
+        const latLng = detailData.latLng.split(/,/g);
+        detailData.lat = latLng[0];
+        detailData.lng = latLng[1];
+      }
       this.detailData = detailData
-      this.buildGender(this.detailData.listGenders)
-      this.buildFromSource(this.detailData.listFromSource)
+      this.buildVisitorsList(this.detailData.visitorsList);
+      // this.buildGender(this.detailData.listGenders)
+      // this.buildFromSource(this.detailData.listFromSource)
+      this.loadQweather();
     })
   },
   created() {
+
   },
   methods: {
+    loadQweather() {
+      qweatherGet(this.detailData.lat, this.detailData.lng).then(data => {
+        this.qweather = data;
+      });
+      qweatherAir(this.detailData.lat, this.detailData.lng).then(data => {
+        this.qweatherAir = data;
+      });
+      ambitusRoadConditions(this.detailData.lat, this.detailData.lng).then(data => {
+        console.log(data);
+      });
+    },
+    goToTraffic() {
+      const lat = this.detailData.lat;
+      const lng = this.detailData.lng;
+      this.$router.push(`/equipment/passenger/traffic?lat=${lat}&lng=${lng}`)
+    },
+    dateFilter: function (date) {
+      if (date < 10) {
+        return "0" + date;
+      }
+      return date;
+    },
+    getDateTime() {
+      var dateObj = new Date(); //表示当前系统时间的Date对象
+      var year = dateObj.getFullYear(); //当前系统时间的完整年份值
+      var month = dateObj.getMonth() + 1; //当前系统时间的月份值
+      var date = dateObj.getDate(); //当前系统时间的月份中的日
+      var day = dateObj.getDay(); //当前系统时间中的星期值
+      var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+      var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
+      var hour = dateObj.getHours(); //当前系统时间的小时值
+      var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午"); //当前时间属于上午、晚上还是下午
+
+      return this.dateFilter(month) + "月" + this.dateFilter(date) + "日 " + " " + week + " " + timeValue;
+    },
+    buildVisitorsList(visitorsList) {
+      const chart = echarts.init(document.getElementById('visitorsListEchart'));
+      const data = visitorsList.map(v => v.label);
+      const series = { name: '', type: 'bar', data: visitorsList.map(v => v.value) };
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10px',
+          left: '80px',
+          right: '25px',
+          bottom: '20px'
+        },
+        xAxis: {
+          type: 'category',
+          data: data
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        series: series
+      });
+    },
     buildGender(listGenders) {
       const chart = echarts.init(document.getElementById('gender-box'))
       chart.setOption({

src/views/equipment/passenger/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <el-form :model="queryForm" inline size="small">
-      <el-form-item label="点位分布">
+      <!-- <el-form-item label="点位分布">
         <select-base-bz-data v-model="queryForm.placeBaseInfoId" :multiple="false" />
-      </el-form-item>
-      <el-form-item label="备注说明">
-        <el-input v-model="queryForm.brief" placeholder="备注说明" />
+      </el-form-item> -->
+      <el-form-item label="关键词搜索">
+        <el-input v-model="queryForm.brief" placeholder="请输入关键词" />
       </el-form-item>
       <el-form-item label="时间维度">
         <el-date-picker
@@ -20,11 +20,11 @@
     </el-form>
     <el-row class="action-bar-container" type="flex" justify="end">
       <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
-      <el-button-group>
+      <!-- <el-button-group>
         <el-button v-permission="['equipment.passenger.add']" size="small" @click.native="$refs.dialogForm.open({})">
           新建
         </el-button>
-      </el-button-group>
+      </el-button-group> -->
     </el-row>
     <el-card
       v-for="item in pageData.records"
@@ -53,7 +53,8 @@
         </el-row>
       </div>
       <div class="clearfix action-btns" style="text-align: center;font-size: 13px;margin-top: 10px">
-        <el-row :gutter="16">
+        <a type="text" @click="goToDetail(item.id,item.placeBaseInfoId)">详情</a>
+        <!-- <el-row :gutter="16">
           <el-col :span="8">
             <a v-permission="['equipment.passenger.edit']" type="text" @click="$refs.dialogForm.open(item)">编辑</a>
           </el-col>
@@ -63,7 +64,7 @@
           <el-col :span="8">
             <a type="text" @click="goToDetail(item.id)">详情</a>
           </el-col>
-        </el-row>
+        </el-row> -->
       </div>
     </el-card>
     <div style="clear: both" />
@@ -108,8 +109,8 @@ export default {
   },
   methods: {
     dateTimeFormatter,
-    goToDetail(id) {
-      this.$router.push(`/equipment/passenger/detail/${id}`)
+    goToDetail(id,orgId) {
+      this.$router.push(`/equipment/passenger/detail/${id}?orgId=${orgId}`)
     },
     onDataTypeChange() {
       this.queryForm.bzId = ''

src/views/equipment/passenger/traffic.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div id="container"></div>
+    <div id="panel">
+      <p><span style="color: #6cc356">绿色</span>代表道路通畅。</p>
+      <p><span style="color: #ffe7a5">黄色</span>代表行驶缓慢。</p>
+      <p><span style="color: #f94954">红色</span>代表道路拥堵。</p>
+      <ul id="suggestionList"></ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return { queryForm: {} }
+  },
+  created() {
+    this.queryForm = this.$route.query;
+
+    setTimeout(() => {
+      this.initMap()
+    }, 20);
+  },
+  methods: {
+    initMap() {
+      const center = new TMap.LatLng(this.queryForm.lat, this.queryForm.lng);
+      //   const range = document.querySelector('#range');
+      //   const number = document.querySelector('#number');
+      new TMap.Map('container', {
+        zoom: 12, // 设置地图缩放级别
+        center: center, // 设置地图中心点坐标
+        baseMap: [
+          { type: 'vector' }, // 设置矢量底图
+          // traffic底图文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#7
+          {
+            type: 'traffic',
+            opacity: 1,
+          }, // 设置路况底图
+        ],
+      });
+    }
+  }
+}
+</script>
+<style>
+html,
+body {
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+}
+
+.control {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 9999;
+  padding: 10px;
+  background-color: white;
+}
+
+#panel {
+  position: absolute;
+  background: #fff;
+  width: 150px;
+  padding: 20px;
+  z-index: 9999;
+  top: 55px;
+  left: 30px;
+}
+</style>

src/views/login/index.vue

@@ -100,7 +100,7 @@
 
     </el-card>
 
-    <div class="footer">
+    <div class="footer" style="position:fixed;bottom:0;width:100%;text-align:center;">
       ©2022 智慧旅游 版权所有 All Rights Reserved.
     </div>
   </div>

src/views/statistics/complaint/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="app-container">
-
     <el-form :model="queryForm" inline size="small">
-      <el-form-item label="标题">
+      <!-- <el-form-item label="标题">
         <el-input v-model="queryForm.title" placeholder="标题"/>
       </el-form-item>
       <el-form-item label="投诉类型">
@@ -16,7 +15,7 @@
           <el-option label="待处理" value="PENDING"/>
           <el-option label="已处理" value="PROCESSED"/>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="投诉时间">
         <el-date-picker
           v-model="queryForm.createdTime"
@@ -27,7 +26,7 @@
           value-format="yyyy-MM-dd"
         />
       </el-form-item>
-      <el-form-item label="处理时间">
+      <!-- <el-form-item label="处理时间">
         <el-date-picker
           v-model="queryForm.processedTime"
           type="daterange"
@@ -36,17 +35,19 @@
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
         />
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
     <el-row class="action-bar-container" type="flex" justify="end">
-      <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
+      <el-button type="primary" size="small" @click.native="fetchData"
+        >查询</el-button
+      >
       <el-button-group>
-        <el-button v-permission="['complaint.add']" size="small" @click.native="$refs.dialogForm.open({})">
+        <!-- <el-button v-permission="['complaint.add']" size="small" @click.native="$refs.dialogForm.open({})">
           新建
         </el-button>
         <el-button v-permission="['complaint.delete']" size="small" @click.native="deleteByIds(multipleSelection)">
           删除
-        </el-button>
+        </el-button> -->
       </el-button-group>
     </el-row>
     <el-table
@@ -57,24 +58,194 @@
       highlight-current-row
       @selection-change="selectionChange"
     >
-      <el-table-column type="selection" width="55"/>
-      <el-table-column label="ID" prop="id" width="120"/>
-      <el-table-column label="类型" prop="type" :formatter="typeFormatter" />
-      <el-table-column label="事发地点" prop="location"/>
-      <el-table-column label="内容" prop="context"/>
-      <!--      <el-table-column label="处理结果" prop="state.text" />-->
-      <el-table-column label="投诉时间" prop="complaintDate" :formatter="dateTimeFormatter"/>
-      <el-table-column label="处理时间" prop="acceptanceTime" :formatter="dateTimeFormatter"/>
-      <el-table-column label="操作" width="70" fixed="right">
+      <el-table-column
+        label="投诉用户"
+        header-align="center"
+        align="left"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <el-avatar :src="scope.row.avatar" style="float: left">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-avatar>
+          <span style="float: left; margin-left: 10px; color: #3e8ef7">
+            {{ scope.row.nick_name }}<br />
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="content"
+        label="类型"
+        header-align="center"
+        align="center"
+        width="80"
+      >
+        <template slot-scope="scope">
+          {{
+            scope.row.type == 3
+              ? "投诉"
+              : scope.row.type == 4
+              ? "评价"
+              : scope.row.type == 5
+              ? "举报"
+              : scope.row.type == 6
+              ? "咨询"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :show-overflow-tooltip="true"
+        prop="be_complained"
+        label="被投诉者"
+        header-align="center"
+        align="center"
+        width="120"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="context"
+        label="投诉内容"
+        header-align="center"
+        align="center"
+        min-width="300"
+      >
+        <template slot-scope="scope">
+          <el-tooltip
+            v-if="scope.row.context"
+            class="item"
+            effect="dark"
+            :content="scope.row.context"
+            placement="top"
+          >
+            <div
+              style="
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                height: 50px;
+                text-align: left;
+              "
+              v-html="scope.row.context"
+            ></div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        prop="url_img"
+        label="图片"
+        header-align="center"
+        align="center"
+        width="300"
+      >
+        <template slot-scope="scope">
+          <el-image
+            v-if="scope.row.url_img"
+            v-for="(item, index) in scope.row.url_img.split(',')"
+            :key="index"
+            :src="item"
+            :preview-src-list="[item]"
+            style="height: 70px; width: 60px; padding: 5px"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        prop="content"
+        label="回复内容"
+        header-align="center"
+        align="center"
+        min-width="300"
+      >
+        <template slot-scope="scope">
+          <el-tooltip
+            v-if="scope.row.restore_content"
+            class="item"
+            effect="dark"
+            :content="scope.row.restore_content"
+            placement="top"
+          >
+            <div
+              style="
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                height: 50px;
+                text-align: left;
+              "
+              v-html="scope.row.restore_content"
+            ></div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="is_handle"
+        label="状态"
+        header-align="center"
+        align="center"
+        width="80"
+      >
+        <template slot-scope="scope">
+          {{
+            scope.row.is_handle == 0
+              ? "未处理"
+              : scope.row.is_handle == 1
+              ? "已处理"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="is_handle"
+        label="处理效率"
+        header-align="center"
+        align="center"
+        width="80"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.is_handle == 1 ? "中等" : "" }}
+        </template>
+      </el-table-column>
 
+      <el-table-column
+        prop="complaint_date"
+        label="投诉时间"
+        header-align="center"
+        align="center"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column label="操作" width="70" fixed="right">
         <template slot-scope="scope">
           <el-dropdown>
             <el-button type="text">
-              操作<i class="el-icon-arrow-down el-icon--right"/>
+              操作<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-permission="['complaint.edit']" type="text" @click.native="$refs.dialogForm.open(scope.row)">编辑</el-dropdown-item>
-              <el-dropdown-item v-permission="['complaint.process']" @click.native="setProcessedByIds([scope.row.id])"> 设为已处理</el-dropdown-item>
+              <el-dropdown-item
+                type="text"
+                @click.native="getToDetail(scope.row)"
+                >详情
+              </el-dropdown-item>
+              <!-- <el-dropdown-item
+                v-permission="['complaint.edit']"
+                type="text"
+                @click.native="$refs.dialogForm.open(scope.row)"
+                >编辑
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-permission="['complaint.process']"
+                @click.native="setProcessedByIds([scope.row.id])"
+              >
+                设为已处理
+              </el-dropdown-item> -->
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -88,7 +259,228 @@
       :page-size="pageData.pageSize"
       @current-change="paginationChange"
     />
-    <dialog-form ref="dialogForm" @ok="fetchData"/>
+    <dialog-form ref="dialogForm" @ok="fetchData" />
+
+    <!-- 查看详情 -->
+    <el-dialog
+      title="详情"
+      :visible.sync="detailVisible"
+      :close-on-click-modal="false"
+      :fullscreen="false"
+    >
+      <el-form :model="detailForm" ref="detailForm" label-width="155px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="投诉人：">
+              <span v-if="detailForm.contact">
+                {{ detailForm.contact }}
+              </span>
+              <span v-else-if="detailForm.uid">
+                {{ detailForm.nick_name }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="投诉分类：" prop="bigType">
+              投诉与建议
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="投诉类型：" prop="type"> 投诉 </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="投诉级别：" prop="level">
+              <span v-if="detailForm.level">
+                {{ detailForm.level }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="投诉时间：" prop="complaintDate">
+              <span v-if="detailForm.complaint_date">
+                {{ detailForm.complaint_date }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人：" prop="contact">
+              <span v-if="detailForm.contact">
+                {{ detailForm.contact }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话：" prop="contactPhone">
+              <span v-if="detailForm.contact_phone">
+                {{ detailForm.contact_phone }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="被投诉对象：" prop="beComplained">
+              <span v-if="detailForm.be_complained">
+                {{ detailForm.be_complained }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="被投诉对象所属行业："
+              prop="beComplainedIndustry"
+            >
+              <span v-if="detailForm.be_complained_industry">
+                {{ detailForm.be_complained_industry }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="事发地：" prop="location">
+              <span v-if="detailForm.location">
+                {{ detailForm.location }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <!--            v-if="!isUpdate"-->
+          <el-form-item label="投诉内容：" prop="context">
+            <p v-html="detailForm.context"></p>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="投诉图片附件：" prop="urlImg">
+              <el-image
+                :key="index"
+                v-for="(item, index) in detailForm.files"
+                :src="item"
+                :preview-src-list="[item]"
+                style="width: 100px; height: 100px"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="投诉来源渠道：" prop="sourceChannel">
+              <span v-if="detailForm.source_channel">
+                {{ detailForm.source_channel }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="当前处理状态：" prop="isHandle">
+              <span v-if="detailForm.is_handle == 0"> 未处理 </span>
+              <span v-else> 已处理 </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="受理时间：" prop="acceptanceTime">
+              <span v-if="detailForm.acceptance_time">
+                {{ detailForm.acceptance_time }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="受理人名称：" prop="acceptanceName">
+              <span v-if="detailForm.acceptance_name">
+                {{ detailForm.acceptance_name }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="受理人工号：" prop="acceptanceNo">
+              <span v-if="detailForm.acceptance_no">
+                {{ detailForm.acceptance_no }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="受理部门：" prop="acceptanceDepartment">
+              <span v-if="detailForm.acceptance_department">
+                {{ detailForm.acceptance_department }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="回复内容：" prop="restoreContent">
+              <p
+                v-if="detailForm.restore_content"
+                v-html="detailForm.restore_content"
+              ></p>
+              <p v-else>/</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="处理时间：" prop="restoreDate">
+              <span v-if="detailForm.restore_date">
+                {{ detailForm.restore_date }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="处理人：" prop="restoreUid">
+              <span v-if="detailForm.restore_uid">
+                {{ detailForm.restore_nick_name }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="处理人名称：" prop="restoreName">
+              <span v-if="detailForm.restore_name">
+                {{ detailForm.restore_name }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="处理人电话：" prop="restorePhone">
+              <span v-if="detailForm.restore_phone">
+                {{ detailForm.restore_phone }}
+              </span>
+              <span v-else> / </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="处理的图片附件：" prop="restorePic">
+              <el-image
+                :key="index"
+                v-for="(item, index) in detailForm.restore_pics"
+                :src="item"
+                :preview-src-list="[item]"
+                style="width: 100px; height: 100px"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="detailVisible = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -106,7 +498,9 @@ export default {
       isLoading: true,
       pageData: {},
       currentPage: 1,
-      multipleSelection: []
+      multipleSelection: [],
+      detailVisible: false,
+      detailForm: {}
     }
   },
   computed: {},
@@ -143,6 +537,10 @@ export default {
         })
       })
     },
+    getToDetail(row) {
+      this.detailForm = row;
+      this.detailVisible = true;
+    },
     setProcessedByIds(ids) {
       this.$confirm('确认要设为已处理吗?', '提示', {
         confirmButtonText: '确定',

src/views/statistics/file/index.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="app-container">
-
     <el-form :model="queryForm" inline size="small">
       <el-form-item label="文件名">
         <el-input v-model="queryForm.originalFileName" placeholder="文件名" />
       </el-form-item>
-      <el-form-item label="上传时间">
+      <!-- <el-form-item label="上传时间">
         <el-date-picker
           v-model="queryForm.createdTime"
           type="daterange"
@@ -14,50 +13,124 @@
           end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
         />
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
     <el-row class="action-bar-container" type="flex" justify="end">
-      <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
+      <el-button type="primary" size="small" @click.native="fetchData"
+        >查询</el-button
+      >
       <el-button-group>
-        <el-button v-permission="['upload.file.delete']" size="small" @click.native="deleteByIds(multipleSelection)">
+        <el-button
+          v-permission="['upload.file.delete']"
+          size="small"
+          @click.native="deleteByIds(multipleSelection)"
+        >
           删除
         </el-button>
       </el-button-group>
     </el-row>
-    <el-table
-      v-loading="isLoading"
-      :data="pageData.records"
-      border
-      fit
-      highlight-current-row
-      @selection-change="selectionChange"
+    <el-tabs
+      type="border-card"
+      @tab-click="chooseTabsHandle"
+      v-model="queryForm.type"
     >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="ID" prop="id" width="150" />
-      <el-table-column label="文件名" prop="originalFileName" width="300">
-        <template slot-scope="scope">
-          <a v-if="scope.row.mimeType.startsWith('image')" :href="scope.row.src" target="_blank">
-            <img :src="scope.row.src" height="50">
-          </a>
-          <a v-else :href="scope.row.src" target="_blank">
-            {{ scope.row.originalFileName }}
-          </a>
-        </template>
-      </el-table-column>
-      <el-table-column label="地址" prop="src" min-width="300" />
-      <el-table-column label="大小" prop="size" width="150" />
-      <el-table-column label="类型" prop="mimeType" width="150" />
-      <el-table-column label="扩展名" prop="extension" width="150" />
-      <el-table-column label="上传时间" prop="createdTime" :formatter="dateTimeFormatter" width="200" />
-    </el-table>
-    <el-pagination
-      class="pagination-container"
-      background
-      layout="prev, pager, next"
-      :total="pageData.total"
-      :page-size="pageData.pageSize"
-      @current-change="paginationChange"
-    />
+      <el-tab-pane label="图片" name="1">
+        <el-table
+          v-loading="isLoading"
+          :data="pageData.records"
+          border
+          fit
+          highlight-current-row
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="ID" prop="id" width="150" />
+          <el-table-column
+            label="文件名"
+            prop="originalFileName"
+            width="100"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-image
+                :preview-src-list="[scope.row.src]"
+                :src="scope.row.src"
+                style="width: 30px"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="地址" prop="src" min-width="300" />
+          <el-table-column label="大小" prop="size" width="150" />
+          <el-table-column label="类型" prop="mimeType" width="150" />
+          <el-table-column label="扩展名" prop="extension" width="150" />
+          <el-table-column
+            label="上传时间"
+            prop="createdTime"
+            :formatter="dateTimeFormatter"
+            width="200"
+          />
+        </el-table>
+        <el-pagination
+          class="pagination-container"
+          background
+          layout="prev, pager, next"
+          :total="pageData.total"
+          :page-size="pageData.pageSize"
+          @current-change="paginationChange"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="多媒体" name="2">
+        <el-table
+          v-loading="isLoading"
+          :data="pageData.records"
+          border
+          fit
+          highlight-current-row
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="ID" prop="id" width="150" />
+          <el-table-column
+            label="文件名"
+            prop="originalFileName"
+            width="100"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" @click="lookVideoDetail(scope.row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="地址" prop="src" min-width="300" />
+          <!-- <el-table-column label="大小" prop="size" width="150" /> -->
+          <!-- <el-table-column label="类型" prop="mimeType" width="150" /> -->
+          <!-- <el-table-column label="扩展名" prop="extension" width="150" /> -->
+          <el-table-column
+            label="上传时间"
+            prop="createdTime"
+            :formatter="dateTimeFormatter"
+            width="200"
+          />
+        </el-table>
+        <el-pagination
+          class="pagination-container"
+          background
+          layout="prev, pager, next"
+          :total="pageData.total"
+          :page-size="pageData.pageSize"
+          @current-change="paginationChange"
+        />
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog
+      title="详情"
+      :visible.sync="showVideoVisiable"
+      :close-on-click-modal="false"
+      :fullscreen="false"
+    >
+      <audio controls :src="video.src" v-if="'mp3' === video.extension"></audio>
+      <video :src="video.src" style="width:100%" controls v-else></video>
+    </el-dialog>
   </div>
 </template>
 
@@ -69,11 +142,14 @@ export default {
   name: 'StatisticsComplaint',
   data() {
     return {
-      queryForm: {},
+      queryForm: { type: '1' },
       isLoading: true,
       pageData: {},
       currentPage: 1,
-      multipleSelection: []
+      multipleSelection: [],
+
+      showVideoVisiable: false,
+      video: {}
     }
   },
   computed: {},
@@ -95,6 +171,10 @@ export default {
         })
       })
     },
+    lookVideoDetail(row) {
+      this.video = row;
+      this.showVideoVisiable = true;
+    },
     selectionChange(val) {
       const temp = []
       val.forEach(o => {
@@ -106,6 +186,12 @@ export default {
       this.currentPage = val
       this.fetchData()
     },
+    chooseTabsHandle: function (event) {
+      console.log(event);
+      this.currentPage = 1;
+      this.pageData = [];
+      this.fetchData();
+    },
     fetchData() {
       this.isLoading = true
       findPage({ ...this.queryForm, current: this.currentPage })