<script setup lang="ts">
|
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";
|
|
// 右边部分
|
import Analysis from './right/analysis/index.vue';
|
import Danger from './right/danger/index.vue';
|
import Publicize from './right/publicize/index.vue';
|
import Chartgd from "@/views/index/chartgd.vue";
|
import {ref} from "vue";
|
|
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,
|
}]
|
const dtFig=ref(0)
|
const handlechan=()=>{
|
|
}
|
</script>
|
|
<template>
|
<div class="index-box">
|
<!-- <chartgd @changeDt="handlechan" v-if="dtFig ==0" class="gddt"></chartgd>-->
|
<div class="contetn_left">
|
<ItemWrap class="contetn_left-top contetn_lr-item" title="近3年交通事故指数">
|
<LeftTop />
|
</ItemWrap>
|
<div class="contetn_lr-item_contetn">
|
<div class="contetn_lr-item_left">
|
<ItemWrap class="contetn_left-top contetn_lr-item" title="人车路基础信息">
|
<left-center />
|
</ItemWrap>
|
</div>
|
<div class="contetn_lr-item_right">
|
<ItemWrap class="contetn_left-top contetn_lr-item" title="重点景区运行情况">
|
<left-bottom />
|
</ItemWrap>
|
|
</div>
|
</div>
|
|
</div>
|
<div class="contetn_center">
|
<CenterMap class="contetn_center_top" title="设备分布图" />
|
|
</div>
|
|
<!-- 右边区域 -->
|
<div class="contetn_right flex flex-col">
|
<div>
|
<Analysis />
|
</div>
|
<div class="flex justify-between">
|
<div class="right_wrapper_content">
|
<Danger />
|
</div>
|
<div class="right_wrapper_content">
|
<Publicize />
|
</div>
|
</div>
|
</div>
|
|
|
<!-- 缉毒原版 -->
|
<!-- <div>
|
<div style="height: 50%;">
|
|
<div style="display: flex;justify-content: space-between">
|
<div class="item_title">
|
<div class="zuo"></div>
|
<span class="title-inner"> 都江堰毒品综合滥用趋势分析 </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>
|
|
</div>
|
|
<div style="height: 50%;">
|
|
<div style="display: flex;justify-content: space-between">
|
<div class="item_title">
|
<div class="zuo"></div>
|
<span class="title-inner"> 关键指标数据 </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>
|
|
</div>
|
</div>
|
<div>
|
<div style="height: 50%">
|
|
<div style="display: flex;justify-content: space-between">
|
<div class="item_title">
|
<div class="zuo"></div>
|
<span class="title-inner"> 各镇街禁毒整改工作 </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
|
>
|
</div>
|
|
<div style="height: 50%">
|
|
<div style="display: flex;justify-content: space-between">
|
<div class="item_title">
|
<div class="zuo"></div>
|
<span class="title-inner"> 相关单位禁毒整改工作 </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
|
>
|
</div>
|
</div> -->
|
<!-- 缉毒原版 -->
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.gddt{
|
position: absolute;
|
z-index: 0;
|
width: 3840px;
|
height: 1080px;
|
}
|
.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 {
|
width: 48%;
|
}
|
|
.contetn_lr-item_left {
|
width: 50%;
|
}
|
|
.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;
|
margin: 20px 0;
|
border: 1px solid #29466A;
|
//background: #11223A;
|
}
|
|
.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;
|
}
|
|
.right_wrapper_content {
|
width: 617px;
|
}
|
</style>
|
