Merge remote-tracking branch 'origin/main'
# Conflicts:
# src/views/space/components/box/dataContent.vue
12 files modified
6 files deleted
| | |
| | | <div :style="{ flex: item.flex || 1, minWidth: '28%', ...item.customClass || '' }" class="search-cont" |
| | | v-if="showCurSelect(item)"> |
| | | <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span> |
| | | <el-select :teleported="false" :size="item.size || 'small'" v-model="params[item.props]" |
| | | <el-select :teleported="false" :size="item.size || ''" v-model="params[item.props]" |
| | | :clearable="item.clearable || false" :multiple="item.multiple || false" collapse-tags |
| | | :placeholder="item.placeholder || (item.label ? '请选择' + item.label : '请选择')" |
| | | :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" |
| | |
| | | <div :style="{ flex: item.flex || 1, minWidth: '28%', ...item.customClass || '' }" class="search-cont" |
| | | v-if="item.type === 'input'"> |
| | | <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span> |
| | | <el-input :size="item.size || 'small'" v-model="params[item.props]" :clearable="item.clearable || false" |
| | | <el-input :size="item.size || ''" v-model="params[item.props]" :clearable="item.clearable || false" |
| | | :placeholder="item.placeholder || (item.label ? '请输入' + item.label : '请输入')" |
| | | :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchInputChange($event, item)"> |
| | | </el-input> |
| | |
| | | |
| | | <div class="search-cont" v-if="item.type === 'datePicker'"> |
| | | <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span> |
| | | <el-date-picker :append-to-body="false" :size="item.size || 'small'" v-model="params[item.props]" |
| | | <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" |
| | | :pickerOptions="item.pickerOptions || {}" :format="item.format || 'yyyy-MM-dd HH:mm:ss'" |
| | | :clearable="item.clearable || false" :type="item.pickerType || 'daterange'" range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期" :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'" |
| | |
| | | <!-- :picker-options="pickerOptions" --> |
| | | <div class="search-cont" v-if="item.type === 'date' && options.quickDateBtn"> |
| | | <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span> |
| | | <el-date-picker :append-to-body="false" :size="item.size || 'small'" v-model="params[item.props]" type="date" |
| | | <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" type="date" |
| | | :clearable="item.clearable || false" :placeholder="item.placeholder || item.label || '选择时间'" |
| | | :style="{ width: $px2rem(`${item.width || '140'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }" |
| | | :editable="false" :disabled="currentDateType != 3" :value-format="item.format || 'yyyy-MM-dd'"> |
| | |
| | | |
| | | <div class="search-cont" v-if="item.type === 'multiDate' && options.quickMultiDateBtn"> |
| | | <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span> |
| | | <el-date-picker :append-to-body="false" :size="item.size || 'small'" v-model="params[item.props]" |
| | | <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" |
| | | :type="multiDateType" :key="multiDateType" :clearable="item.clearable || false" |
| | | :placeholder="item.placeholder || item.label || '多选择时间'" :editable="false" |
| | | :style="{ width: $px2rem(`${item.width || '180'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }" |
| | |
| | | <div class="search-cont search-cont-btn" v-if="options.searchBtnGroup"> |
| | | <el-button v-if="options.searchBtn || false" |
| | | :type="options.searchBtnTitleShow ? '' : options.searchType || 'primary'" |
| | | :disabled="options.searchDisabled || false" :size="options.searchSize || 'small'" :icon="Search" |
| | | :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search" |
| | | @click="searchClick" :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{ |
| | | options.searchBtnTitleShow ? |
| | | options.searchBtnTitle : '查 询' |
| | | }}</el-button> |
| | | |
| | | <el-button v-if="options.resetBtn || false" :type="options.resetType || ''" |
| | | :disabled="options.resetDisabled || false" :size="options.resetSize || 'small'" :icon="Refresh" |
| | | :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh" |
| | | @click="resetClick" class="btn-h32-w76 reset-btn">重 |
| | | 置</el-button> |
| | | |
| | | <el-button v-if="options.exportBtn || false" :type="options.exportType || 'primary'" |
| | | :disabled="options.exportDisabled || false" :size="options.exportSize || 'small'" :icon="Download" |
| | | :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download" |
| | | @click="exportClick" class="btn-h32-w76">导 出</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-18 17:07:09 |
| | | * @LastEditTime: 2024-11-19 15:53:37 |
| | | * @FilePath: \bigScreen\src\pages\layout\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | { |
| | | id: '4', |
| | | label: '风险源', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getRiskList, |
| | | params: { |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-box', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | showPanel: false, |
| | | layerName: 'fxy' |
| | | children: [ |
| | | { |
| | | id: '4-1', |
| | | label: '一般', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getRiskList, |
| | | params: { |
| | | riskLevel: 1, |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-ordinary', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | showPanel: false, |
| | | layerName: 'fxyOrdinary', |
| | | }, |
| | | { |
| | | id: '4-2', |
| | | label: '较大', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getRiskList, |
| | | params: { |
| | | riskLevel: 2, |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-larger', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | showPanel: false, |
| | | layerName: 'fxyLarger', |
| | | } |
| | | ] |
| | | }, |
| | | |
| | | { |
| | |
| | | /* |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-28 18:24:16 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-19 18:03:04 |
| | | * @FilePath: \bigScreen\src\store\map.js |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2024 by shuishen, All Rights Reserved. |
| | | */ |
| | | // src/stores/useUserStore.js |
| | | import { defineStore } from 'pinia' |
| | | |
| | | export const useMap = defineStore('map', { |
| | | // 存储状态的地方,相当于 Vuex 的 state |
| | | state: () => ({ |
| | | loadMap: false |
| | | loadMap: false, |
| | | pointHeight: 64 |
| | | }), |
| | | |
| | | // 相当于 Vuex 的 getters,用于计算状态 |
| | |
| | | } |
| | | } |
| | | |
| | | .fxy-box { |
| | | .fxy-ordinary { |
| | | &::after { |
| | | background: linear-gradient(to bottom, rgba(255, 201, 0, 0.8), rgba(255, 201, 0, 0.2)); |
| | | } |
| | | |
| | | .map-name { |
| | | color: rgba(255, 201, 0, 1); |
| | | } |
| | | |
| | | .map-icon { |
| | | background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 201, 0, 0.9) 100%); |
| | | box-shadow: 0px 0px 10px rgb(255, 201, 0); |
| | | } |
| | | } |
| | | |
| | | .fxy-larger { |
| | | &::after { |
| | | background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2)); |
| | | } |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @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-19 17:57:39 |
| | | * @FilePath: \bigScreen\src\views\rs\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import publicContent from "./publicContent.vue"; |
| | | import { getList } from "@/api/riskSource/riskSource"; |
| | | import { reactive } from "vue"; |
| | | import EventBus from 'utils/bus' |
| | | import { getList } from "@/api/riskSource/riskSource" |
| | | import { nextTick, onUnmounted, reactive } from "vue" |
| | | const SeachBarCondition = ref(null) |
| | | const loading = ref(false) |
| | | const TableContent = ref(null) |
| | | const curTableHeight = ref(0) |
| | | const curSelectTabType = ref('') |
| | | |
| | | const loading = ref(false); |
| | | |
| | | const tableData = ref([]); |
| | | const pages = { |
| | | page: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | }; |
| | | |
| | | let data = reactive({ |
| | | companyInfo: {} |
| | | // 搜索项配置 |
| | | const options = reactive({ |
| | | searchBtnGroup: true, |
| | | searchBtn: true, |
| | | resetBtn: true, |
| | | exportBtn: false, |
| | | columns: [ |
| | | { |
| | | type: 'input', |
| | | props: 'name', |
| | | placeholder: '请输入名称', |
| | | changeSearch: true, |
| | | flex: 1, |
| | | } |
| | | ] |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | data.companyInfo = JSON.parse(localStorage.getItem('companyInfo')) |
| | | getLists(); |
| | | }); |
| | | // 表格样式 |
| | | const tableCellStyle = ({ row, column }) => { |
| | | return { background: "#152851", color: "#fff" }; |
| | | }; |
| | | // 表格表头样式 |
| | | const headerCellStyle = ({ }) => { |
| | | return { |
| | | background: "#152851", |
| | | color: "#fff", |
| | | }; |
| | | }; |
| | | // 搜索条件 |
| | | const riskSource = reactive({ |
| | | name: "", |
| | | ownership: '' |
| | | }); |
| | | |
| | | // 提交查询 |
| | | const onSubmit = () => { |
| | | pages.page = 1 |
| | | pages.pageSize = 13 |
| | | pages.total = 0 |
| | | console.log("submit!"); |
| | | getLists(riskSource); |
| | | }; |
| | | |
| | | // 分页树改变 |
| | | const handleSizeChange = (val) => { |
| | | pages.pageSize = val; |
| | | getLists(riskSource); |
| | | const tableData = ref([]) |
| | | const pages = { |
| | | page: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | | } |
| | | |
| | | function 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" |
| | | } |
| | | } |
| | | } |
| | | |
| | | function 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 |
| | | } |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | curTableHeight.value = TableContent.value.offsetHeight |
| | | }) |
| | | |
| | | // 分页改变 |
| | | const handleCurrentChange = (val) => { |
| | | pages.page = val; |
| | | getLists(riskSource); |
| | | } |
| | | // 重置条件 |
| | | const clearBtn = () => { |
| | | riskSource.name = '' |
| | | riskSource.ownership = '' |
| | | pages.page = 1 |
| | | pages.pageSize = 13 |
| | | pages.total = 0 |
| | | getLists(riskSource); |
| | | pages.page = val |
| | | getLists(SeachBarCondition.value.getSeachCondition()) |
| | | } |
| | | |
| | | // 查询分页数据 |
| | | function getLists(param = {}) { |
| | | param.current = pages.page; |
| | | param.size = pages.pageSize; |
| | | loading.value = true; |
| | | 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); |
| | | }); |
| | | const getLists = (param = {}) => { |
| | | param.current = pages.page |
| | | param.size = pages.pageSize |
| | | loading.value = true |
| | | getList({ |
| | | ...param, |
| | | riskLevel: curSelectTabType.riskLevel |
| | | }) |
| | | .then((res) => { |
| | | const data = res.data.data |
| | | tableData.value = data.records |
| | | pages.total = data.total |
| | | loading.value = false |
| | | }) |
| | | .catch((err) => { |
| | | loading.value = false |
| | | console.log(err) |
| | | }) |
| | | } |
| | | |
| | | let state = reactive({ |
| | | layer: {} |
| | | }) |
| | | |
| | | // 行点击 |
| | | function rowClick (row) { |
| | | |
| | | // if (state.layer) { |
| | | // window.$viewer.removeLayer(state.layer) |
| | | // } |
| | | // let layer = new DC.HtmlLayer(`${row.id}`) |
| | | // state.layer = layer |
| | | // window.$viewer.addLayer(layer) |
| | | // let iconEl = `<div class="marsBlueGradientPnl"> |
| | | // <div>${row.name}</div> |
| | | // </div>` |
| | | // let divIcon = new DC.DivIcon( |
| | | // new DC.Position(row.lng, row.lat, 0), |
| | | // `<div class="public-map-popup"> |
| | | // ${iconEl} |
| | | // </div>` |
| | | // ) |
| | | // let incident = () => { } |
| | | // divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | // layer.addOverlay(divIcon) |
| | | |
| | | window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0)) |
| | | |
| | | } |
| | | |
| | | |
| | | // 查看详情 |
| | | function goDetail (row) { } |
| | | |
| | | const searchBtn = (params) => { |
| | | resetPage() |
| | | getLists(params) |
| | | } |
| | | |
| | | const resetBtn = (params) => { |
| | | resetPage() |
| | | getLists(params) |
| | | } |
| | | |
| | | // 重置分页数据 |
| | | const resetPage = () => { |
| | | pages.page = 1 |
| | | pages.pageSize = 10 |
| | | pages.total = 0 |
| | | } |
| | | |
| | | // 分页树改变 |
| | | const handleSizeChange = (val) => { |
| | | pages.pageSize = val |
| | | getLists(SeachBarCondition.value.getSeachCondition()) |
| | | } |
| | | |
| | | const spaceTabChange = (type) => { |
| | | curSelectTabType.riskLevel = type |
| | | |
| | | nextTick(() => { |
| | | searchBtn(SeachBarCondition.value.getSeachCondition()) |
| | | }) |
| | | } |
| | | |
| | | EventBus.on('rsTabChange', spaceTabChange) |
| | | |
| | | onUnmounted(() => { |
| | | EventBus.off('rsTabChange', spaceTabChange) |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <public-content> |
| | | <template #content> |
| | | <div class="search-box"> |
| | | <el-form :inline="true" :model="riskSource" class="demo-form-inline"> |
| | | <el-form-item label="" class="form-item-input"> |
| | | <el-input v-model="riskSource.name" placeholder="请输入风险源" clearable style="width: 120px" /> |
| | | </el-form-item> |
| | | <el-form-item class="transparent-select" label=""> |
| | | <el-select v-model="riskSource.riskLevel" placeholder="请选择等级" clearable style="width: 120px"> |
| | | <el-option label="一般" value="1" /> |
| | | <el-option label="较大" value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item class="search-btn"> |
| | | <el-button type="primary" @click="onSubmit">查询</el-button> |
| | | <el-button type="primary" @click="clearBtn">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" |
| | | :cell-style="tableCellStyle" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.1)"> |
| | | <el-table-column prop="firmName" label="单位名称" /> |
| | | <el-table-column prop="riskLevelName" label="等级" width="100" /> |
| | | <el-table-column show-overflow-tooltip fixed prop="name" label="风险源" /> |
| | | </el-table> |
| | | </div> |
| | | <div class="el-page"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | <div class="w100 h0 flex-1 flex f-d-c"> |
| | | <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" |
| | | ref="SeachBarCondition"></global-search> |
| | | |
| | | <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading" element-loading-background="rgba(46, 81, 136, 0.9)"> |
| | | <el-table border :data="tableData" :height="curTableHeight" style="width: 100%"> |
| | | <el-table-column align="center" label="序号" width="62" prop="rank"> |
| | | <template #default="{ $index, row }"> |
| | | {{ (pages.page - 1) * pages.pageSize + $index + 1 }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" show-overflow-tooltip prop="name" label="名称" /> |
| | | <el-table-column align="center" show-overflow-tooltip prop="category" label="类别" width="96" /> |
| | | <el-table-column align="center" show-overflow-tooltip prop="mainProduct" label="主要产品" width="112" /> |
| | | <el-table-column align="center" width="62" label="操作"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" :disabled="scope.row.lng == ''" @click="rowClick(scope.row)"> |
| | | 定位 |
| | | </el-button> |
| | | <!-- <el-button link type="primary" size="small" @click="goDetail"> |
| | | <i class="el-icon-document" style="color: #66b1ff"></i>详情 |
| | | </el-button> --> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <div class="el-page"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" size="small" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .el-form-item__label { |
| | | color: #fff !important; |
| | | color: #fff !important; |
| | | } |
| | | |
| | | .search-box { |
| | | ::v-deep .el-table__body-wrapper { |
| | | background-color: #152851; |
| | | } |
| | | } |
| | | |
| | | /* 当表格没有数据时,修改表格的背景颜色 */ |
| | | .el-table--empty .el-table__body { |
| | | background-color: rgba(135, 158, 199, 0.3) !important; |
| | | /* 你想要的背景颜色 */ |
| | | .table-content { |
| | | flex-basis: auto; |
| | | height: calc(100% - 40px); |
| | | } |
| | | |
| | | .el-page { |
| | | margin-top: 10px; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | z-index: 999; |
| | | } |
| | | |
| | | .form-item-input { |
| | | width: 160px; |
| | | |
| | | ::v-deep(.el-input) { |
| | | width: 0; |
| | | flex: 1; |
| | | |
| | | .el-input__wrapper { |
| | | font-size: 16px; |
| | | font-weight: 400; |
| | | border-radius: 0; |
| | | background: rgba(135, 158, 199, 0.3); |
| | | box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95); |
| | | |
| | | .el-input__inner { |
| | | color: #BFD3E5; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | .search-btn { |
| | | ::v-deep .el-button--primary { |
| | | background-color: transparent; |
| | | border-color: none; |
| | | border: none; |
| | | cursor: pointer; |
| | | color: #edffff; |
| | | background: rgba(135, 158, 199, 0.3); |
| | | box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95); |
| | | } |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 100%; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | } |
| | | </style> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-10-25 18:43:23 |
| | | * @FilePath: \bigScreen\src\views\statistics\components\leftContainer.vue |
| | | * @LastEditTime: 2024-11-19 17:25:37 |
| | | * @FilePath: \bigScreen\src\views\rs\components\leftContainer.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import dataContent from './box/dataContent.vue' |
| | | import unitContent from './box/unitContent.vue' |
| | | import fireContent from './box/fireContent.vue' |
| | | import EventBus from 'utils/bus' |
| | | |
| | | import { getDictionary } from "@/api/dict/dict" |
| | | import { nextTick, onUnmounted, reactive } from 'vue' |
| | | const resData = reactive({ |
| | | data: [ |
| | | { |
| | | label: '一般', |
| | | value: 1 |
| | | }, |
| | | { |
| | | label: '较大', |
| | | value: 2 |
| | | } |
| | | ] |
| | | }) |
| | | const curSelect = ref('') |
| | | |
| | | const tabClick = (item) => { |
| | | console.log(item, 12312) |
| | | if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`) |
| | | curSelect.value = item.value |
| | | EventBus.emit('restHandleCheckChange', `4-${item.value}`) |
| | | EventBus.emit('rsTabChange', item.value) |
| | | } |
| | | |
| | | nextTick(() => { |
| | | tabClick(resData.data[0]) |
| | | }) |
| | | |
| | | const showOn = computed(() => (item) => { |
| | | if (curSelect.value == item.value) { |
| | | return true |
| | | } |
| | | |
| | | return false |
| | | }) |
| | | |
| | | onUnmounted(() => { |
| | | if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`) |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="left-container"> |
| | | <div class="data box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 风险源列表 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <data-content></data-content> |
| | | <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="label-box"> |
| | | {{ item.label }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="unit box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 入住单位统计 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <unit-content></unit-content> |
| | | </div> |
| | | </div> --> |
| | | |
| | | <!-- <div class="fire box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 实时火警事件 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <fire-content></fire-content> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content-box { |
| | | margin-top: 20px; |
| | | position: absolute; |
| | | .cur-container { |
| | | background: transparent; |
| | | pointer-events: none; |
| | | |
| | | .tablist { |
| | | pointer-events: all; |
| | | |
| | | &>div { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-top: 16px; |
| | | padding: 10px; |
| | | width: 64px; |
| | | height: 64px; |
| | | |
| | | border-radius: 50%; |
| | | box-shadow: inset 0 0 40px #409eff; |
| | | color: #fff; |
| | | box-sizing: content-box; |
| | | |
| | | &.on { |
| | | position: relative; |
| | | color: #75b1ff; |
| | | } |
| | | |
| | | .label-box { |
| | | line-height: 24px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-10-26 14:49:05 |
| | | * @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue |
| | | * @LastEditTime: 2024-11-19 16:01:24 |
| | | * @FilePath: \bigScreen\src\views\rs\components\rightContainer.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import fireSource from './box/fireSource.vue' |
| | | import fireTrend from './box/fireTrend.vue' |
| | | import occurStatistics from './box/occurStatistics.vue' |
| | | import publicContent from './box/publicContent.vue' |
| | | import dataContent from './box/dataContent.vue' |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="right-container"> |
| | | <div class="fire-source box"> |
| | | <div class="data box h0 flex-1"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 火警事件来源 |
| | | 风险源信息 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <fire-source></fire-source> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="occur-statistics box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 易发区统计 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <fire-trend></fire-trend> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="fire-trend box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 火警上报趋势 |
| | | </template> |
| | | </title-box> |
| | | <div class="content-box"> |
| | | <occur-statistics></occur-statistics> |
| | | <data-content></data-content> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .right-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 20px; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | width: 440px; |
| | | height: 100%; |
| | | pointer-events: auto; |
| | | |
| | | .box { |
| | | margin-top: 20px; |
| | | |
| | | .header { |
| | | height: 32px; |
| | | background: url(/img/bg/sub-title.png) no-repeat; |
| | | } |
| | | } |
| | | |
| | | .fire-source { |
| | | flex: 3; |
| | | } |
| | | |
| | | .occur-statistics { |
| | | flex: 3; |
| | | } |
| | | |
| | | .fire-trend { |
| | | flex: 4; |
| | | } |
| | | |
| | | .box:first-child { |
| | | margin-top: 0; |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped></style> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-11 18:26:24 |
| | | * @LastEditTime: 2024-11-19 15:57:09 |
| | | * @FilePath: \bigScreen\src\views\rs\index.vue |
| | | * @Description: 综合设计 |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import { onMounted, onUnmounted } from 'vue' |
| | | import leftContainer from './components/leftContainer.vue' |
| | | import rightContainer from './components/rightContainer.vue' |
| | | import EventBus from 'utils/bus' |
| | | |
| | | onMounted(() => { |
| | | EventBus.emit('restHandleCheckChange', '4'); |
| | | }) |
| | | |
| | | onUnmounted(() => { |
| | | EventBus.emit('restHandleDelChange', '4'); |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="container page-container"> |
| | | <left-container></left-container> |
| | | <right-container></right-container> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-15 14:58:23 |
| | | * @LastEditTime: 2024-11-19 17:41:11 |
| | | * @FilePath: \bigScreen\src\views\space\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import EventBus from 'utils/bus' |
| | |
| | | exportBtn: false, |
| | | columns: [ |
| | | { |
| | | label: "名称", |
| | | type: 'input', |
| | | props: 'name', |
| | | placeholder: '请输入名称', |
| | |
| | | const tableData = ref([]) |
| | | const pages = { |
| | | page: 1, |
| | | pageSize: 10, |
| | | pageSize: 20, |
| | | total: 0, |
| | | } |
| | | |
| | | function positionColor() { |
| | | function positionColor () { |
| | | return (row) => { |
| | | if ( |
| | | (row.X && row.X != 0) || |
| | |
| | | } |
| | | } |
| | | |
| | | function positionDisabled() { |
| | | function positionDisabled () { |
| | | return (row) => { |
| | | if ( |
| | | (row.X && row.X != 0) || |
| | |
| | | |
| | | |
| | | // 行点击 |
| | | function rowClick(row) { |
| | | function rowClick (row) { |
| | | |
| | | // if (state.layer) { |
| | | // window.$viewer.removeLayer(state.layer) |
| | |
| | | |
| | | |
| | | // 查看详情 |
| | | function goDetail(row) { } |
| | | function goDetail (row) { } |
| | | |
| | | const searchBtn = (params) => { |
| | | resetPage() |
| | |
| | | // 重置分页数据 |
| | | const resetPage = () => { |
| | | pages.page = 1 |
| | | pages.pageSize = 10 |
| | | pages.pageSize = 20 |
| | | pages.total = 0 |
| | | } |
| | | |
| | |
| | | |
| | | <template> |
| | | <div class="w100 h0 flex-1 flex f-d-c"> |
| | | <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> |
| | | <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" |
| | | ref="SeachBarCondition"></global-search> |
| | | |
| | | <div class="h0 flex-1 table-content" ref="TableContent"> |
| | | <el-table border :data="tableData" :height="curTableHeight" style="width: 100%" v-loading="loading"> |
| | | <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading" |
| | | element-loading-background="rgba(46, 81, 136, 0.9)"> |
| | | <el-table border :data="tableData" :height="curTableHeight" style="width: 100%"> |
| | | <el-table-column align="center" label="序号" width="62" prop="rank"> |
| | | <template #default="{ $index, row }"> |
| | | {{ (pages.page - 1) * pages.pageSize + $index + 1 }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="名称" /> |
| | | <el-table-column prop="emergencySpaceType" label="类型" width="130" /> |
| | | <el-table-column prop="mainFuncName" label="作用" width="70" /> |
| | | <el-table-column width="70" label="操作" align="center"> |
| | | <el-table-column prop="mainFuncName" label="作用" width="62" /> |
| | | <el-table-column width="62" label="操作" align="center"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" :disabled="scope.row.lng == ''" @click="rowClick(scope.row)"> |
| | | 定位 |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-04 16:32:04 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-05 17:12:37 |
| | | * @LastEditTime: 2024-11-19 15:29:44 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | |
| | | --> |
| | | <script setup> |
| | | // import { ref, reactive, onMounted, nextTick, inject } from 'vue' |
| | | import { useEchartsResize } from "hooks/useEchartsResize"; |
| | | import { getRescueTeamStatistic } from "@/api/indParkInfo"; |
| | | import { nextTick } from "vue"; |
| | | import { useEchartsResize } from "hooks/useEchartsResize" |
| | | import { getRescueTeamStatistic } from "@/api/indParkInfo" |
| | | import { nextTick } from "vue" |
| | | |
| | | let $echarts = inject("echarts"); |
| | | const curEcharts = ref(null); |
| | | let $echarts = inject("echarts") |
| | | const curEcharts = ref(null) |
| | | |
| | | let myEcharts = reactive(null); |
| | | let myEcharts = reactive(null) |
| | | |
| | | function getStatistic() { |
| | | function getStatistic () { |
| | | getRescueTeamStatistic().then((res) => { |
| | | let xaxis_data = []; |
| | | let yaxis_data = []; |
| | | let xaxis_data = [] |
| | | let yaxis_data = [] |
| | | res.data.data.forEach((element) => { |
| | | xaxis_data.push(element.type); |
| | | yaxis_data.push(element.num); |
| | | }); |
| | | xaxis_data.push(element.type) |
| | | yaxis_data.push(element.num) |
| | | }) |
| | | |
| | | myEcharts.setOption({ |
| | | tooltip: { |
| | |
| | | color: "#fff", |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: "#fff", |
| | | }, |
| | |
| | | axisLabel: { |
| | | color: "#fff", |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | } |
| | | }, |
| | | ], |
| | | series: [ |
| | |
| | | }, |
| | | }, |
| | | ], |
| | | }); |
| | | }); |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | nextTick(() => { |
| | | myEcharts = $echarts.init(curEcharts.value); |
| | | getStatistic(); |
| | | }); |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | getStatistic() |
| | | }) |
| | | |
| | | const echartsResize = () => { |
| | | myEcharts && myEcharts.resize(); |
| | | }; |
| | | myEcharts && myEcharts.resize() |
| | | } |
| | | |
| | | useEchartsResize(echartsResize); |
| | | useEchartsResize(echartsResize) |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-04 16:32:04 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-05 17:42:44 |
| | | * @LastEditTime: 2024-11-19 15:33:32 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\fireContent.vue |
| | | * @Description: |
| | | * |
| | |
| | | } |
| | | ] |
| | | |
| | | function getRiskSource() { |
| | | function getRiskSource () { |
| | | getRiskSourceStatistic().then(res => { |
| | | let data = res.data.data |
| | | let dataRsult = [] |
| | | var total = 0; |
| | | var total = 0 |
| | | data.forEach(item => { |
| | | dataRsult.push({ |
| | | name: item.riskLevel, |
| | | value: item.num, |
| | | itemStyle: typeLevel.find(i => i.name == item.riskLevel).itemStyle |
| | | }) |
| | | total = total + item.num; |
| | | total = total + item.num |
| | | }) |
| | | |
| | | myEcharts.setOption({ |
| | |
| | | |
| | | legend: { |
| | | orient: "vertical", |
| | | top: "5%", |
| | | top: "40%", |
| | | left: "5%", |
| | | textStyle: { |
| | | color: "#fff", |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-05 17:15:55 |
| | | * @LastEditTime: 2024-11-19 15:33:01 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\unitContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import { useEchartsResize } from "hooks/useEchartsResize"; |
| | | import { useEchartsResize } from "hooks/useEchartsResize" |
| | | |
| | | import { getEmergencySpaceStatistic } from "../../../../api/indParkInfo"; |
| | | import { getEmergencySpaceStatistic } from "../../../../api/indParkInfo" |
| | | |
| | | let $echarts = inject("echarts"); |
| | | const curEcharts = ref(null); |
| | | let $echarts = inject("echarts") |
| | | const curEcharts = ref(null) |
| | | |
| | | let myEcharts = reactive(null); |
| | | let myEcharts = reactive(null) |
| | | |
| | | function getEmergencySpace() { |
| | | function getEmergencySpace () { |
| | | getEmergencySpaceStatistic().then((res) => { |
| | | // console.log(res) |
| | | let data = res.data.data; |
| | | let dataRsult = []; |
| | | var total = 0; |
| | | let data = res.data.data |
| | | let dataRsult = [] |
| | | var total = 0 |
| | | data.forEach((item) => { |
| | | dataRsult.push({ |
| | | name: item.type, |
| | | value: item.num, |
| | | }); |
| | | total = total + item.num; |
| | | }); |
| | | }) |
| | | total = total + item.num |
| | | }) |
| | | |
| | | myEcharts.setOption({ |
| | | title: { |
| | |
| | | }, |
| | | legend: { |
| | | orient: "vertical", |
| | | top: "5%", |
| | | top: "20%", |
| | | left: "5%", |
| | | textStyle: { |
| | | color: "#fff", |
| | |
| | | data: dataRsult, |
| | | }, |
| | | ], |
| | | }); |
| | | }); |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | nextTick(() => { |
| | | myEcharts = $echarts.init(curEcharts.value); |
| | | getEmergencySpace(); |
| | | }); |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | getEmergencySpace() |
| | | }) |
| | | |
| | | const echartsResize = () => { |
| | | myEcharts && myEcharts.resize(); |
| | | }; |
| | | myEcharts && myEcharts.resize() |
| | | } |
| | | |
| | | useEchartsResize(echartsResize); |
| | | useEchartsResize(echartsResize) |
| | | </script> |
| | | |
| | | <template> |