Browse Source

督察情况大屏11/16/16:33

main
parent
commit
5302ba92e5
  1. 1
      src/components/datav/chart-bar-pro.vue
  2. 26
      src/components/datav/chart-bar.vue
  3. 21
      src/views/datav/Gobal.vue
  4. 6
      src/views/datav/SceneInsp.vue

1
src/components/datav/chart-bar-pro.vue

@ -132,6 +132,7 @@ function getColor(val) {
.bar-item_content { .bar-item_content {
.bar-item_content-bar { .bar-item_content-bar {
height: 13px; height: 13px;
} }
} }
} }

26
src/components/datav/chart-bar.vue

@ -14,7 +14,7 @@
<span class="bar-item-label mr-8"> <span class="bar-item-label mr-8">
{{ item.label }} {{ item.label }}
</span> </span>
<div class="bar-item_content mr-8" :long="!item.denominator"> <div class="bar-item_content " :long="!item.denominator">
<div <div
class="bar-item_content-bar" class="bar-item_content-bar"
:style="{ :style="{
@ -23,7 +23,7 @@
}" }"
></div> ></div>
</div> </div>
<span >{{ item.value }}</span> <span>{{ item.value }}</span>
<span <span
class="bar-item_remark text-right ml-8" class="bar-item_remark text-right ml-8"
v-if="item.denominator" v-if="item.denominator"
@ -37,7 +37,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted } from "vue"; import {onMounted} from "vue";
const props = defineProps({ const props = defineProps({
title: { title: {
@ -113,12 +113,15 @@ function getColor(val) {
.bar-title { .bar-title {
font-size: 19px; font-size: 19px;
} }
.bar-sub-title { .bar-sub-title {
color: #597ae9; color: #597ae9;
font-size: 14px; font-size: 14px;
} }
.bar-item { .bar-item {
font-size: 17px; font-size: 17px;
&[size="large"] { &[size="large"] {
.bar-item_content { .bar-item_content {
.bar-item_content-bar { .bar-item_content-bar {
@ -126,9 +129,15 @@ function getColor(val) {
} }
} }
} }
&[size="small"] { &[size="small"] {
font-size: 12px; font-size: 12px;
.bar-item_content {
width: calc(100% - 180px);
} }
}
.bar-item-label { .bar-item-label {
text-align: right; text-align: right;
width: var(--label-width); width: var(--label-width);
@ -136,25 +145,32 @@ function getColor(val) {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&[position="left"] { &[position="left"] {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
} }
&[position="top"] { &[position="top"] {
margin-bottom: 4px; margin-bottom: 4px;
.bar-item-label { .bar-item-label {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
.bar-item_content { .bar-item_content {
width: calc(100% - 80px); width: calc(100% - 80px);
} }
} }
.bar-item_content { .bar-item_content {
width: calc(100% - var(--label-width) - 16px - 30px); width: calc(100% - var(--label-width) - 16px - 30px);
&[long=false] { &[long=false] {
width: calc(100% - var(--label-width) - 36px - 58px); width: calc(100% - var(--label-width) - 36px - 110px);
} }
.bar-item_content-bar { .bar-item_content-bar {
width: 0; width: 0;
height: 9px; height: 9px;
@ -162,8 +178,10 @@ function getColor(val) {
transition: width 0.3s; transition: width 0.3s;
} }
} }
.bar-item_remark { .bar-item_remark {
font-size: 14px; font-size: 14px;
.text-success { .text-success {
color: #09c700; color: #09c700;
} }

21
src/views/datav/Gobal.vue

@ -47,32 +47,32 @@
<datav-statistic <datav-statistic
:value="overview.totalPro" :value="overview.totalPro"
title="问题总数" title="问题总数"
style="width: 16.66%" style="width: 13.66%; margin-left: 20px"
/> />
<datav-statistic <datav-statistic
:value="overview.supervisionPro" :value="overview.supervisionPro"
title="督察问题" title="督察问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.caseVerificationPro" :value="overview.caseVerificationPro"
title="案件核查问题" title="案件核查问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.complaintPro" :value="overview.complaintPro"
title="信访投诉问题" title="信访投诉问题"
style="width: 16.66%;" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.talkPro" :value="overview.talkPro"
title="警务评议问题" title="警务评议问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 30px"
/> />
<datav-statistic <datav-statistic
:value="overview.auditPro" :value="overview.auditPro"
title="审计监督问题" title="审计监督问题"
style="width: 16.66%" style="width: 13.66%; margin-left: 10px"
/> />
</div> </div>
<v-charts <v-charts
@ -360,6 +360,7 @@ const zfbaPieOption = computed(() => {
color: "#fff", color: "#fff",
}, },
data: ywzblist.value, data: ywzblist.value,
}, },
], ],
}; };
@ -378,8 +379,7 @@ const wtlxPieOption = computed(() => {
color: "#fff", color: "#fff",
}, },
data: wtlxlist.value, data: wtlxlist.value,
width: 350,
height: 300
}, },
], ],
}; };
@ -439,7 +439,6 @@ const colors = [
]; ];
// endregion // endregion
@ -502,9 +501,9 @@ const colors = [
// span // span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 30px; width: 50px;
text-align: right; text-align: right;
margin-right: 15px; margin-right: 35px;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
} }

6
src/views/datav/SceneInsp.vue

@ -60,6 +60,7 @@
<datav-chart-bar <datav-chart-bar
:data="data1" :data="data1"
:color="colors" :color="colors"
:size="small"
title="整改率排名" title="整改率排名"
sub-title="已整改/问题数" sub-title="已整改/问题数"
/> />
@ -484,7 +485,7 @@ const option1 = ref({
}); });
const data1 = ref([ const data1 = ref([
{ /*{
label: "开福分局", label: "开福分局",
value: 90, value: 90,
unit: "%", unit: "%",
@ -532,7 +533,7 @@ const data1 = ref([
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },*/
]); ]);
const data2 = [ const data2 = [
@ -619,6 +620,7 @@ function getData() {
}); });
getChangedRank(time.value, 3).then((res) => { getChangedRank(time.value, 3).then((res) => {
rankOverview.value = res.rankOverview; rankOverview.value = res.rankOverview;
data1.value = res.changedRankList;
}); });
} }

Loading…
Cancel
Save