feat:点击查看图片

ZhangXianQiang

2024-02-29 b0a100049a8b54463519c53c06c6a10e64de95ab

 src/views/index/index.vue

@@ -1,13 +1,471 @@
<script setup lang="ts">

import {currentGET} from "@/api"

currentGET("leftTop").then(res=>{

    console.log(res);

})

import ItemWrap from "@/components/item-wrap";

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";

import CenterMap from "./center-map.vue";

import CenterBottom from "./center-bottom.vue";

import RightTop from "./right-top.vue";

import RightTop1 from "./right-top2.vue";

import RightCenter from "./right-center.vue";

import RightBottom from "./right-bottom.vue";

// import chart2 from "./chart2.vue";

import BorderBox13 from "@/components/datav/border-box-13";

const config = {

  header: ['<span style="color:#42C3E8;font-size: 16px">排名</span>', '<span style="color:#42C3E8;font-size: 16px">行政区划</span>','<span style="color:#42C3E8;font-size: 16px">数值</span>'],

  data: [

    ['1', '天马镇', '45'],

    ['5', '灌口街道', '21'],

    ['8', '银杏街道', '17'],

    ['12', '青城山到', '78'],

    ['45', '聚源镇', '33'],

    ['123', '龙池镇', '48'],

    ['64', '玉堂街道', '92'],

    ['85', '灌口街道', '74'],

    ['75', '幸福街道', '43'],

    ['784', '濮阳街道', '58']

  ],

  // index: true,

  // columnWidth: [50],

  align: ['center'],

  headerBGC:"rgba(0,0,0,0.5)",

}

const  config1 = [{

  title:'毛发抽检报道率',

  length: 10,

},{

  title:'毛发抽检阳性率',

  length: 90,

},{

  title:'戒断三年未复吸人员查处',

  length: 82,

},{

  title:'在册吸毒人员滋事行为',

  length: 130,

},{

  title:'易制毒化学品管控问题',

  length: 110,

},{

  title:'辖区内出现聚集滥用窝点数',

  length: 9,

}]

const  config2 = [{

  title:'外流涉毒人员数',

  length: 10,

},{

  title:'新发现吸毒人员数',

  length: 90,

},{

  title:'毒品中转集散数量',

  length: 82,

},{

  title:'未成年涉毒人员数',

  length: 130,

},{

  title:'制毒窝点数量',

  length: 110,

},{

  title:'外协溯源被查获数',

  length: 9,

}]

</script>



<template>

  <div class="">

  <div class="index-box">

    <div class="contetn_left">

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

        <div class="item">实时监测</div>

        <div class="item">统计分析</div>

      </div> -->



      <MenuHeader class="contetn_left-top contetn_lr-item" title="维度指数">

        <LeftTop />

      </MenuHeader>

     <div class="contetn_lr-item_contetn">

       <div class="contetn_lr-item_left">

         <div style="height: 47%">

           <BorderBox13 >

             <div style="display: flex;justify-content: space-between">

               <div class="item_title">

                 <div class="zuo"></div>

                 <span class="title-inner"> &nbsp;&nbsp; 毒品滥用指数排名 &nbsp;&nbsp; </span>

                 <div class="you"></div>

               </div>

               <div>

                 <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">省内排名</el-button>

                 <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">各镇街排名</el-button>

               </div>

             </div>



             <div

                 class="item_title_content_def"

             >

               <dv-scroll-board :config="config" style="width:500px;height:220px" />

              </div

             ></BorderBox13>

         </div>



<!--         <ItemWrap-->

<!--             class="contetn_left-bottom contetn_lr-item"-->

<!--             title="毒品滥用指数排名"-->

<!--             style="padding: 0 10px 16px 10px"-->

<!--         >-->

<!--           <div>-->

<!--             <el-button> 省内排名</el-button>-->

<!--           </div>-->

<!--           <dv-scroll-board :config="config" style="width:500px;height:220px" />-->

<!--&lt;!&ndash;           <LeftBottom />&ndash;&gt;-->

<!--         </ItemWrap>-->



<!--         <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">-->

<!--           <RightTop />-->

