zhgdyunapp/pages/projectEnd/specialOperations/specialOperations.vue

<template>
  <view class="specialOperations">
    <headers class="fixedheader" :themeType="true" :showBack="true">
      <view class="headerName"> 特种作业 </view>
    </headers>
    <view class="sp-menu-wrapper" style="padding-top: 44px">
      <view class="menu-title"> 作业中心 </view>
      <view class="sp-menu">
        <view class="menu-item" @click="handleNavigateTo(20)">
          <view class="item-icon">
            <image src="@/static/specialOperations/fireWork.png"></image>
          </view>
          <view class="item-text">
            <text>新动火作业</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(1)">
          <view class="item-icon">
            <image src="@/static/specialOperations/fireWork.png"></image>
          </view>
          <view class="item-text">
            <text>动火作业</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(2)">
          <view class="item-icon">
            <image src="@/static/specialOperations/limitSpaceWork.png"></image>
          </view>
          <view class="item-text">
            <text>受限空间</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(3)">
          <view class="item-icon">
            <image src="@/static/specialOperations/bindPlatePlug.png"></image>
          </view>
          <view class="item-text">
            <text>盲板抽堵</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(4)">
          <view class="item-icon">
            <image src="@/static/specialOperations/highJob.png"></image>
          </view>
          <view class="item-text">
            <text>高处作业</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(5)">
          <view class="item-icon">
            <image src="@/static/specialOperations/hoistSafe.png"></image>
          </view>
          <view class="item-text">
            <text>吊装安全</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(6)">
          <view class="item-icon">
            <image src="@/static/specialOperations/tempElectricity.png"></image>
          </view>
          <view class="item-text">
            <text>临时用电</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(7)">
          <view class="item-icon">
            <image src="@/static/specialOperations/groundSafe.png"></image>
          </view>
          <view class="item-text">
            <text>动土作业</text>
          </view>
        </view>
        <view class="menu-item" @click="handleNavigateTo(8)">
          <view class="item-icon">
            <image src="@/static/specialOperations/openCircuit.png"></image>
          </view>
          <view class="item-text">
            <text>断路作业</text>
          </view>
        </view>
      </view>
    </view>
    <view class="sp-menu-wrapper">
      <view class="menu-title"> 统计分析 </view>
      <view class="search-btn-wrapper">
        <view class="search-btn" :class="{ active: searchType === 1 }" @click="handleSearchType(1)"> 最近7天 </view>
        <view class="search-btn" :class="{ active: searchType === 2 }" @click="handleSearchType(2)"> 最近30天 </view>
        <view class="search-btn" :class="{ active: searchType === 3 }" @click="handleSearchType(3)"> 自定义 </view>
      </view>
    </view>
    <view class="sp-menu-wrapper">
      <view class="menu-title"> 特殊作业数量趋势 </view>
      <view class="chart-wrapper">
        <u-charts
          class="ucharts"
          :cWidth="355"
          :cHeight="300"
          canvas-id="lineChart"
          chartType="line"
          :opts="chartOptions"
          ref="lineChart"
        />
      </view>
    </view>

    <!-- 筛选条件弹框 -->
    <uni-popup class="screenDialog" ref="screenShow" :maskClick="true" @change="closeMenu" :show="popupShow">
      <view class="screenContent">
        <scroll-view style="height: 100%" scroll-y>
          <view class="closeIcon" @click="closeBtn"> × </view>
          <view class="screenTitle"> 筛选条件 </view>

          <view class="titleItem">自定义时间</view>
          <view class="screenItem">
            <view class="screenI" style="width: 140px; position: relative">
              <dateTimePicker
                v-if="startTime === ''"
                placeholder="开始时间"
                fields="day"
                @change="pickerChange($event, 'startTime')"
                class="dateTimePicker"
              >
              </dateTimePicker>
              <view v-else>{{ startTime }}</view>
              <view v-if="startTime != ''" @click="showTimePicker(1)" style="position: absolute; top: -1vh; left: 34vw; font-size: 16px"
                >×</view
              >
            </view>
            <span style="color: gray; margin: 6% 5px">一</span>
            <view class="screenI" style="width: 140px; position: relative">
              <dateTimePicker
                v-if="endTime === ''"
                placeholder="结束时间"
                fields="day"
                @change="pickerChange($event, 'endTime')"
                class="dateTimePicker"
              >
              </dateTimePicker>
              <view v-else>{{ endTime }}</view>
              <view v-if="endTime != ''" @click="showTimePicker(2)" style="position: absolute; top: -1vh; left: 34vw; font-size: 16px"
                >×</view
              >
            </view>
          </view>
          <view class="line"></view>

          <view class="footerBtn">
            <view class="foterLeft" @click="resettingBtn"> 重置 </view>
            <view class="foterRight" @click="closeRed"> 确定 </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <levitatedsphere :x="100" :y="80"></levitatedsphere>
  </view>
