Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice

ZhangXianQiang

2024-02-28 5d152dbd84722beeec5b2d5977333bd1e2cc6809

Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice

 src/assets/img/fjbg.png

 src/assets/img/gaosu.png

 src/assets/img/gjky.png

 src/assets/img/hycl.png

 src/assets/img/mtc.png

 src/assets/img/qclc.png

 src/assets/img/xxqc.png

 src/components/item-wrap/item-wrap.vue

@@ -79,6 +79,7 @@
.item_title_content {

  //height: $item_title_content-height;

  margin: 20px 0;



}



.item_title_content_def {


 src/views/daoAnOffice/index.vue

@@ -1,6 +1,6 @@
<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";
import MenuHeader from "@/components/menu-header.vue";
// import MenuHeader from "@/components/menu-header.vue";
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
@@ -279,11 +279,11 @@
}

.contetn_lr-item_right {
  flex: auto;
 width: 48%;
}

.contetn_lr-item_left {
  flex: 1;
  width: 50%;
}

.contetn_lr-item_contetn {
@@ -350,6 +350,8 @@
.item_title_content {
  //height: $item_title_content-height;
  margin: 20px 0;
  border: 1px solid #29466A;
  //background: #11223A;
}

.item_title_content_def {

 src/views/daoAnOffice/left-bottom.vue

@@ -5,20 +5,108 @@
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com"

const  options = reactive([
  {
    title:"青城山风景区",
    num1:56,
    num2:54,
    num3:47,
    num4:35,
    num5:48,
    num6:21,
    num7:87,
  },
  {
    title:"都江堰风景区",
    num1:356,
    num2:354,
    num3:347,
    num4:335,
    num5:348,
    num6:321,
    num7:387,
  },
  {
    title:"虹口旅游景区",
    num1:256,
    num2:254,
    num3:247,
    num4:235,
    num5:248,
    num6:221,
    num7:287,
  },
  {
    title:"灌县古城",
    num1:156,
    num2:154,
    num3:147,
    num4:135,
    num5:148,
    num6:121,
    num7:187,
  }
])
</script>

<template>
  <div class="left_boottom_wrap beautify-scroll-def"  >
      重点景区
      <div class="left-bottom-fj" v-for="(item,index) in options" :key="index">
     <div>
       <div class="left-bottom-fj-title">{{item.title}}</div>
       <div class="left-bottom-fj-info">
         <p class="left-fj-p">车流量:<span class="left-p">{{ item.num1 }}</span><span class="left-fj-sp">辆</span></p>
         <p class="left-fj-p">游客预约:<span class="left-p">{{ item.num2 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">在岗警力:<span class="left-p">{{ item.num3 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">备用警力:<span class="left-p">{{ item.num4 }}</span><span class="left-fj-sp">辆</span></p>
         <p class="left-fj-p">人流量:<span class="left-p">{{ item.num5 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">入园人数:<span class="left-p">{{ item.num6 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">在岗警车:<span class="left-p">{{ item.num7 }}</span><span class="left-fj-sp">辆</span></p>
       </div>
     </div>

      </div>
  </div>
</template>

<style scoped lang="scss">
.left_boottom_wrap {
  margin-left: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .left-bottom-fj{
    margin-bottom:20px ;
    border: 1px solid #29466A;
    .left-bottom-fj-info{
      padding: 10px;
      .left-fj-p{
        margin-top: 3px;
        margin-right: 10px;
        color: #4481DD;
        .left-fj-sp{
          color: #fff;
        }
      }
      display: flex;
      flex-wrap: wrap;
      .left-p{
        color: #FAE67D;
      }
    }
    .left-bottom-fj-title{
      font-family: PingFang SC;
      font-weight: 800;
      color: #44DBDD;
      line-height: 40px;
      height: 80px;
      text-align: center;
      background-image: url("@/assets/img/fjbg.png");
      background-position: center; /* 水平和垂直都居中对齐 */
      background-repeat: no-repeat; /* 不重复平铺背景图像 */
      background-size: cover; /* 自动调整大小以完全覆盖元素 */
    }
  }
}

.doudong {

 src/views/daoAnOffice/left-center.vue

@@ -2,14 +2,149 @@
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";


const options = reactive ( [
  {
    title: "高速路",
    name: "1",
    num: "195",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "国省道",
    name: "1",
    num: "167",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "县乡道",
    name: "1",
    num: "188",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "农村道路",
    name: "1",
    num: "128",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,
  }
])
const optionsT = reactive ( [
  {
    title: "货运车辆",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/hycl.png', import.meta.url).href,},
  {
    title: "公交客运",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/gjky.png', import.meta.url).href,},
  {
    title: "小型骑车",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/xxqc.png', import.meta.url).href,},
  {
    title: "摩托车",
    name: "1",
    num: "2355",
    img:new URL('../../assets/img/mtc.png', import.meta.url).href,
  }
])
const optionsS = reactive ( [
  {
    title: "货源车辆驾驶人",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "公交客运驾驶人",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "小型汽车驾驶人",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "摩托车驾驶人",
    name: "1",
    num: "2355",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,
  }
])
</script>

<template>
<div>
  道路里程数量
</div>
<div class="x-a">
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
    <div v-for="(item,index) in options" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
     </div>
    </div>
    </div>
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsT" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
      </div>
    </div>
  </div>
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsS" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
      </div>
    </div>
  </div>

  </div>
</template>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.x-a{
  background-color: #111E3C;
  border: 1px solid #29466A;
  padding: 10px 10px 20px;
}
.roadMileage{
  //display: flex;
  .roadMileage-title{
    margin: 10px 0;
    font-family: PingFang SC;
    font-weight: 600;
    color: #447ED6;
    line-height: 22px;

  }
  .roadMileage-item{
    padding: 15px 0;
    background: linear-gradient(0deg, rgba(13,29,50,0.55), rgba(34,82,154,0.55));
    //border: 1px solid #29466A;
    //opacity: 0.6;
    //background: #11223A;
    .roadMileage-item-img{
      width: 130px;
    }
    .roadMileage-item-title{
      text-align: center;
      font-family: PingFang SC;
      color: #44DBDD;
    }
    .roadMileage-item-num{
      text-align: center;
      font-weight: 800;
      font-family: PingFang SC;
      color: #FAE67D;
    }
  }
}
</style>

 src/views/header.vue

@@ -35,13 +35,13 @@
        <span class="title-text">道安办市域治理数据大屏</span>

      </div>

    </div>

    <div class="timers">

      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}

<!--    <div class="timers">-->

<!--      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}-->



      <div class="setting_icon"   @click="setSettingShow(true)">

          <img src="@/assets/img/headers/setting.png" alt="设置">

      </div>

    </div>

<!--      <div class="setting_icon"   @click="setSettingShow(true)">-->

<!--          <img src="@/assets/img/headers/setting.png" alt="设置">-->

<!--      </div>-->

<!--    </div>-->

  </div>

</template>