137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<template>
|
|
<div class="right-data-screen">
|
|
<a-segmented
|
|
v-model:value="type"
|
|
:options="data"
|
|
style="
|
|
width: 60%;
|
|
height: 37px;
|
|
border-radius: 19px;
|
|
margin: 0 auto;
|
|
background: #102649;
|
|
margin-top: 6px;
|
|
margin-bottom: 4px;
|
|
border-top: 1px solid #4bb8f4;
|
|
border-top: 1px solid #4bb8f4;
|
|
border-left: 1px solid #4bb8f4;
|
|
"
|
|
@change="changeType"
|
|
/>
|
|
<!-- columnar 下发图斑 柱状图 -->
|
|
<Columnar :type="type" :typeName="typeName" />
|
|
<!-- brokenline 下发图斑趋势 折线图 -->
|
|
<Brokenline :type="type" :typeName="typeName" :countyList="list" />
|
|
<!-- circulation 数据分析 环比 -->
|
|
<Circulation :countyList="list" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { Columnar, Brokenline, Circulation } from './page';
|
|
import { ref, onMounted } from 'vue';
|
|
import { getUserOrgs } from '@/api/tiankongdi';
|
|
import { getChildrenTree } from '@/api/demo/system';
|
|
|
|
const type: any = ref(1);
|
|
const typeName: any = ref('下发图斑');
|
|
const data = ref([
|
|
{
|
|
label: '下发图斑',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '核实后新增违法',
|
|
value: 2,
|
|
},
|
|
{
|
|
label: '整改后剩余新增违法',
|
|
value: 3,
|
|
},
|
|
]);
|
|
function changeType(val) {
|
|
console.log(val);
|
|
type.value = val;
|
|
typeName.value = data.value.find((item) => item.value == val)?.label;
|
|
}
|
|
// 初始数据
|
|
const list = ref();
|
|
async function getOptions() {
|
|
const data = await getChildrenTree({
|
|
parentId: 371300,
|
|
});
|
|
data.forEach((item) => {
|
|
item.isClick = false;
|
|
});
|
|
list.value = data;
|
|
let linyishi = {
|
|
id: '',
|
|
name: '临沂市',
|
|
};
|
|
list.value.unshift(linyishi);
|
|
}
|
|
// 获取用户可以访问的机构信息
|
|
async function handlerGetOrgs() {
|
|
let orgs = await getUserOrgs({});
|
|
let isLevel = orgs.find((item, index) => {
|
|
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
|
|
});
|
|
if (isLevel) {
|
|
// 市级
|
|
getOptions();
|
|
} else {
|
|
// 县区级
|
|
let levesl = orgs.filter((item, index) => {
|
|
return item.parentName == '临沂市' || item.parentId == 371300;
|
|
});
|
|
list.value = levesl;
|
|
}
|
|
}
|
|
onMounted(async () => {
|
|
await handlerGetOrgs();
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.right-data-screen {
|
|
// background: linear-gradient(
|
|
// to right,
|
|
// rgba(0, 0, 0, 0),
|
|
// rgba(0, 0, 0, 0.3),
|
|
// rgba(0, 0, 0, 0.5),
|
|
// rgba(0, 0, 0, 0.7)
|
|
// );
|
|
max-width: calc(100vw - 580px);
|
|
width: calc(100vw - 500px);
|
|
padding: 24px 20px;
|
|
height: 100vh;
|
|
padding-top: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 80px;
|
|
}
|
|
:deep(.ant-segmented-thumb) {
|
|
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
|
border-radius: 19px;
|
|
}
|
|
:deep(.ant-segmented-item) {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 19px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
:deep(.ant-segmented-group) {
|
|
height: 100%;
|
|
}
|
|
:deep(.ant-segmented-item-selected) {
|
|
background: linear-gradient(-38deg, #3058e1, #4cbbf5);
|
|
box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|