智慧园区前端大屏
linwe
2024-11-13 51082cbb62be0df2bf90a5f49983ff6a98781c78
三道防线+三级防控
9 files modified
1 files added
367 ■■■■ changed files
src/api/emergencySupplies/emergencySupplies.js 9 ●●●●● patch | view | raw | blame | history
src/api/facility.js 10 ●●●●● patch | view | raw | blame | history
src/pages/layout/components/scomponents/layersControl.vue 2 ●●● patch | view | raw | blame | history
src/styles/element/index.scss 4 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/dataContent.vue 14 ●●●● patch | view | raw | blame | history
src/views/pac/components/box/dataContent.vue 155 ●●●●● patch | view | raw | blame | history
src/views/pac/components/leftContainer.vue 20 ●●●● patch | view | raw | blame | history
src/views/pac/components/rightContainer.vue 13 ●●●● patch | view | raw | blame | history
src/views/supplies/components/box/dataContent.vue 132 ●●●●● patch | view | raw | blame | history
src/views/survey/components/box/fireTrend.vue 8 ●●●●● patch | view | raw | blame | history
src/api/emergencySupplies/emergencySupplies.js
@@ -12,6 +12,15 @@
export const getCompanyList = (params) => {
    const url = `/yw/emergencySupplies/getEmergencySuppliesList`;
    return request({
        url,
        method: 'get',
        params,
    });
};
export const getList = (params) => {
    const url = `/yw/emergencySupplies/page`;
    return request({
src/api/facility.js
New file
@@ -0,0 +1,10 @@
import request from 'utils/http'
export const getFacilityList = (params) => {
    const url = `/yw/facility/getFacilityList`;
    return request({
        url,
        method: 'get',
        params,
    });
};
src/pages/layout/components/scomponents/layersControl.vue
@@ -555,7 +555,7 @@
EventBus.on('restHandleDelChange', restHandleDelChange)
onMounted(() => {
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
  // handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
})
// const sharedData = computed(() => pointStore.sharedData);
src/styles/element/index.scss
@@ -7,6 +7,8 @@
  border: none;
  .el-table__header-wrapper {
    font-size: 18px;
    tr {
      height: 38px;
      background: rgba(35, 53, 92, 0.8) !important;
@@ -24,6 +26,8 @@
  }
  .el-table__body-wrapper {
    font-size: 16px;
    table {
      border-collapse: separate !important;
      border-spacing: 0 10px !important;
src/views/companyInfo/components/box/dataContent.vue
@@ -9,7 +9,7 @@
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import { getList } from "@/api/space/space"
import { getFacilityList } from "@/api/facility"
import { onUnmounted, reactive } from 'vue'
const resData = reactive({
    data: [{
@@ -20,13 +20,13 @@
    }, {
        label: '防线二',
        value: '2',
        type: 1,
        type: 2,
        remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀'
    },
    {
        label: '防线三',
        value: '3',
        type: 1,
        type: 3,
        remark: '事故应急池、雨水收集池'
    }
    ]
@@ -41,12 +41,12 @@
            if (!addTileLayers[item.label]) {
                addTileLayers[item.label] = new DC.HtmlLayer(item.label)
                window.$viewer.addLayer(addTileLayers[item.label])
                getList({
                getFacilityList({
                    firmId: companyInfo.id,
                    size: 1000,
                    type: item.type,
                    facLevel: item.type
                }).then(res => {
                    let data = res.data.data.records
                    let data = res.data.data
                    data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                        let iconEl = ''
                        if ('showPanel' in item && item.showPanel == false) {
@@ -60,7 +60,7 @@
                            }
                        } else {
                            iconEl = `<div class="marsBlueGradientPnl">
                                 <div>${item.remark}</div>  </div>`
                                 <div>${i.name}</div>  </div>`
                        }
                        let divIcon = new DC.DivIcon(
                            new DC.Position(i.lng, i.lat, 0),
src/views/pac/components/box/dataContent.vue
@@ -1,25 +1,158 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 15:00:55
 * @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue
 * @LastEditTime: 2024-11-12 18:10:32
 * @FilePath: \bigScreen\src\views\space\components\leftContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'
import { getList } from "@/api/space/space"
import { onUnmounted, reactive } from 'vue'
const resData = reactive({
    data: [{
        label: '一级防控',
        value: '1',
        type: 1,
        remark: '防火提及配套设置、装置围堰、罐区围堰'
    }, {
        label: '二级防控',
        value: '2',
        type: 1,
        remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀'
    },
    {
        label: '三级防控',
        value: '3',
        type: 1,
        remark: '事故应急池、雨水收集池'
    }
    ]
})
const curSelect = ref('1')
let addTileLayers = {}
const handleCheckChange = (row) => {
    console.log(row)
    resData.data.forEach(item => {
        if (row.value === item.value) {
            if (!addTileLayers[item.label]) {
                addTileLayers[item.label] = new DC.HtmlLayer(item.label)
                window.$viewer.addLayer(addTileLayers[item.label])
                getList({
                    size: 1000,
                    preLevel: item.type,
                }).then(res => {
                    let data = res.data.data.records
                    data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                        let iconEl = ''
                        if ('showPanel' in item && item.showPanel == false) {
                            if (item.backgroundIcon) {
                                iconEl = `
                          <div class="map-name">${i[item.showParams] || i.name}</div>
                          <div class="map-icon">
                            <img src="${item.backgroundIcon}">
                          </div>
                          `
                            }
                        } else {
                            iconEl = `<div class="marsBlueGradientPnl">
                                 <div>${item.remark}</div>  </div>`
                        }
                        let divIcon = new DC.DivIcon(
                            new DC.Position(i.lng, i.lat, 0),
                            `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
                        )
                        divIcon.attrParams = i
                        let incident = () => { }
                        if (item.incident) incident = item.incident
                        divIcon.on(DC.MouseEventType.CLICK, incident)
                        addTileLayers[item.label].addOverlay(divIcon)
                    })
                })
            } else {
                addTileLayers[item.label].show = true
            }
        } else {
            if (addTileLayers[item.label]) {
                addTileLayers[item.label].show = false
            }
        }
    })
}
const tabClick = (item) => {
    handleCheckChange(item)
    curSelect.value = item.value
}
const showOn = computed(() => (item) => {
    if (curSelect.value == item.value) {
        return true
    }
    return false
})
onMounted(() => {
    tabClick(resData.data[0])
}),
    onUnmounted(() => {
        let arr = Object.keys(addTileLayers)
        arr.forEach(i => {
            addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
        })
    })
</script>
<template>
    <public-content>
        <template #content>
            <div>
    <div class="left-container cur-container">
        <div class="tablist h100">
            <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
                @click="tabClick(item)">
                <div class="nowrap-ellipsis-hidden">
                    {{ item.label }}
                </div>
            </div>
        </template>
    </public-content>
        </div>
    </div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.cur-container {
    background: transparent;
    pointer-events: none;
    .tablist {
        pointer-events: all;
        &>div {
            margin-top: 86px;
            padding: 10px;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            border-radius: 50%;
            box-shadow: inset 0 0 40px #409eff;
            color: #fff;
            box-sizing: content-box;
            &.on {
                position: relative;
                color: #75b1ff;
            }
        }
    }
}
</style>
src/views/pac/components/leftContainer.vue
@@ -19,30 +19,38 @@
    <div class="data box">
      <title-box>
        <template #titleName>
          数据概览2
          <!-- 数据概览2 -->
        </template>
      </title-box>
      <data-content></data-content>
    </div>
    <div class="unit box">
    <!-- <div class="unit box">
      <title-box>
        <template #titleName>
          入住单位统计
        </template>
      </title-box>
      <unit-content></unit-content>
    </div>
    </div> -->
    <div class="fire box">
    <!-- <div class="fire box">
      <title-box>
        <template #titleName>
          实时火警事件
        </template>
      </title-box>
      <fire-content></fire-content>
    </div>
    </div> -->
  </div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.left-container {
  background: none;
}
.left-container>div .title-box {
  background: none;
}
</style>
src/views/pac/components/rightContainer.vue
@@ -17,32 +17,32 @@
<template>
  <div class="right-container">
    <div class="fire-source box">
    <!-- <div class="fire-source box">
      <title-box>
        <template #titleName>
          火警事件来源
        </template>
      </title-box>
      <fire-source></fire-source>
    </div>
    </div> -->
    <div class="occur-statistics box">
    <!-- <div class="occur-statistics box">
      <title-box>
        <template #titleName>
          易发区统计
        </template>
      </title-box>
      <fire-trend></fire-trend>
    </div>
    </div> -->
    <div class="fire-trend box">
    <!-- <div class="fire-trend box">
      <title-box>
        <template #titleName>
          火警上报趋势
        </template>
      </title-box>
      <occur-statistics></occur-statistics>
    </div>
    </div> -->
  </div>
</template>
@@ -57,6 +57,7 @@
  width: 440px;
  height: 100%;
  pointer-events: auto;
  background: none;
  .box {
    margin-top: 20px;
src/views/supplies/components/box/dataContent.vue
@@ -17,23 +17,21 @@
        <div class="page_box">
          <div>
            <el-table empty-text="" v-if="formInline.ownership == 1" :data="tableData" style="width: 100%"
              :header-cell-style="headerCellStyle" :cell-style="tableCellStyle">
              <el-table-column fixed prop="name" label="物资名称" />
              <el-table-column fixed prop="personInCha" label="负责人" />
              <el-table-column fixed prop="personInChaPhone" label="负责人电话" />
              <el-table-column fixed prop="stoLoc" label="物资地址" />
              <el-table-column prop="numUnit" label="数量" width="100" />
            <el-table empty-text="" v-if="formInline.ownership == 1" :data="tableData">
              <el-table-column prop="name" label="物资名称" />
              <el-table-column prop="personInCha" label="负责人" width="150" />
              <el-table-column prop="personInChaPhone" label="负责人电话" width="250" />
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="numUnit" label="数量" width="150" />
            </el-table>
            <el-table empty-text="" v-else :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle"
              :cell-style="tableCellStyle">
              <el-table-column fixed prop="firmName" label="企业名称" />
              <el-table-column fixed prop="name" label="物资名称" />
              <el-table-column fixed prop="personInCha" label="负责人" />
              <el-table-column fixed prop="personInChaPhone" label="负责人电话" />
              <el-table-column fixed prop="stoLoc" label="物资地址" />
              <el-table-column prop="numUnit" label="数量" width="100" />
            <el-table empty-text="" v-else :data="tableData">
              <!-- <el-table-column prop="firmName" label="企业名称" /> -->
              <el-table-column prop="name" label="物资名称" />
              <!-- <el-table-column prop="personInCha" label="负责人" /> -->
              <!-- <el-table-column prop="personInChaPhone" label="负责人电话" /> -->
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="num" label="数量" />
            </el-table>
          </div>
        </div>
@@ -44,7 +42,7 @@
<script setup>
import publicContent from "./publicContent.vue";
import { getList } from "@/api/emergencySupplies/emergencySupplies";
import { getList, getCompanyList } from "@/api/emergencySupplies/emergencySupplies";
import { getPage } from '@/api/indParkInfo'
import { reactive, ref, onMounted } from "vue";
import { ElScrollbar } from 'element-plus';
@@ -70,13 +68,24 @@
  getCompanyPages()
});
// const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (columnIndex === 0) {
//     if (rowIndex % 2 === 0) {
//       return {
//         rowspan: 2,
//         colspan: 1
//       }
//     } else {
//       return {
//         rowspan: 0,
//         colspan: 0
//       }
//     }
//   }
// }
const scrollbarRef = ref(null);
const inputSlider = (number) => {
  if (scrollbarRef.value) {
    scrollbarRef.value.setScrollTop(number);
  }
}
// 搜索条件
const formInline = reactive({
@@ -108,47 +117,48 @@
  if (item.id == 1) {
    formInline.firmId = ''
    formInline.ownership = 1
    getLists(formInline);
  } else {
    formInline.firmId = item.id
    formInline.ownership = 2
    getComLists(formInline)
  }
  getLists(formInline);
}
// 表格样式
const tableCellStyle = ({ row, column }) => {
  return { background: "#152851", color: "#fff" };
};
// const tableCellStyle = ({ row, column }) => {
//   return { background: "#152851", color: "#fff" };
// };
// 表格表头样式
const headerCellStyle = ({ }) => {
  return {
    background: "#152851",
    color: "#fff",
  };
};
// const headerCellStyle = ({ }) => {
//   return {
//     background: "#152851",
//     color: "#fff",
//   };
// };
// 分页树改变
const handleSizeChange = (val) => {
  pages.pageSize = val;
  getLists(formInline);
}
// const handleSizeChange = (val) => {
//   pages.pageSize = val;
//   getLists(formInline);
// }
// 分页改变
const handleCurrentChange = (val) => {
  pages.page = val;
  getLists(formInline);
}
// const handleCurrentChange = (val) => {
//   pages.page = val;
//   getLists(formInline);
// }
// 重置条件
const clearBtn = () => {
  formInline.name = ''
  formInline.ownership = ''
  pages.page = 1
  pages.pageSize = 1000
  pages.total = 0
  getLists(formInline);
}
// const clearBtn = () => {
//   formInline.name = ''
//   formInline.ownership = ''
//   pages.page = 1
//   pages.pageSize = 1000
//   pages.total = 0
//   getLists(formInline);
// }
// 查询分页数据
function getLists(param = {}) {
@@ -158,14 +168,26 @@
  getList(param)
    .then((res) => {
      const data = res.data.data;
      data.records.forEach((element) => {
        if (element.ownership == -1) {
          element.ownership = "园区";
        } else {
          element.ownership = "企业";
        }
      });
      tableData.value = data.records;
      pages.total = data.total;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
      console.log(err);
    });
}
// 查询分页数据
function getComLists(param = {}) {
  param.current = pages.page;
  param.size = pages.pageSize;
  loading.value = true;
  getCompanyList(param)
    .then((res) => {
      const data = res.data.data;
      tableData.value = data.dataList;
      pages.total = data.total;
      loading.value = false;
    })
@@ -233,7 +255,7 @@
.page_box .el-table {
  width: 100%;
  height: 680px;
  background-color: rgba(117, 116, 116, 0.3);
  // background-color: rgba(117, 116, 116, 0.3);
}
.active {
src/views/survey/components/box/fireTrend.vue
@@ -24,8 +24,10 @@
})
function getPages () {
  getPage().then(res => {
function getPages() {
  getPage({
    size: 100,
  }).then(res => {
    parkQy.value = res.data.data.records
    // console.log(res)
  }).catch(err => {
@@ -33,7 +35,7 @@
  })
}
function search () {
function search() {
  getPage({ name: searchQuery.value }).then(res => {
    parkQy.value = res.data.data.records
    console.log(res)