supervision
/
supervision-vue
5
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页屏幕动画渲染

main
不爱学习的石同学 1 year ago
parent
c3d222a85d
commit
e8c3199c88
5 changed files with 151 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/components/datav/chart-bar.vue
  2. 197
      src/views/datav/Gobal.vue
  3. 2
      src/views/datav/SceneInsp.vue
  4. 1
      src/views/datav/VideoInsp.vue
  5. 19
      src/views/datav/subonedatav/SubOneGlobal.vue

8
src/components/datav/chart-bar.vue
Unescape View File

@ -107,6 +107,7 @@ function getColor(val) {
}
if (props.color instanceof Array) {
const colors = [...props.color];
// percentage降序
colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) {
if (val > colors[i].percentage) {
@ -135,11 +136,16 @@ function getColor(val) {
.bar-item_content {
.bar-item_content-bar {
height: 13px;
}
}
}
&[size="bigNumber"] {
.bar-item_content {
width: calc(100% - var(--label-width) - 16px - 100px);
}
}
&[size="small"] {
font-size: 12px;

197
src/views/datav/Gobal.vue
Unescape View File

@ -9,13 +9,14 @@
<datav-tabs
v-model="activeOrgTab"
type="bottom-button"
@mouseenter.native="handleMouseEnter"
@mouseleave.native="handleMouseLeave"
>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="340px">
<datav-chart-bar
:data="fxsjlist"
size="large"
:max="11"
size="bigNumber"
:color="colors"
/>
</el-scrollbar>
@ -25,7 +26,7 @@
<datav-chart-bar
:data="jsdwlist"
:max="11"
size="large"
size="bigNumber"
:color="colors"
/>
</el-scrollbar>
@ -35,8 +36,9 @@
<datav-card title="业务类型占比">
<v-charts
style="height: 360px;"
:option="zfbaPieOption"
:option="ywlxPieOption"
autoresize
ref="ywlxzbOption"
/>
</datav-card>
</el-col>
@ -124,6 +126,7 @@
style="height: 370px;"
:option="wtlxPieOption"
autoresize
ref="wtlxzbOption"
/>
</datav-card>
@ -131,7 +134,6 @@
</el-row>
</main>
</div>
</el-scrollbar>
</template>
@ -152,10 +154,11 @@ import {
// region 各种变量
const router = useRouter();
const fxsjlist = ref([{}]); // 分县市区机构问题排名
const fxsjlist = ref([{
label: "天心分局",
value: 99999
}]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题类型占比
const tcwtlist = ref([]); // 突出问题排名
const overview = ref({
totalPro: 0,
@ -201,50 +204,49 @@ const colors = [
const activeOrgTab = ref("1");
const globalMap = ref(null)
const globalTrend=ref(null)
const globalTrend = ref(null)
const ywlxzbOption = ref(null)
const wtlxzbOption = ref(null)
let cardIntervalId;
let wtlxPieCircularIntervalId; // 问题类型占比定时器
let globalMapIntervalId; // 地图定时器
let globalTrendIntervalId; // 问题趋势定时器
let ywlxPieCircularIntervalId; // 业务类型占比定时器
// endregion
// region 图表变量
// 业务类型占比
const zfbaPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: ywzblist.value,
const ywlxPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
],
};
data: [],
},
],
tooltip: {
trigger: "item",
},
});
// 问题类型占比
const wtlxPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: wtlxlist.value,
const wtlxPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
],
};
data: [],
},
],
tooltip: {
trigger: "item",
},
});
// 地图
echarts.registerMap("changsha", changshaMap);
const option = ref({
geo: {
@ -415,16 +417,14 @@ const getOrganizationRankData = async (timeValue = time.value) => {
fxsjlist.value = res.fxsjlist;
jsdwlist.value = res.jsdwlist;
}
const getBusinessRateData = async (timeValue = time.value) => {
const res = await getBusinessRate(timeValue);
ywzblist.value = res.ywzblist;
ywlxPieOption.value.series[0].data = res.ywzblist;
}
const getAllGlobalCountData = async (timeValue = time.value) => {
const res = await getAllGlobalCount(timeValue);
overview.value = res.overview;
}
const getGlobalMapData = async (timeValue = time.value) => {
const res = await getGlobalMap(timeValue);
const mappedData = res.globalTempMapVoList.map(item => {
@ -471,18 +471,20 @@ const getGlobalMapData = async (timeValue = time.value) => {
value: item.totalPro,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg * 0.3 // 不用取整，小数也可以
// 总数
const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
const range40Percent = maxItem.value * 0.4 // 不用取整，小数也可以
const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以
const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以
globalTempMapVoList.value = mappedData;
option.value.series[0].data = globalTempMapVoList;
console.log(range40Percent, range60Percent, range80Percent);
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
{gte: 0, lte: range40Percent, label: "低于最大问题的40%", color: "#4987F6"},
{gte: range40Percent, lte: range60Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: range80Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getGlobalTrendData = async (year = selectedYear.value) => {
const res = await getGlobalTrend(year);
const globalRecentlyTrendList = res.globalRecentlyTrendList;
@ -496,13 +498,11 @@ const getStrongProblemRateData = async (timeValue = time.value) => {
const res = await getStrongProblemRate(timeValue);
tcwtlist.value = res.tcwtlist;
}
const getProblemBusinessRateData = async (timeValue = time.value) => {
const res = await getProblemBusinessRate(timeValue);
wtlxlist.value = res.wtlxlist;
wtlxPieOption.value.series[0].data = res.wtlxlist;
}
function getData() {
getOrganizationRankData();
getBusinessRateData();
@ -513,10 +513,26 @@ function getData() {
getProblemBusinessRateData();
}
onMounted(() => {
getData();
cardAnimation();
setupEventListeners();
});
// endregion
// region 动画
// 卡片动画
const cardAnimation = () => {
activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
setTimeout(cardAnimation, 3000);
cardIntervalId = setTimeout(cardAnimation, 3000);
};
const handleMouseEnter = () => {
clearInterval(cardIntervalId)
};
const handleMouseLeave = () => {
cardIntervalId = setTimeout(() => {
cardAnimation();
}, 3000);
};
// 地图动画
@ -544,7 +560,7 @@ const mapAnimation = () => {
globalMapIntervalId = setInterval(mapAnimation, 2000);
// 趋势动画
const GlobalTrendAnimation = () => {
const globalTrendAnimation = () => {
const myGlobalTrend = globalTrend?.value?.chart;
if (!myGlobalTrend) return;
const randomNum = Math.floor(Math.random() * 12);
@ -554,18 +570,31 @@ const GlobalTrendAnimation = () => {
dataIndex: randomNum,
});
}
globalTrendIntervalId = setInterval(GlobalTrendAnimation, 2000);
onMounted(() => {
getData();
cardAnimation();
setupEventListeners();
});
globalTrendIntervalId = setInterval(globalTrendAnimation, 2000);
// 执法办案环形图
const yelxzbCircularAnimation = () => {
const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
if (!ywlxzbOptionTemp) return;
const length = ywlxPieOption.value.series[0].data.length;
const randomNum = Math.floor(Math.random() * length);
ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
};
ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000);
// 执法办案环形图
const wtlxzbCircularAnimation = () => {
const wtlxzbOptionTemp = wtlxzbOption?.value?.chart;
if (!wtlxzbOptionTemp) return;
const length = ywlxPieOption.value.series[0].data.length;
const randomNum = Math.floor(Math.random() * length);
wtlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
wtlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
wtlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
};
wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
// endregion
// region 事件||监听
@ -587,22 +616,46 @@ const handleClick = (params) => {
}).href;
window.open(url, "_blank");
}
// 鼠标经过地图事件
// 鼠标经过事件
const setupEventListeners = () => {
const ywlxzbOptionTemp = ywlxzbOption?.value?.chart;
ywlxzbOptionTemp.on('mousemove', (e) => {
clearInterval(ywlxPieCircularIntervalId);
ywlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
ywlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
ywlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
})
ywlxzbOptionTemp.on('mouseout', () => {
clearInterval(ywlxPieCircularIntervalId);
ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000);
});
const myGlobalMap = globalMap.value.chart;
// 鼠标移入
myGlobalMap.on('mousemove', (e) => {
clearInterval(globalMapIntervalId);
myGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
myGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
myGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
myGlobalMap.on('mouseout', () => {
clearInterval(globalMapIntervalId); // 确保没有多个定时器同时运行
globalMapIntervalId = setInterval(mapAnimation, 2000);
});
const wtlxzbOptionTemp = wtlxzbOption?.value?.chart;
wtlxzbOptionTemp.on('mousemove', (e) => {
clearInterval(wtlxPieCircularIntervalId);
wtlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
wtlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
wtlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
})
wtlxzbOptionTemp.on('mouseout', () => {
clearInterval(wtlxPieCircularIntervalId);
wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000);
})
};
// endregion

2
src/views/datav/SceneInsp.vue
Unescape View File

@ -1287,7 +1287,7 @@ const sceneInspMapAnimation = () => {
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
const SceneInspTrendAnimation = () => {
const mySceneInspProTrend = sceneInspProTrend.value.chart;
const mySceneInspProTrend = sceneInspProTrend?.value?.chart;
if (!mySceneInspProTrend) return;
const randomNum = Math.floor(Math.random() * 12);
mySceneInspProTrend.dispatchAction({

1
src/views/datav/VideoInsp.vue
Unescape View File

@ -233,6 +233,7 @@ const years = ref([currentYear.toString(), (currentYear - 1).toString(), (curren
const selectedYear = ref(currentYear); // 当前选中的年份
const videoMap = ref(null);
let videoMapIntervalId;
let sceneInspTrendIntervalId;
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",

19
src/views/datav/subonedatav/SubOneGlobal.vue
Unescape View File

@ -80,6 +80,7 @@
:option="option"
autoresize
ref="subOneGlobalMap"
@click="handleClick"
/>
<div>
@ -129,6 +130,7 @@
</el-row>
</main>
</div>
<negative-info-depart-dialog v-model="show" :departId="tempDepartId" />
</el-scrollbar>
</template>
@ -149,6 +151,9 @@ import {
} from "@/api/screen/subScreen/subOneGlobal.ts";
// region 各种变量
const show = ref(false); // 负面信息弹窗显示
const tempDepartId = ref(0); // 临时部门id
const router = useRouter();
const route = useRoute();
const currentMapData = ref({})
@ -191,7 +196,7 @@ const colors = [
percentage: 40,
},
];
let subOneGlobalMapIntervalId ; // 问题趋势
let subOneGlobalMapIntervalId ;
// endregion
@ -469,7 +474,7 @@ const cardAnimation = () => {
//地图动画
const mapAnimation = () => {
const mySubOneGlobalMap = subOneGlobalMap.value.chart;
const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
if (!mySubOneGlobalMap) return;
// 来个随机数，9个图 0~8的整数就ok
const tempNum = currentMapData?.value?.geoJson?.features?.length
@ -525,6 +530,16 @@ const setupEventListeners = () => {
subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
});
};
const handleClick = (params) => {
const departId = params.data.departId;
show.value = true;
tempDepartId.value=2661
console.log(subOneGlobalMapIntervalId);
clearInterval(subOneGlobalMapIntervalId);
// alert(departId)
}
// endregion

Write Preview
Loading…
Cancel
Save