ll

liukangdong

2024-10-31 a030368330d5a6bf1d0ed42b6121b53d13b587d0

 screen/src/views/SecurityControl.vue

@@ -28,25 +28,26 @@
              </div>
              <div class="num_wrap">
                <div class="la">总车位：</div>
                <div class="val">100</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
              </div>
            </div>
            <div class="stall_static">
              <div class="residue">
                <div class="la">剩余车位</div>
                <div class="val">50</div>
                <div class="val">{{ data.freeParkingLot }}</div>
              </div>
              <div class="total">
                <div class="la">车位总数</div>
                <div class="val">50</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
              </div>
              <div class="rate">
                <div class="la">
                  <span>车位使用率</span>
                  <span class="num">50%</span>
                  <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ ((data.inParkCarTotal /
                    data.parkingLotTotal) * 100).toFixed(0) }}%</span>
                </div>
                <div class="val">
                  <Percent :rate="50" />
                  <Percent :rate="((data.inParkCarTotal / data.parkingLotTotal) * 100).toFixed(0)" />
                </div>
              </div>
            </div>
@@ -58,20 +59,23 @@
            </div>
            <div class="private_car">
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>
                <div class="name">员工车辆</div>
                <div class="num">{{ data.internalCarTotal }}</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>
                <div class="name">相关方车辆</div>
                <div class="num num2">{{ data.relatedCarTotal }}</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>

                <div class="name">来访车辆</div>
                <div class="num num3">{{ data.visitCarTotal }}</div>
              </div>
            </div>
            <div class="section">
              <div class="item" :style="{ flex: data.internalCarTotal }"></div>
              <div class="item" :style="{ flex: data.relatedCarTotal }"></div>
              <div class="item" :style="{ flex: data.visitCarTotal }"></div>
            </div>
            <div class="second_title">
              <div class="title">
@@ -82,32 +86,19 @@
            <div class="car_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong>300</strong></div>
                  <div class="fs30"><strong v-if="data.visitJobCarTotal">{{ data.internalJobCarTotal +
                    data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div>
                  <div>货车</div>
                </div>
                <div class="echart" id="echart1"></div>
              </div>
              <div class="list">
                <div class="item">
                <div class="item" v-for="item, i in dataList1">
                  <div class="line">
                    <div :style="{ background: colors[0] }" class="icon"></div>
                    <div class="text">内运车辆</div>
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[0] }" class="num">100</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[1] }" class="icon"></div>
                    <div class="text">外协运输车辆</div>
                  </div>
                  <div :style="{ color: colors[1] }" class="num">100</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[2] }" class="icon"></div>
                    <div class="text">市公司卸货车辆</div>
                  </div>
                  <div :style="{ color: colors[2] }" class="num">100</div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }}</div>
                </div>
              </div>
            </div>
