首页九小场所新增查看列表和详情，租户详情异常修改

zrj

2024-06-18 8253e148f5d680eb4f6aab75a156dbb22cb8d55d

首页九小场所新增查看列表和详情，租户详情异常修改

 package-lock.json

Diff too large

 src/views/home/components/dialog/placeDetailsBox.vue

New file
@@ -0,0 +1,375 @@
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :before-close="landBeforeClose"
      :modal="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      class="land-details-box"
    >
      <div class="header">
        <!-- <div>
        场所类型：
        <el-select
          clearable
          style="flex: 1"
          size="small"
          v-model="typeValue"
          @change="typeChange"
          placeholder="请选择场所类型"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.title"
            :value="item.key"
          ></el-option>
        </el-select>
      </div> -->
        <div>
          场所名称：
          <input type="text" v-model="placeName" placeholder="请输入场所名称" />
        </div>
        <el-button type="primary" icon="el-icon-search" @click="getNinePage"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-delete"
          @click="clearSearchValue"
          >清空</el-button
        >
      </div>
      <div
        v-loading="curLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        class="body"
      >
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#203c60',
            borderColor: '#324e75',
          }"
          :cell-style="{
            'text-align': 'center',
            borderColor: '#324e75',
            cursor: 'default',
          }"
        >
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
          <el-table-column label="序号" type="index" align="center">
            <template slot-scope="scope">
              <span>{{
                (pages.current - 1) * pages.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="placeName"
            :show-overflow-tooltip="true"
            label="场所名称"
          ></el-table-column>
          <el-table-column
            prop="location"
            :show-overflow-tooltip="true"
            label="场所地址"
          ></el-table-column>
          <el-table-column
            prop="nineName"
            :show-overflow-tooltip="true"
            label="场所类型"
          ></el-table-column>
          <el-table-column width="80" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                title="定位"
                :disabled="positionDisabled(scope.row)"
                @click="rowClick(scope.row)"
              >
                <i
                  class="el-icon-location"
                  :style="{ color: positionColor(scope.row) }"
                ></i>
              </el-button>
              <!-- <el-button
              type="text"
              size="small"
              title="详情"
              @click="goDetail(scope.row)"
            >
              <i class="el-icon-document" style="color: #66b1ff"></i>
            </el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="pages all-pagination-sty" ref="tablePagination">
          <el-pagination
            background
            layout="prev, pager, next, total"
            :total="pages.total"
            :page-size="pages.pageSize"
            :current-page="pages.current"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
    <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
  </div>
</template>

<script>
import {
  getNineTypeTree,
  getNinePage,
  getNineStatisticsNum,
} from "@/api/site/index.js";

export default {
  props: ["policeStaionID"],

  data() {
    return {
      type: null,
      isDanger: null,
      placeName: "",
      typeValue: "",
      typeOptions: [],
      tableData: [],
      yhcsNum: 0,
      yhNum: 0,
      yzgcsNum: 0,
      yzgyhNum: 0,
      wzgcsNum: 0,
      wzgyhNum: 0,
      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      callPhone: "",
      pages: {
        total: 0,
        pageSize: 12,
        current: 1,
      },
      nineType: "",
      policeName: "",
    };
  },
  computed: {
    positionColor() {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
          (row.lng && row.lng != 0) ||
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return "#1AFA29";
        } else {
          return "#ccc";
        }
      };
    },

    positionDisabled() {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
          (row.lng && row.lng != 0) ||
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return false;
        } else {
          return true;
        }
      };
    },
  },
  methods: {
    // 点击定位
    rowClick(row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0];
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1];

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000,
      });

      this.$EventBus.$emit("mapClearLayer", {
        layerName: "scanLayer",
        type: "VectorLayer",
      });
      this.$EventBus.$emit("layerPointAdd", {
        layerName: "scanLayer",
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
        },
        incident: this.siteClick,
      });
    },
    // 查看详情
    goDetail(row) {
      this.$refs.SiteDialogPopup.initOpen(row);
    },

    siteClick(e) {
      this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams);
    },

    // 清空按钮-清除图标图层
    clearRow() {
      this.isDanger = null;
      this.placeName = null;
      this.typeValue = null;
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "scanLayer",
        type: "VectorLayer",
      });
      this.$store.commit("SET_DIALOGDETAILPOPUP", false);
      this.pages.current = 1;
      this.getNinePage();
      this.getNineStatisticsNum();
    },
    // 切换登记类型
    typeChange(item) {
      this.pages.current = 1;
      this.getNinePage();
      this.getNineStatisticsNum();
    },
    /**
     * @description: 显示九小场所弹窗列表
     * @param {*} name
     * @param {*} type
     * @param {*} id
     * @param {*} value 类型参数
     * @return {*}
     */
    showplacedetail(type, name, value) {
      this.type = type;
      this.visible = true;
      this.title = name;
      this.pages.current = 1;
      // 获取九小场所隐患数量统计
      this.getNineStatisticsNum();
      this.getNineTypeTree(value);
      // this.getNinePage();
    },
    // 获取九小场所隐患数量统计
    getNineStatisticsNum() {
      var that = this;
      getNineStatisticsNum({
        nineType: this.typeValue,
        placeName: this.placeName,
      }).then((res) => {
        const data = res.data.data;
        that.yhcsNum = data[0].total;
        that.yhNum = data[0].patrolNum;
        that.yzgcsNum = data[1].total;
        that.yzgyhNum = data[1].patrolNum;
        that.wzgcsNum = data[2].total;
        that.wzgyhNum = data[2].patrolNum;
      });
    },
    getNineTypeTree(value) {
      getNineTypeTree().then((res) => {
        var data = res.data.data;
        if (value) {
          var arr = [];
          data.forEach((element) => {
            if (element.title == value) {
              arr.push({
                title: element.title,
                value: element.key,
              });
              this.typeValue = "" + element.key;
            }
          });
          this.typeOptions = arr;
          // 查询分页
          this.getNinePage();
        } else {
          this.typeOptions = data;
        }
      });
    },
    getNinePage() {
      this.curLoading = true;
      getNinePage({
        current: this.pages.current,
        size: this.pages.pageSize,
        nineType: this.typeValue,
        placeName: this.placeName,
        isDanger: this.type==1?1:"",
        deptId: this.policeStaionID
      })
        .then((res) => {
          const data = res.data.data;
          this.tableData = data.records;
          this.pages.total = data.total;
          setTimeout(() => {
            this.curLoading = false;
          }, 300);
        })
        .catch((error) => {
          setTimeout(() => {
            this.curLoading = false;
          }, 300);
        });
    },

    /**
     * @description: 九小场所列表弹窗中搜索
     * @return {*}
     */
    searchCurent() {
      this.landPage.current = 1;
      this.getNinePage();
    },

    clearSearchValue() {
      // this.isDanger = null;
      this.placeName = null;
      // this.typeValue = null;
      this.pages.current = 1;
      this.getNinePage();
    },

    /**
     * @description: 现有小区详情弹窗分页
     * @param {*} currentPage 当前页数
     * @return {*}
     */
    handleCurrentChange(currentPage) {
      this.pages.current = currentPage;
      this.getNinePage();
    },
    landBeforeClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>

 src/views/home/components/leftContainer.vue