<!--         </ItemWrap>-->



         <div style="    height: 53%;">

           <BorderBox13 >

             <div style="display: flex;justify-content: space-between">

               <div class="item_title">

                 <div class="zuo"></div>

                 <span class="title-inner"> &nbsp;&nbsp; 各镇街排名趋势变化 &nbsp;&nbsp; </span>

                 <div class="you"></div>

               </div>

               <div>

                 <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">青城山镇</el-button>

               </div>

             </div>

             <div class="item_title_content_def" >

               <RightTop/>

             </div>

           </BorderBox13>

         </div>

       </div>

       <div class="contetn_lr-item_right">

         <div style="height: 100%;">

           <BorderBox13 >

             <div style="display: flex;justify-content: space-between">

               <div class="item_title">

                 <div class="zuo"></div>

                 <span class="title-inner"> &nbsp;&nbsp; 都江堰市关键指标数据 &nbsp;&nbsp; </span>

                 <div class="you"></div>

               </div>

               <div>

                 <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本月</el-button>

                 <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本季</el-button>

                 <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本年</el-button>

               </div>

             </div>

             <div class="item_title_content_def" >

               <div style="height: 50%;">

                 <p>要素管控</p>

                 <div style="display:flex; justify-content: space-between;flex-wrap: wrap">

                   <div v-for="(item,index) in config1" :key="index" class="contetn_left-center_item_center">

                     <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>

                     <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>

                   </div>

                 </div>

               </div>

               <div>

                 <p>风险管控</p>

                 <div style="display:flex; justify-content: space-between;flex-wrap: wrap">

                   <div v-for="(item,index) in config2" :key="index" class="contetn_left-center_item_center">

                     <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>

                     <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>

                   </div>

                 </div>

               </div>

             </div>

           </BorderBox13>

         </div>

<!--         <ItemWrap class="contetn_left-center contetn_lr-item" style="height: 100%;" title="都江堰市关键指标数据">-->

<!--         <div style="height: 50%;">-->

<!--           <p>要素管控</p>-->

<!--           <div style="display:flex; justify-content: space-between;flex-wrap: wrap">-->

<!--             <div v-for="(item,index) in config1" :key="index" class="contetn_left-center_item_center">-->

<!--               <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>-->

<!--               <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>-->

<!--             </div>-->

<!--           </div>-->

<!--         </div>-->

<!--           <div>-->

<!--             <p>风险管控</p>-->

<!--             <div style="display:flex; justify-content: space-between;flex-wrap: wrap">-->

<!--               <div v-for="(item,index) in config2" :key="index" class="contetn_left-center_item_center">-->

<!--                 <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>-->

<!--                 <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>-->

<!--               </div>-->

<!--             </div>-->

<!--           </div>-->

<!--&lt;!&ndash;           <LeftCenter />&ndash;&gt;-->



<!--         </ItemWrap>-->

       </div>

     </div>

<!--      <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">-->

<!--        <LeftCenter />-->

<!--        <div>test</div>-->

<!--      </ItemWrap>-->

<!--      <ItemWrap-->

<!--        class="contetn_left-bottom contetn_lr-item"-->

<!--        title="设备提醒"-->

<!--        style="padding: 0 10px 16px 10px"-->

<!--      >-->

<!--        <LeftBottom />-->

<!--      </ItemWrap>-->

    </div>

    <div class="contetn_center">

      <CenterMap class="contetn_center_top" title="设备分布图" />

<!--      <ItemWrap class="contetn_center-bottom" title="安装计划">-->

<!--        <CenterBottom />-->

<!--      </ItemWrap>-->

    </div>

    <div style="display:flex;">

      <div>

        <div style="height: 50%;">

          <BorderBox13 >

            <div style="display: flex;justify-content: space-between">

              <div class="item_title">

                <div class="zuo"></div>

                <span class="title-inner"> &nbsp;&nbsp; 都江堰毒品综合滥用趋势分析 &nbsp;&nbsp; </span>

                <div class="you"></div>

              </div>

              <div>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本月</el-button>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本季</el-button>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本年</el-button>

              </div>

            </div>

            <div  style="width: 100%;height: 90%;">

              <RightTop1 />

            </div>

          </BorderBox13>

        </div>

<!--        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">-->

<!--          <RightTop />-->

<!--        </ItemWrap>-->

<!--        <ItemWrap-->

<!--            class="contetn_left-bottom contetn_lr-item"-->

<!--            title="报警排名(TOP8)"-->

<!--            style="padding: 0 10px 16px 10px"-->

<!--        >-->

<!--          <RightCenter />-->