@@ -122,7 +113,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.inParkTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -132,7 +123,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.inParkCarTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -142,7 +133,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.deviceTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -152,7 +143,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.errTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -179,21 +170,24 @@
                <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
                <div class="content">
                  <div class="name">内部员工</div>
                  <div class="num"><span>1000</span> | 66.6%</div>
                  <div class="num" v-if="data.internalTotal && data.inParkTotal"><span>{{ data.internalTotal }}</span> |
                    {{ ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
                <div class="content">
                  <div class="name">长期相关方</div>
                  <div class="num today"><span>1000</span> | 66.6%</div>
                  <div class="num today" v-if="data.relatedTotal && data.inParkTotal"><span>{{ data.relatedTotal
                      }}</span> | {{ ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
                <div class="content">
                  <div class="name">在园访客</div>
                  <div class="num finish"><span>1000</span> | 66.6%</div>
                  <div class="num finish" v-if="data.visitTotal && data.inParkTotal"><span>{{ data.visitTotal }}</span>
                    | {{ ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
                </div>
              </div>
            </div>
@@ -236,6 +230,7 @@
                </div>
              </div>
            </div>
            <div class="echart3" id="echart3"></div>
          </div>
          <div class="right_box_two">

@@ -338,30 +333,30 @@
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="monitoring">
            <img src="@/assets/images/SecurityControl/jiankong.png" class="icon" alt="">
            <div>监控列表</div>
            <img src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
          </div>
          <div class="content">
            <div class="sa_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong>300</strong></div>
                  <div class="fs30"><strong v-if="dataListT2 && dataListT2.length == 2">{{ dataListT2[0].value +
                    dataListT2[1].value }}</strong></div>
                  <div>总计</div>
                </div>
                <div class="echart" id="echart2"></div>
              </div>
              <div class="list">
                <div class="item">
                <div class="item" v-for="item, i in dataListT2">
                  <div class="line">
                    <div :style="{ background: colors[1] }" class="icon"></div>
                    <div class="text">在线</div>
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[1] }" class="num">100</div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }} | {{ item.rate }}%</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[2] }" class="icon"></div>
                    <div class="text">离线</div>
                  </div>
                  <div :style="{ color: colors[2] }" class="num">100</div>
                </div>

              </div>
            </div>
            <div class="table">
@@ -372,22 +367,18 @@
                <div>离线数</div>
                <div>在线率</div>
              </div>
              <div class="line">
                <div class="driver">门禁设备</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
              </div>
              <div class="separate"></div>
              <div class="line">
                <div class="driver">门禁设备</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
              </div>
              <div class="separate"></div>
              <template v-for="item, i in dataList2">
                <div class="line">
                  <div class="driver">{{ item.deviceType }}</div>
                  <div>{{ item.totalNum }}</div>
                  <div>{{ item.onlineNum }}</div>
                  <div>{{ item.offlineDeviceNum }}</div>
                  <div v-if="item.onlineNum && item.totalNum">{{ ((item.onlineNum / item.totalNum) * 100).toFixed(0) }}%
                  </div>
                </div>
                <div class="separate"></div>
              </template>

            </div>
          </div>
        </div>
@@ -405,18 +396,14 @@
              <div class="dept">拜访部门</div>
              <div class="dept">超时时长</div>
            </div>
            <div class="line">
              <div>name</div>
              <div class="dept">综合管理科</div>
              <div class="dept">10:21</div>
            </div>
            <div class="separate"></div>
            <div class="line">
              <div>name</div>
              <div class="dept">综合管理科</div>
              <div class="dept">10:21</div>
            </div>
            <div class="separate"></div>
            <template v-for="item in dataList3">
              <div class="line">
                <div>{{ item.name }}</div>
                <div class="dept">{{ item.companyName }}</div>
                <div class="dept">{{ item.timeOutMinuteT }}</div>
              </div>
              <div class="separate"></div>
            </template>
          </div>
        </div>
      </div>
@@ -429,9 +416,12 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'

import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
import { getEnergyCenterData, getSecurityDeviceData, getVisitRetentionData } from '@/api'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
@@ -504,8 +494,18 @@
    myChart.resize()
  })
}

const dataList1 = ref([])
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const temp = []
  temp.push({ name: '内运车辆', value: data.value.internalJobCarTotal })
  temp.push({ name: '外协运输车辆', value: data.value.relatedJobCarTotal })
  temp.push({ name: '市公司卸货车辆', value: data.value.visitJobCarTotal })
  temp.sort((a, b) => {
    return a.value - b.value
  })
  dataList1.value = temp
  const option = {
    series: [
      {
@@ -523,11 +523,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: temp
      }
    ]
  }
@@ -536,6 +532,8 @@
    myChart.resize()
  })
}

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
@@ -555,11 +553,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: dataListT2.value
      }
    ]
  }
@@ -568,11 +562,203 @@
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  var colors = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#7fe3fc'
    },
    {
      offset: 1,
      color: '#9ce9fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#64d7fa'
    }, {
      offset: 1,
      color: '#7de3fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4679f6'
    }, {
      offset: 1,
      color: '#4674f6'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }])]
  const option = {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "red"
        },
        lineStyle: {
          color: "#9eb2cb"
        }
      }
    },

    legend: {
      show: false,
      top: "top",
      left: "2%",
      textStyle: {
        color: "#000"
      },
      itemHeight: 2,
      data: ['待访问', '已登记', '已离开', '滞留']
    },
    series: [
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '20%',
        maxSize: '80%',
        gap: 4,
        label: {
          show: false,
        },
        tooltip: {
          trigger: 'none', // 当鼠标悬浮在某个数据项上时触发
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
      },
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '80%',
        maxSize: '80%',
        gap: 4,
        z: 1,
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
          }
        },
        labelLine: {
          show: true,
          normal: {
            length: 80,
            position: 'right',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: 'rgba(102, 160, 239,.5)'
            }
          },
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}

