- <template>
- <!-- 告警配置 -->
- <div class="serviceScadaWarn publicContainer">
- <!-- 头部 -->
- <div class="synHead">
- <div
- :class="['part', checkedKey == item.key ? 'changed' : '']"
- v-for="item in headArr"
- :key="item.key"
- @click="changeHeadData(item.key)"
- >
- <img :src="getImgMonitorIcon(item.imgUrl)" :alt="item.name" />
- <p>{{ item.name }}</p>
- <p class="value">{{ dataAarray[item.key] ? dataAarray[item.key] : dataAarray[item.keys] ? dataAarray[item.keys] : 0 }}</p>
- </div>
- </div>
- <div class="content">
- <div class="synRight">
- <reportService></reportService>
- </div>
- </div>
- </div>
- </template>
- <script setup name="serviceScadaWarn">
- import bus from '@/bus';
- import { plcWarnConfig } from '@/api/scada/repairdata';
- import { getImgMonitorIcon } from '@/utils/validate';
- import reportService from './components/reportService.vue';
- const { proxy } = getCurrentInstance();
- // 变量声明
- const headArr = [
- { name: '全部', value: '(合计97处)', imgUrl: 'all_icon.png', key: '', keys: 'all' },
- { name: '水位告警', value: '(4)', imgUrl: 'river_icon.png', key: 'water_level' },
- { name: '降雨告警', value: '(4)', imgUrl: 'lake_icon.png', key: 'rain' },
- { name: '流量告警', value: '(97处)', imgUrl: 'gqjc_icon.png', key: 'flow' },
- { name: '水质告警', value: '(合计7处)', imgUrl: 'line_icon.png', key: 'quality' },
- { name: '其他告警', value: '(合计197处)', imgUrl: 'land_icon.png', key: 'other' },
- ];
- const checkedKey = ref('1');
- // 方法
- function changeHeadData(warnType = '') {
- checkedKey.value = warnType;
- bus.emit('mapPointClick3', warnType);
- }
- const dataAarray = ref({});
- const rtuWarnType = async () => {
- let { data } = await plcWarnConfig();
- var contall = 0;
- data.forEach(i => {
- dataAarray.value[i.warnType] = i.count;
- contall += i.count;
- });
- dataAarray.value.all = contall;
- };
- // 初始化
- onMounted(() => {
- rtuWarnType();
- changeHeadData(); //默认显示全部
- });
- // 页面销毁
- onBeforeUnmount(() => {});
- </script>
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- .serviceScadaWarn {
- width: 100%;
- height: calc(100vh - 84px);
- position: relative;
- .synHead {
- width: 100%;
- height: 70px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- background: $mainColor1;
- .part {
- line-height: 25px;
- display: flex;
- align-items: center;
- cursor: pointer;
- height: 40px;
- padding: 5px 8px;
- img {
- margin-right: 6px;
- }
- .value {
- color: #3782ff;
- margin-left: 5px;
- }
- &:hover {
- background: $mainColor2;
- }
- }
- .changed {
- background: $mainColor2;
- border: 1px solid #3782ff;
- border-radius: 2px;
- animation-duration: 1s;
- }
- }
- .content {
- display: flex;
- height: 93%;
- box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
- border-radius: 6px;
- margin-top: 10px;
- .synLeft {
- width: 400px;
- background: #eef1fb;
- }
- .synRight {
- width: 100%;
- }
- }
- .dialogDetail {
- position: absolute;
- z-index: 999;
- right: 20px;
- bottom: 10px;
- box-shadow: 0px 2px 26px 0px rgba(28, 52, 92, 0.3);
- width: 900px;
- border-radius: 8px;
- .dialogTitle {
- width: 100%;
- height: 50px;
- line-height: 50px;
- background: #0f69ff;
- color: #fff;
- border-radius: 8px 8px 0 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 15px;
- p {
- font-size: 17px;
- }
- .el-icon {
- font-size: 30px;
- cursor: pointer;
- margin-top: 20px;
- margin-left: 15px;
- &:hover {
- transform: scale(1.05);
- }
- }
- }
- .dialogCont {
- overflow: auto;
- padding: 10px;
- border: 1px solid red;
- }
- }
- }
- </style>