<!--        </ItemWrap>-->

        <div style="height: 50%;">

          <BorderBox13 >

            <div style="display: flex;justify-content: space-between">

              <div class="item_title">

                <div class="zuo"></div>

                <span class="title-inner"> &nbsp;&nbsp; 关键指标数据 &nbsp;&nbsp; </span>

                <div class="you"></div>

              </div>

              <div>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">新发现吸毒人员</el-button>

              </div>

            </div>

            <div  style="width: 100%;height: 100%;">

              <RightCenter />

            </div>

          </BorderBox13>

        </div>

      </div>

      <div>

        <div style="height: 50%">

          <BorderBox13 >

            <div style="display: flex;justify-content: space-between">

              <div class="item_title">

                <div class="zuo"></div>

                <span class="title-inner"> &nbsp;&nbsp; 各镇街禁毒整改工作 &nbsp;&nbsp; </span>

                <div class="you"></div>

              </div>

              <div>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本年</el-button>

                <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">本月</el-button>

                <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">本季</el-button>

              </div>

            </div>

            <div style="display: flex;justify-content: space-between">

              <div class="right-right-zg" >

                <p style="color:#EC563E ">211</p>

                <p>派单数量</p>

              </div>

              <div class="right-right-zg" >

                <p style="color:#EC563E ">188</p>

                <p>已处理</p>

              </div>

              <div class="right-right-zg" >

                <p style="color:#EC563E ">23</p>

                <p>未处理</p>

              </div>

            </div>

            <div

                class="item_title_content_def"

            >

              <dv-scroll-board :config="config" style="width:500px;height:70%" />

              <div style="text-align: right;font-size: 16px">

                <span>时间：2023-01-01至2023-12-31</span>

              </div>

            </div

            ></BorderBox13>

        </div>

        <div style="height: 50%">

          <BorderBox13 >

            <div style="display: flex;justify-content: space-between">

              <div class="item_title">

                <div class="zuo"></div>

                <span class="title-inner"> &nbsp;&nbsp; 相关单位禁毒整改工作 &nbsp;&nbsp; </span>

                <div class="you"></div>

              </div>

              <div>

                <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">本年</el-button>

                <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">本月</el-button>

                <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">本季</el-button>

              </div>

            </div>

            <div style="display: flex;justify-content: space-between">

              <div class="right-right-zg" >

                <p style="color:#EC563E ">211</p>

                <p>派单数量</p>

              </div>

              <div class="right-right-zg"  >

                <p style="color:#EC563E ">188</p>

                <p>已处理</p>

              </div>

              <div class="right-right-zg" >

                <p style="color:#EC563E ">23</p>

                <p>未处理</p>

              </div>

            </div>

            <div

                class="item_title_content_def"

            >

              <dv-scroll-board :config="config" style="width:500px;height:65%" />

              <div style="text-align: right;font-size: 16px">

                <span>时间：2023-01-01至2023-12-31</span>

              </div>

            </div

            ></BorderBox13>

        </div>

<!--        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">-->

<!--          <RightBottom />-->

<!--        </ItemWrap>-->

      </div>



    </div>

  </div>

</template>



<style scoped lang="scss"></style>

<style scoped lang="scss">

.index-box {

  width: 100%;

  display: flex;

  min-height: calc(100% - 64px);

  justify-content: space-between;

}

//左边 右边 结构一样

.contetn_left,

.contetn_right {

  display: flex;

  flex-direction: column;

  //justify-content: space-around;

  position: relative;

  width: 1260px;

  box-sizing: border-box;

  flex-shrink: 0;

}

.contetn_center {

  flex: 1;

  margin: 0 54px;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  .contetn_center-bottom {

    height: 315px;

  }

}



.contetn_lr-item {

  height: 310px;

}

.contetn_lr-item_right{

  flex: auto;

}

.contetn_lr-item_left{



}

.contetn_lr-item_contetn{

  display: flex;

}

.contetn_left-center_item_center{

  padding: 1rem 0.5rem;



  margin-top: 5px;

  //border: 1px solid #ccc;

  width: 49%;

  height: 75px;

  background-color: #172451;

}

.header{

  background-color: #121E44;

}

$item-title-height: 38px;

$item_title_content-height: calc(100% - 38px);



.item_title {

  height: $item-title-height;

  line-height: $item-title-height;

  //width: 100%;

  color: #31abe3;

  text-align: center;

  // background: linear-gradient(to right, transparent, #0f0756, transparent);

  position: relative;

  display: flex;

  align-items: center;

  //justify-content: center;



  .zuo,

  .you {

    width: 58px;

    height: 14px;

    background-image: url("@/assets/img/titles/zuo.png");

  }



  .you {

    transform: rotate(180deg);

  }

  .title-inner {

    font-weight: 900;

    letter-spacing: 2px;

    background: linear-gradient(

            92deg,

            #0072ff 0%,

            #00eaff 48.8525390625%,

            #01aaff 100%

    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

}



:deep(.dv-border-box-content)  {

  box-sizing: border-box;

  padding: 6px 16px 0px;

}



.item_title_content {

  height: $item_title_content-height;

}



.item_title_content_def {

  width: 100%;

  height: 100%;

}

.right-right-zg{

  background-color: #172451;

  width: 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px 0;

}

</style>