</template>

<script>
import { GetDateStr } from '../../../static/js/util.js'
import uCharts from '@/components/u-charts/component.vue'
import dateTimePicker from '@/components/dateTimePicker/index.vue'
import levitatedsphere from '@/components/levitatedsphere/levitatedsphere.vue'
import headers from '../../../components/headers/headers.vue'
export default {
  navigationBarTitleText: '页面标题',
  components: {
    uCharts,
    dateTimePicker
  },
  data() {
    return {
      userInfo: {},
      moduleList: [],
      menuList: [],
      searchType: 1, // 1:最近7天 2:最近30天 3:自定义
      startTime: '',
      endTime: '',
      popupShow: false,
      chartOptions: {
        legends: true,
        legend: {
          show: true,
          position: 'top',
          lineHeight: 18
        },
        categories: [],
        series: []
      }
    }
  },
  onReady() {},
  created() {},
  mounted() {},
  onLoad() {
    this.searchType = 1
    this.startTime = GetDateStr(-7, '-')
    this.endTime = GetDateStr(0, '-')
    this.getChartData()
    // uni.showLoading({
    // 		title: "加载中...",
    // })
    // setTimeout(() =>{
    // 	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
    // 	this.moduleList = this.userInfo.menuAuthority.moduleList
    // 	this.moduleList.map(item => {
    // 		if(item.plugin === "specialOperations") this.menuList = item.menuList
    // 	})
    // 	if(this.menuList.length > 0){
    // 		this.menuList.map(item => {
    // 			if(item.path === "/project/specialWork/fireWork") item.iconImg = 'fireWork.png'
    // 			if(item.path === "/project/specialWork/confinedSpaceWork") item.iconImg = 'limitSpaceWork.png'
    // 			if(item.path === "/project/specialWork/blindPlugWork") item.iconImg = 'bindPlatePlug.png'
    // 			if(item.path === "/project/specialWork/towerOverWork") item.iconImg = 'highJob.png'
    // 			if(item.path === "/project/specialWork/riggingOutWork") item.iconImg = 'hoistSafe.png'
    // 			if(item.path === "/project/specialWork/temporaryPowerWork") item.iconImg = 'tempElectricity.png'
    // 			if(item.path === "/project/specialWork/startBuildingWork") item.iconImg = 'groundSafe.png'
    // 			if(item.path === "/project/specialWork/disconnectionWork") item.iconImg = 'openCircuit.png'
    // 		})
    // 	}
    // 	console.log("userInfo=======================",this.userInfo);
    // 	console.log("moduleList=======================",this.moduleList);
    // },500)
    // uni.hideLoading()
  },
  methods: {
    handleSearchType(val) {
      if (val === this.searchType) return
      this.searchType = val
      if (val === 1) {
        this.startTime = GetDateStr(-7, '-')
        this.endTime = GetDateStr(0, '-')
        this.getChartData()
      }
      if (val === 2) {
        this.startTime = GetDateStr(-30, '-')
        this.endTime = GetDateStr(0, '-')
        this.getChartData()
      }
      if (val === 3) {
        this.startTime = ''
        this.endTime = ''
        this.$refs.screenShow.open()
        this.popupShow = true
      }
    },
    handleNavigateTo(val) {
      // if(val === "/project/specialWork/fireWork") uni.navigateTo({ url: "./fireWork/work" })
      // if(val === "/project/specialWork/confinedSpaceWork") uni.navigateTo({ url: "./limitSpaceWork/work" })
      // if(val === "/project/specialWork/blindPlugWork") uni.navigateTo({ url: "./bindPlatePlug/work" })
      // if(val === "/project/specialWork/towerOverWork") uni.navigateTo({ url: "./highJob/work" })
      // if(val === "/project/specialWork/riggingOutWork") uni.navigateTo({ url: "./hoistSafe/work" })
      // if(val === "/project/specialWork/temporaryPowerWork") uni.navigateTo({ url: "./tempElectricity/work" })
      // if(val === "/project/specialWork/startBuildingWork") uni.navigateTo({ url: "./groundSafe/work" })
      // if(val === "/project/specialWork/disconnectionWork") uni.navigateTo({ url: "./openCircuit/work" })
      if (val === 20) uni.navigateTo({ url: './fireWork/newWork' })
      if (val === 1) uni.navigateTo({ url: './fireWork/work' })
      if (val === 2) uni.navigateTo({ url: './limitSpaceWork/work' })
      if (val === 3) uni.navigateTo({ url: './bindPlatePlug/work' })
      if (val === 4) uni.navigateTo({ url: './highJob/work' })
      if (val === 5) uni.navigateTo({ url: './hoistSafe/work' })
      if (val === 6) uni.navigateTo({ url: './tempElectricity/work' })
      if (val === 7) uni.navigateTo({ url: './groundSafe/work' })
      if (val === 8) uni.navigateTo({ url: './openCircuit/work' })
    },
    //点击重新选择时间
    showTimePicker(type) {
      if (type == 1) {
        this.startTime = ''
      } else {
        this.endTime = ''
      }
    },
    pickerChange(e, type) {
      console.log(e, '======')
      if (type === 'startTime') {
        this.startTime = e.f1
      } else {
        this.endTime = e.f1
      }
    },
    closeMenu(e) {
      console.log('关闭！！！！', e)
      if (e.show == false) {
        this.popupShow = false
        if (!this.startTime || !this.endTime) {
          this.searchType = 1
          this.startTime = GetDateStr(-7, '-')
          this.endTime = GetDateStr(0, '-')
          this.getChartData()
        }
      }
    },
    resettingBtn() {
      this.$refs.screenShow.close()
      this.popupShow = false
      this.searchType = 1
      this.startTime = GetDateStr(-7, '-')
      this.endTime = GetDateStr(0, '-')
      this.getChartData()
    },
    closeRed() {
      this.$refs.screenShow.close()
      this.popupShow = false
      this.getChartData()
    },
    //关闭筛选
    closeBtn() {
      this.$refs.screenShow.close()
      this.popupShow = false
    },
    getChartData() {
      this.sendRequest({
        url: 'xmgl/xzSpecial/countSpecialByData',
        method: 'post',
        data: {
          projectSn: JSON.parse(uni.getStorageSync('userInfo')).sn,
          startTime: this.startTime,
          endTime: this.endTime
        },
        success: res => {
          if (res.code == 200) {
            console.log('getChartData======================', res)
            let list = res.result || []
            let categories = []
            let series = []
            let data1 = {
              name: '新动火',
              data: []
            }
            let data2 = {
              name: '受限空间',
              data: []
            }
            let data3 = {
              name: '盲板抽堵',
              data: []
            }
            let data4 = {
              name: '高处作业',
              data: []
            }
            let data5 = {
              name: '吊装安全',
              data: []
            }
            let data6 = {
              name: '临时用电',
              data: []
            }
            let data7 = {
              name: '动土作业',
              data: []
            }
            let data8 = {
              name: '断路作业',
              data: []
            }

            list.forEach(item => {
              categories.push(item.date)
              data1.data.push(item.xzSpecialOperationFireSafetyNum)
              data2.data.push(item.xzLimitSpaceSafeNum)
              data3.data.push(item.xzBlindPlatePlugSafeNum)
              data4.data.push(item.xzHighJobSafeNum)
              data5.data.push(item.xzHoistSafetyWorkNum)
              data6.data.push(item.xzTemporaryElectricitySafeNum)
              data7.data.push(item.xzGroundSafetNum)
              data8.data.push(item.xzOpenCircuitSafeNum)
            })
            series = [data1, data2, data3, data4, data5, data6, data7, data8]
            this.chartOptions.series = series
            this.chartOptions.categories = categories
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.specialOperations {
  background-color: #f1f3f5;
  height: 100vh;
  .fixedheader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .sp-menu-wrapper {
    width: 100%;
    // padding-top: 200rpx;
    background-color: #fff;
    margin-bottom: 24rpx;
    .menu-title {
      height: 80rpx;
      font-size: 32rpx;
      line-height: 40rpx;
      font-weight: bold;
      padding: 0 38rpx;
      margin-bottom: 20rpx;
      color: #333333;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid rgba(187, 187, 187, 0.1);
    }
    .sp-menu {
      margin: 0 38rpx;
      // height: 1200rpx;
      // height: 1000rpx;
      // background-color: darkred;
      display: grid;
      grid-gap: 24rpx;
      grid-template-columns: repeat(4, 1fr);
      // grid-template-columns: repeat(auto-fill, 220rpx);
      // place-items: center;
      // justify-content: center;
      .menu-item {
        // width: 220rpx;
        height: 160rpx;
        // background-color: darkblue;
        // box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .item-icon {
          // width: 220rpx;
          // height: 220rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 14rpx;
          image {
            width: 66rpx;
            height: 86rpx;
          }
        }
        .item-text {
          align-items: center;
          // width: 220rpx;
          height: 54rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          text {
            text-align: center;
            display: flex;
            justify-content: center;
            white-space: nowrap;
            font-size: 28rpx;
          }
        }
      }
    }
    .search-btn-wrapper {
      display: flex;
      justify-content: center;
      height: 80rpx;
      gap: 60rpx;
      .search-btn {
        width: 160rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(182, 182, 182, 0.15);
        color: rgba(14, 32, 76, 1);
        border-radius: 30rpx;
        border: 1px solid rgba(128, 128, 128, 0.13);
        font-size: 24rpx;
        &.active {
          background-color: rgba(61, 150, 253, 1);
          color: #fff;
        }
      }
    }
  }
}

.screenDialog {
  position: absolute;
  // top: 11%;
  height: 95%;
  /* background: pink; */
  background: white;
  width: 100%;
  border-radius: 20px;
  margin-left: -4%;
  background-color: white;
  /* 设置为半透明的灰色 */
  z-index: 9;
  /* 设置一个较大的 z-index 值，保证遮罩层在最上层 */

  .closeIcon {
    float: right;
    font-size: 25px;
    color: gray;
    margin-right: 3%;
  }

  .screenTitle {
    text-align: center;
    margin-top: 4%;
    font-size: 18px;
    font-weight: 500;
  }

  .uni-popup__wrapper-box {
    height: 70vh;
    overflow: scroll;
    position: fixed;
    bottom: 0;
  }

  .screenContent {
    width: 100vw;
    height: 40%;
    // width: 90%;
    // margin: -65% 0%;
    overflow: scroll;
    // position: relative;
    // margin-top: 180%;
    border-radius: 20px 20px 0 0;
    // margin-left: -4%;
    background-color: white;
    padding-left: 10%;
    position: fixed;
    left: 0;
    bottom: 0;

    .titleItem {
      font-size: 14px;

      .regionText {
        display: inline-block;
        margin-left: 16%;
        width: 190px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .screenItem {
    display: flex;
    flex-wrap: wrap;

    .screenI {
      width: 100px;
      font-size: 12px;
      height: 30px;
      background: #f7f8fa;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: gray;
      margin: 5% 0;
    }

    .screenText {
      width: 90px;
      font-size: 12px;
      height: 30px;
      background: #f7f8fa;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
    }

    .active {
      width: 90px;
      font-size: 12px;
      height: 30px;
      background: #edf2fe;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
      border: 1px solid #5181f6;
    }

    .screenTextClose {
      width: 90px;
      font-size: 12px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #000;
      margin: 5% 5% 5% 0%;
    }
  }

  .footerBtn {
    display: flex;
    text-align: center;
    line-height: 40px;
    margin-top: 2%;
    // margin-left: 6%;
    position: absolute;
    width: 100%;
    bottom: 20px;

    .foterLeft {
      width: 43%;
      background: #f6f7f8;
      height: 40px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      color: #5181f6;
    }

    .foterRight {
      width: 43%;
      background: #5181f6;
      height: 40px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      color: #fff;
    }
  }
  ::v-deep .placeholder {
    padding-left: 40px;
  }
}
</style>