@@ -803,7 +803,142 @@
                }, 500)
            })
        },
        // 九小场所echarts
        initPlaceEcharts(xDate, yDate,type){
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
            // 圆柱点击事件
            this.clickPlaceChart(type)
        },
        // 场所图表点击事件
        clickPlaceChart(type){
            this.tabTypeThree = type
            this.houseEchartsLoading = true
            houseMyChart.on('click', params => {
                this.$emit('showplacedetail', type, '九小场所列表', params.name)
            })
        },
        // 九小场所
        initPlaceOptions (xDate, y1Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2)
                        } else {
                            msg = params.value
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }

                ]
            }
        },
        // 房屋
        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
@@ -996,7 +1131,7 @@
                    })
                }

                this.inithouseEcharts(xDate, yDate)
                this.initPlaceEcharts(xDate, yDate,this.tabTypeTwo)

                setTimeout(() => {
                    this.houseEchartsLoading = false

 src/views/home/index.vue

@@ -12,6 +12,7 @@
<template>
    <div class="home-page container" v-show="isShowHomeContent">
        <left-container class="left-container" @showpeopledetail="showpeopledetail"
            @showplacedetail="showplacedetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"
            @showlanddetail="showlanddetail"></left-container>

@@ -629,6 +630,7 @@

        <land-details-box ref="landDetailsBox" :policeStaionID="policeStaionID"></land-details-box>
        <area-details-box ref="areaDetailsBox" :policeStaionID="policeStaionID"></area-details-box>
        <place-details-box ref="placeDetailsBox" :policeStaionID="policeStaionID"></place-details-box>
        <key-person-box ref="keyPersonBox" :policeStaionID="policeStaionID"></key-person-box>
    </div>
</template>
@@ -767,6 +769,7 @@

import landDetailsBox from './components/dialog/landDetailsBox.vue'
import areaDetailsBox from './components/dialog/areaDetailsBox.vue'
import placeDetailsBox from './components/dialog/placeDetailsBox.vue'
import keyPersonBox from './components/dialog/keyPersonBox.vue'

import { initMapPosition } from '@/utils/mapPositionInit'
@@ -990,7 +993,7 @@
        }
    },

    components: { leftContainer, rightContainer, bottomContainer, schedulingList, landDetailsBox, areaDetailsBox, keyPersonBox },
    components: { leftContainer, rightContainer, bottomContainer, schedulingList, landDetailsBox, placeDetailsBox, areaDetailsBox, keyPersonBox },

    computed: {
        ...mapGetters([
@@ -2736,6 +2739,17 @@
            return flvAddress
        },

        
        /**
         * @description: 显示九小场所列表
         * @param {*} id
         * @param {*} name
         * @return {*}
         */
         showplacedetail (id, name, isIncludeKeypeople, deptId) {
            this.$refs.placeDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
        },

        /**
         * @description: 显示户籍人口列表
         * @param {*} id

 src/views/rentalInfo/index.vue

@@ -347,7 +347,7 @@
                    },
                    {
                        label: '用途',
                        value: this.rentalUseTypeList.find(i => i.dictKey == row.rentalUse).dictValue
                        value: this.rentalUseTypeList.some(i => i.dictKey == row.rentalUse) ? this.rentalUseTypeList.find(i => i.dictKey == row.rentalUse).dictValue : ''
                    },
                    {
                        label: '租房时间',
@@ -379,7 +379,7 @@
                    },
                    {
                        label: '民族',
                        value: this.nationTypeList.find(i => i.dictKey == row.ethnicity).dictValue
                        value: this.nationTypeList.some(i => i.dictKey == row.ethnicity) ? this.nationTypeList.find(i => i.dictKey == row.ethnicity).dictValue :''
                    },
                    {
                        label: '性别',