const data = ref({})
const getData1 = () => {
  getEnergyCenterData().then(res => {
    const result = res.data
    data.value = result
    initEchart1()
  })
}

const dataList2 = ref([])
const dataListT2 = ref([])
const getData2 = () => {
  getSecurityDeviceData().then(res => {
    const result = res.data
    let temp = []
    let online = 0
    let outline = 0
    dataList2.value = result.map(item => {
      online += item.onlineNum
      outline += item.offlineDeviceNum
      return item
    })
    if (online >= outline) {
      temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
      temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
    } else {
      temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
      temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
    }

    dataListT2.value = temp
    initEchart2()
  })
}

const dataList3 = ref([])
const getData3 = () => {
  getVisitRetentionData().then(res => {
    const result = res.data || []
    dataList3.value = result.map(i => {
      i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('HH:mm')
      return i
    })
  })
}

onMounted(() => {
  // initEnergy()
  initEchart1()
  initEchart2()
  getData1()
  getData2()
  getData3()
  initEchart3()
  // initEchart1()
})


@@ -586,6 +772,7 @@
.main_content {
  display: flex;
  padding: 20px 25px 0;
  border: 1px solid;

  .left_box {
    width: 360px;
@@ -604,7 +791,7 @@

      .stall_static {
        display: flex;
        margin-bottom: 40px;
        margin-bottom: 60px;
        padding: 0 20px;

        .residue {
@@ -645,31 +832,60 @@
      }

      .private_car {
        padding: 4px 32px;
        padding: 4px 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 36px;
        margin-bottom: 10px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .icon {
            width: 52px;
            height: 52px;
            margin-bottom: 10px;
          }

          /* align-items: center; */
          .num {
            line-height: 28px;
            height: 28px;
            margin-bottom: 2px;
            margin-top: 4px;
            font-weight: bold;
            font-size: 18px;
            color: #01D9FE;
          }

          .num2 {
            color: #FEAF01;
          }

          .num3 {
            color: #09FACD;
          }

        }
      }

      .section {
        margin: 0 auto;
        display: flex;
        align-items: center;
        width: 320px;
        height: 20px;
        background: rgba(255, 255, 255, 0.1);
        padding: 0 4px;
        margin-bottom: 60px;

        .item {
          height: 10px;
          margin-right: 1px;
          background-color: #63d6fa;
          flex: 1;

          &:nth-of-type(2) {
            background-color: #f2b23e;
          }

          &:nth-last-child(1) {
            margin-right: 0;
            background-color: #73f6cf;
          }
        }
      }

@@ -847,7 +1063,7 @@
      .visitor_list {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        padding: 20px 20px 16px;

        .item {
          font-size: 12px;
@@ -872,6 +1088,11 @@
          background-color: #405173;
          margin: 0 24px;
        }
      }

      .echart3 {
        width: 100%;
        height: 140px;
      }
    }

@@ -1001,7 +1222,7 @@
    margin-right: 20px;

    .list {
      height: 147px;
      height: 124px;
      overflow: auto;
      margin-top: 15px;
      scrollbar-width: none;
@@ -1099,6 +1320,7 @@
  .garden_warning {
    flex: 1;
    margin-right: 20px;
    position: relative;

    .content {
      display: flex;
@@ -1117,7 +1339,7 @@
          .pie_text {
            width: 82px;
            height: 82px;
            border: 1px dashed rgba(1, 217, 254, 0.7);
            box-shadow: inset 0px 0px 8px 0px #01D9FE;
            border-radius: 50%;
            position: absolute;

@@ -1199,14 +1421,41 @@
      }
    }

    .monitoring {
      position: absolute;
      top: -60px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 15px;
      width: 134px;
      height: 40px;
      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
      border-radius: 2px;
      border: 1px solid rgba(12, 153, 236, 0.68);

      .icon {
        width: 30px;
      }

      .top {
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
    }

  }

  .visitor_warning {
    width: 360px;
    .table{
      .line{
        div{
          .dept{

    .table {
      .line {
        div {
          .dept {
            flex: 5;
          }
        }