diff --git a/src/api/sanitation/toilet.js b/src/api/sanitation/toilet.js
index 10fd245..74181bc 100644
--- a/src/api/sanitation/toilet.js
+++ b/src/api/sanitation/toilet.js
@@ -52,6 +52,33 @@
   })
 }
 
+// 公厕基本信息详情
+export function getToiletInfoDetail(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕保洁记录
+export function getRecordsByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕平均评分
+export function getScoreByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导入
 export function batchImportToilet(fileobj) {
   const param = new FormData()

diff --git a/src/api/sanitation/toilet.js b/src/api/sanitation/toilet.js
index 10fd245..74181bc 100644
--- a/src/api/sanitation/toilet.js
+++ b/src/api/sanitation/toilet.js
@@ -52,6 +52,33 @@
   })
 }
 
+// 公厕基本信息详情
+export function getToiletInfoDetail(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕保洁记录
+export function getRecordsByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕平均评分
+export function getScoreByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导入
 export function batchImportToilet(fileobj) {
   const param = new FormData()
diff --git a/src/views/overview/toiletDetailDialog.vue b/src/views/overview/toiletDetailDialog.vue
new file mode 100644
index 0000000..167d65e
--- /dev/null
+++ b/src/views/overview/toiletDetailDialog.vue
@@ -0,0 +1,262 @@
+<!--公厕新增，编辑，详情-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :fullscreen="false" :title="title" width="60%" append-to-body>
+    <div class="form-div">
+      <div class="form-left">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">公厕编号：</span>
+              <span class="item-value-middle">{{ form.code }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">公厕名称：</span>
+              <span class="item-value-middle">{{ form.name }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">建设单位：</span>
+              <span class="item-value-middle">{{ form.owner }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">占地面积：</span>
+              <span class="item-value-middle">{{ form.area }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title">位置：</span>
+              <span class="item-value-middle">{{ form.position }} ( {{ form.lng }} , {{ form.lat }} )</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">责任人：</span>
+              <span class="item-value-middle">{{ form.responsiblePerson }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">责任人电话：</span>
+              <span class="item-value-middle">{{ form.responsiblePersonTel }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">启用时间：</span>
+              <span class="item-value-middle">{{ form.ts }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">备注：</span>
+              <span class="item-value-middle">{{ form.notes }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-right">
+        <el-row>
+          <div class="avatar">
+            <el-image
+              :src="photo!==''?photo:defaultPhoto"
+              fit="cover"
+              style="width: 110px; height: 145px"/>
+          </div>
+          <div>
+            <el-rate
+              v-model="score"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value}"/>
+          </div>
+        </el-row>
+      </div>
+
+    </div>
+    <normal-table
+      id="dataTable"
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </el-dialog>
+</template>
+
+<script>
+import { getRecordsByToilet, getToiletInfoDetail, getScoreByToilet } from '@/api/sanitation/toilet'
+import { getToday, getLastMonth } from '@/utils/dateutils'
+export default {
+  name: 'ToiletDetailDialog',
+  data() {
+    return {
+      title: '公厕详情',
+      dialogFormVisible: false,
+      listQuery: {
+        toiletId: '',
+        beginDate: '', // 开始时间
+        endDate: '', // 结束时间
+        offset: 1,
+        limit: 5
+      }, // 筛选条件
+      form: {
+        id: '', // id
+        code: '', // 编号
+        name: '', // 名称
+        owner: '', // 建设单位
+        area: '', // 占地面积
+        position: '', // 位置：社区/道路
+        lng: '', // 经度
+        lat: '', // 纬度
+        responsiblePerson: '', // 责任人
+        responsiblePersonTel: '', // 责任人电话
+        ts: '', // 启用时间
+        notes: '' // 备注
+      },
+      photo: '', // 图片路径
+      defaultPhoto: require('../../assets/global_images/toiletPhoto.png'), // 默认图片路径
+      score: 0,
+      columns: [
+        { text: '保洁时间 ', value: 'startTime', align: 'center' },
+        { text: '人员 ', value: 'name', align: 'center' },
+        { text: '保洁内容', value: 'jobContent', align: 'center' }
+      ], // 显示列
+      list: [],
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '保洁记录' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    /**
+     * 初始化对话框
+     * @param listQuery 查询参数
+     */
+    initDialog: function(item) {
+      this.title = item.name + '详情'
+      this.listQuery = {
+        toiletId: item.id,
+        beginDate: getLastMonth('yyyy-MM-dd'),
+        endDate: getToday('yyyy-MM-dd'),
+        offset: 1,
+        limit: 5
+      }
+      this.form = item
+      this.dialogFormVisible = true
+      this.fetchToiletDetail()
+      this.fetchCleanRecords()
+      this.fetchScoreData()
+    },
+    // 获取公厕详情
+    fetchToiletDetail() {
+      getToiletInfoDetail(this.listQuery.toiletId).then(res => {
+        console.log(res)
+      })
+    },
+    // 保洁记录
+    fetchCleanRecords() {
+      getRecordsByToilet(this.listQuery).then((res) => {
+        this.listLoading = true
+        this.list = [
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-01 08:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-02 09:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-03 10:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-04 11:00:00' }
+        ]
+        this.total = 4
+        this.listLoading = false
+      })
+    },
+    // 获取评分
+    fetchScoreData() {
+      getScoreByToilet({ toiletId: this.listQuery.toiletId }).then(res => {
+        if (res.code === 200) {
+          // this.score = res.data
+          this.score = 4.5
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .form-div{
+    width:100%;
+    height:100%;
+    display:flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .form-left{
+    flex:1;
+    height:100%;
+    .item-div{
+      line-height:2;
+      margin-left: 5px;
+      .item-title{
+        font-weight: bold;
+      }
+    }
+  }
+  .form-right{
+    width: 180px;
+    height:100%;
+    .avatar{
+      margin-bottom: 10px;
+    }
+    text-align: center;
+  }
+</style>

diff --git a/src/api/sanitation/toilet.js b/src/api/sanitation/toilet.js
index 10fd245..74181bc 100644
--- a/src/api/sanitation/toilet.js
+++ b/src/api/sanitation/toilet.js
@@ -52,6 +52,33 @@
   })
 }
 
+// 公厕基本信息详情
+export function getToiletInfoDetail(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕保洁记录
+export function getRecordsByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 某公厕平均评分
+export function getScoreByToilet(params) {
+  return request({
+    url: '/sanitation/toilet/listPage',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导入
 export function batchImportToilet(fileobj) {
   const param = new FormData()
diff --git a/src/views/overview/toiletDetailDialog.vue b/src/views/overview/toiletDetailDialog.vue
new file mode 100644
index 0000000..167d65e
--- /dev/null
+++ b/src/views/overview/toiletDetailDialog.vue
@@ -0,0 +1,262 @@
+<!--公厕新增，编辑，详情-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :fullscreen="false" :title="title" width="60%" append-to-body>
+    <div class="form-div">
+      <div class="form-left">
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">公厕编号：</span>
+              <span class="item-value-middle">{{ form.code }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">公厕名称：</span>
+              <span class="item-value-middle">{{ form.name }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">建设单位：</span>
+              <span class="item-value-middle">{{ form.owner }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">占地面积：</span>
+              <span class="item-value-middle">{{ form.area }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="item-div">
+              <span class="item-title">位置：</span>
+              <span class="item-value-middle">{{ form.position }} ( {{ form.lng }} , {{ form.lat }} )</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">责任人：</span>
+              <span class="item-value-middle">{{ form.responsiblePerson }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">责任人电话：</span>
+              <span class="item-value-middle">{{ form.responsiblePersonTel }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">启用时间：</span>
+              <span class="item-value-middle">{{ form.ts }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="item-div">
+              <span class="item-title">备注：</span>
+              <span class="item-value-middle">{{ form.notes }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-right">
+        <el-row>
+          <div class="avatar">
+            <el-image
+              :src="photo!==''?photo:defaultPhoto"
+              fit="cover"
+              style="width: 110px; height: 145px"/>
+          </div>
+          <div>
+            <el-rate
+              v-model="score"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value}"/>
+          </div>
+        </el-row>
+      </div>
+
+    </div>
+    <normal-table
+      id="dataTable"
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </el-dialog>
+</template>
+
+<script>
+import { getRecordsByToilet, getToiletInfoDetail, getScoreByToilet } from '@/api/sanitation/toilet'
+import { getToday, getLastMonth } from '@/utils/dateutils'
+export default {
+  name: 'ToiletDetailDialog',
+  data() {
+    return {
+      title: '公厕详情',
+      dialogFormVisible: false,
+      listQuery: {
+        toiletId: '',
+        beginDate: '', // 开始时间
+        endDate: '', // 结束时间
+        offset: 1,
+        limit: 5
+      }, // 筛选条件
+      form: {
+        id: '', // id
+        code: '', // 编号
+        name: '', // 名称
+        owner: '', // 建设单位
+        area: '', // 占地面积
+        position: '', // 位置：社区/道路
+        lng: '', // 经度
+        lat: '', // 纬度
+        responsiblePerson: '', // 责任人
+        responsiblePersonTel: '', // 责任人电话
+        ts: '', // 启用时间
+        notes: '' // 备注
+      },
+      photo: '', // 图片路径
+      defaultPhoto: require('../../assets/global_images/toiletPhoto.png'), // 默认图片路径
+      score: 0,
+      columns: [
+        { text: '保洁时间 ', value: 'startTime', align: 'center' },
+        { text: '人员 ', value: 'name', align: 'center' },
+        { text: '保洁内容', value: 'jobContent', align: 'center' }
+      ], // 显示列
+      list: [],
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '保洁记录' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
+    }
+  },
+  methods: {
+    /**
+     * 初始化对话框
+     * @param listQuery 查询参数
+     */
+    initDialog: function(item) {
+      this.title = item.name + '详情'
+      this.listQuery = {
+        toiletId: item.id,
+        beginDate: getLastMonth('yyyy-MM-dd'),
+        endDate: getToday('yyyy-MM-dd'),
+        offset: 1,
+        limit: 5
+      }
+      this.form = item
+      this.dialogFormVisible = true
+      this.fetchToiletDetail()
+      this.fetchCleanRecords()
+      this.fetchScoreData()
+    },
+    // 获取公厕详情
+    fetchToiletDetail() {
+      getToiletInfoDetail(this.listQuery.toiletId).then(res => {
+        console.log(res)
+      })
+    },
+    // 保洁记录
+    fetchCleanRecords() {
+      getRecordsByToilet(this.listQuery).then((res) => {
+        this.listLoading = true
+        this.list = [
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-01 08:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-02 09:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-03 10:00:00' },
+          { name: '张三', jobContent: '保洁', startTime: '2021-07-04 11:00:00' }
+        ]
+        this.total = 4
+        this.listLoading = false
+      })
+    },
+    // 获取评分
+    fetchScoreData() {
+      getScoreByToilet({ toiletId: this.listQuery.toiletId }).then(res => {
+        if (res.code === 200) {
+          // this.score = res.data
+          this.score = 4.5
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .form-div{
+    width:100%;
+    height:100%;
+    display:flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .form-left{
+    flex:1;
+    height:100%;
+    .item-div{
+      line-height:2;
+      margin-left: 5px;
+      .item-title{
+        font-weight: bold;
+      }
+    }
+  }
+  .form-right{
+    width: 180px;
+    height:100%;
+    .avatar{
+      margin-bottom: 10px;
+    }
+    text-align: center;
+  }
+</style>
diff --git a/src/views/overview/toiletLayer.vue b/src/views/overview/toiletLayer.vue
index 1eeb854..d5b4191 100644
--- a/src/views/overview/toiletLayer.vue
+++ b/src/views/overview/toiletLayer.vue
@@ -3,14 +3,20 @@
  * @Author: 王晓颖
  * @Date: 2021-06-22 10:05:32
  -->
-<template/>
+<template>
+  <div>
+    <toilet-detail-dialog ref="detail"/>
+  </div>
+</template>
 
 <script>
 import Leaflet from 'leaflet'
 import commonMixin from '@/components/mapWindow/base/mixins/common.js'
 import { getToiletList } from '@/api/sanitation/toilet'
+import ToiletDetailDialog from './toiletDetailDialog'
 export default {
   name: 'ToiletLayer',
+  components: { ToiletDetailDialog },
   mixins: [commonMixin('layer')],
   props: {
     show: {
@@ -119,12 +125,20 @@
           '</div>'
 
         const popup = Leaflet.popup().setContent(popupStr)
-
         if (item.lng > 0 && item.lat > 0) {
           // 添加marker
-          Leaflet.marker([item.lat, item.lng], { icon: icon }).addTo(staffLayer).bindPopup(popup)
+          const marker = Leaflet.marker([item.lat, item.lng], { icon: icon , item: item}).addTo(staffLayer).bindPopup(popup)
+          marker.on('click', (e) => {
+            document.getElementById('detail').onclick = () => {
+              console.log('click detail')
+              this.detail(e.sourceTarget.options.item)
+            }
+          })
         }
       })
+    },
+    detail(item) {
+      this.$refs.detail.initDialog(item)
     }
   }
 }