Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabRightCX.vue
@zhangdeliang zhangdeliang on 27 Jun 8 KB update
<template>
  <!-- 长效运维 -->
  <div class="tabRightCXPage" v-if="allData.tabShowWL == 5">
    <div class="allContent">
      <div class="selectTitle" style="margin-top: 15px">
        <div class="name">案件处置形式</div>
        <el-date-picker v-model="allData.GJtime" size="small" style="width: 120px" type="year" placeholder="选择时间" />
        <p style="color: #ffff; font-family: PingFang SC; font-size: 14px; font-weight: 400; margin-left: 20px">全部工单:</p>
        <el-switch v-model="allData.isOpen" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-right: 30px" />
      </div>
      <div class="staticPicture">
        <div id="chartOne"></div>
      </div>
      <div class="selectTitle" style="margin-top: 15px">
        <div class="name">政策法规</div>
      </div>
      <div class="policies" v-for="item in allData.policiesList" :key="index">
        <div class="title">
          <p class="titleName">{{ item.name }}</p>
          <p class="dateTime">{{ item.time }}</p>
        </div>
        <div class="policiesContent">{{ item.content }}</div>
      </div>
      <div class="selectTitle">
        <div class="name">民生留言</div>
      </div>
      <div class="noteContent">
        <div class="note" v-for="item in allData.noteList" :key="index">
          <div class="title1">
            <img style="width: 24px; height: 24px; margin-left: 15px" src="/src/assets/newImgs/user.png" />
            <p class="titleName1">{{ item.name }}</p>
            <p class="projectName1">{{ item.project }}</p>
            <p class="dateTime1">{{ item.time }}</p>
          </div>
          <div class="infoContent">{{ item.content }}</div>
          <div class="dividerLine"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="tabRightCXPage">
import chartOption from '@/components/Echarts/pieChart_1.js';
import changXiaoLayer from '@/assets/geojson/changXiaoLayer.json';
import changXiaoIcon from '@/assets/newImgs/tuLi82X.png';
import * as echarts from 'echarts';
import { nextTick } from 'vue';
import bus from '@/bus';
const allData = reactive({
  tabShowWL: null,
  GJtime: null,
  GJtime1: null,
  isOpen: true,
  policiesList: [
    {
      name: '海绵城市二十条政策措施',
      time: '2023-09-10 10:00',
      content:
        '建设海绵城市是应对城市洪涝、水源枯竭、城市生态环境破坏等问题的重要手段。在构建海绵城市过程中,政策和措施的支持至关重要。下面我们来看看海绵城市建设中的二十条政策与措施......',
    },
    {
      name: '海绵城市建设管理条例',
      time: '2023-09-10 10:00',
      content:
        '为了规范海绵城市建设和管理,保护和改善城市生态环境,促进城市建设与生态系统和谐发展,根据《中华人民共和国城乡规划法》《建设工程质量管理条例》《城镇排水与污水处理条例》等有关法律法规,结合本市实际……',
    },
  ],
  noteList: [
    {
      name: 'XX微信号XX',
      time: '2023-09-10 10:00',
      project: '槐荫河海绵绿化工程',
      content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
    },
    {
      name: 'XX微信号XX',
      time: '2023-09-10 10:00',
      project: '槐荫河海绵绿化工程',
      content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
    },
    {
      name: 'XX微信号XX',
      time: '2023-09-10 10:00',
      project: '槐荫河海绵绿化工程',
      content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
    },
  ],
  options: [
    {
      value: 1,
      label: '设备故障报警',
    },
    {
      value: 2,
      label: '指标超标预警',
    },
  ],
});
// 故障报警柱状图
let chart = null;
const initEcharts = () => {
  chartOption.floodOneMapPipePie.series[0].data = [
    { value: 2, name: '待处理' },
    { value: 12, name: '处理中' },
    { value: 10, name: '已处理' },
  ];
  if (!!chart) chart.dispose();
  chart = echarts.init(document.getElementById('chartOne'));
  chart.clear();
  chart.setOption(chartOption.floodOneMapPipePie);
};

const tableData1 = ref([
  {
    code: '001',
    size: '监测站点1',
    qdCode: '设备故障',
    zdCode: '--',
    qdElevation: 1,
    zdElevation: 0,
    tlTime: '50分钟',
  },
  {
    code: '002',
    size: '监测站点12',
    qdCode: '设备故障',
    zdCode: '--',
    qdElevation: 1,
    zdElevation: 0,
    tlTime: '1小时2分钟',
  },
  {
    code: '003',
    size: '监测站点3',
    qdCode: '设备故障',
    zdCode: '--',
    qdElevation: 1,
    zdElevation: 0,
    tlTime: '15分钟',
  },
  {
    code: '004',
    size: '监测站点4',
    qdCode: '设备故障',
    zdCode: '--',
    qdElevation: 1,
    zdElevation: 0,
    tlTime: '11分钟',
  },
  {
    code: '005',
    size: '监测站点5',
    qdCode: '设备故障',
    zdCode: '--',
    qdElevation: 1,
    zdElevation: 0,
    tlTime: '14分钟',
  },
]);
const addCXLayer = () => {
  let changXiaoLayerCircle = _.cloneDeep(changXiaoLayer);
  newfiberMapbox.addMarker(changXiaoLayer, changXiaoIcon, 'changXiao', true, [26, 28]);
  newfiberMapbox.RayLayerObj = new window.virtualSpaceObj.RayLayer();
  newfiberMapbox.pointlight(changXiaoLayerCircle, 'changXiaoCircle', 'rgba(202,102,102,1)');
};
onMounted(() => {
  bus.on('changeTableContent', val => {
    if (val == 5) {
      allData.tabShowWL = val;
      nextTick(() => {
        initEcharts();
        addCXLayer();
      });
    } else {
      allData.tabShowWL = null;
      // newfiberMapbox.removeLayer('changXiao');
      // !!newfiberMapbox.RayLayerObj && newfiberMapbox.RayLayerObj.remove();
    }
  });
});
onBeforeUnmount(() => {
  bus.off('changeTableContent');
});
</script>
<style lang="scss">
.tabRightCXPage {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .allContent {
    height: 750px;
    overflow: auto;

    .staticPicture {
      margin: 30px 100px;
      #chartOne {
        height: 150px;
        width: 300px;
      }
    }
    .policies {
      margin: 10px 20px;
      .title {
        height: 36px;
        background: #003758;
        display: flex;
        justify-content: space-between;
        .titleName {
          color: #b4e7f2;
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 36px;
        }
        .dateTime {
          color: #b4e7f2;
          text-align: right;
          font-family: PingFang SC;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 36px;
        }
      }
      .policiesContent {
        color: #00d1ff;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .noteContent {
      width: 488px;
      .note {
        margin: 10px 20px;
        .title1 {
          height: 36px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .titleName1 {
            color: #b4e7f2;
            text-align: right;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
          }
          .projectName1 {
            width: 132px;
            height: 25px;
            background: #004770;
            border: 1px solid #0073a5;
            border-radius: 25px;
            color: #00d1ff;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 25px;
            text-align: center;
          }
          .dateTime1 {
            color: #b4e7f2;
            text-align: right;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 36px;
          }
        }
        .infoContent {
          color: #00d1ff;
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
        }
        .dividerLine {
          height: 1px;
          border: 1px;
          margin: 5px 0 10px 0px;
          background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
        }
      }
    }
  }
}
</style>