l

liukangdong

2024-10-28 c205de44f60c42dc1fc75b1dab32bbdd971534d9

 screen/src/views/SecurityControl.vue

@@ -58,20 +58,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">20</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>
                <div class="name">相关方车辆</div>
                <div class="num num2">20</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>

                <div class="name">来访车辆</div>
                <div class="num num3">20</div>
              </div>
            </div>
            <div class="section">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
            </div>
            <div class="second_title">
              <div class="title">
@@ -236,6 +239,7 @@
                </div>
              </div>
            </div>
            <div class="echart3" id="echart3"></div>
          </div>
          <div class="right_box_two">

@@ -338,6 +342,11 @@
            </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">
@@ -429,8 +438,9 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'


const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -568,9 +578,153 @@
    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()
  })
}

onMounted(() => {
  // initEnergy()
  initEchart3()
  initEchart1()
  initEchart2()
})
@@ -586,6 +740,7 @@
.main_content {
  display: flex;
  padding: 20px 25px 0;
  border: 1px solid;

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

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

        .residue {
@@ -645,31 +800,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 +1031,7 @@
      .visitor_list {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        padding: 20px 20px 16px;

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

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

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

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

    position: relative;
    .content {
      display: flex;

@@ -1117,7 +1306,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 +1388,39 @@
      }
    }

    .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;
          }
        }