updata
1 parent b488134 commit cc832c24418c1a4a4014e0bc15c979e442c2c346
@鲁yixuan 鲁yixuan authored on 11 Oct
Showing 5 changed files
View
169
src/views/oneMap/FloodStuationReview/ChartXcry.vue 0 → 100644
<template>
<div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
import { nowSize } from '@/utils/util.js';
import moment from 'moment';
const props = defineProps({
//刷新标志
refresh: {
type: [String, Number],
default: 1,
},
//数据
echartData: {
type: Object,
default: {},
},
});
 
const id = guid();
const myChart = shallowRef('');
 
watch(
() => props.refresh,
value => {
//先销毁实例
myChart.value && myChart.value.dispose();
intChart();
}
);
//自适应
function resizeTheChart() {
if (myChart.value) {
myChart.value.resize();
}
}
//初始化
function intChart() {
myChart.value = proxy.echarts.init(document.getElementById(id));
myChart.value.clear();
// 绘制图表
myChart.value.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
// label: {
// show: true,
// }
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value + '人';
},
},
grid: {
top: nowSize(14, 1920),
bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
left: nowSize(100, 1920),
right: nowSize(20, 1920),
},
xAxis: {
type: 'value',
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLabel: {
show: true,
color: '#39F7FF',
fontSize: nowSize(14, 1920),
},
splitLine: {
//网格线
lineStyle: {
type: 'dashed',
color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
},
show: true, //隐藏或显示
},
},
yAxis: {
type: 'category',
data: props.echartData.xData,
name: '巡查人数',
nameLocation: 'start',
nameTextStyle: {
color: '#39F7FF',
fontSize: nowSize(14, 1920),
padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: 'rgba(255, 255, 255, 1)',
fontSize: nowSize(13, 1920),
},
// splitArea: {
// show: true,
// areaStyle: {
// color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
// }
// }
},
series: [
{
type: 'bar',
name: '巡查人数',
data: props.echartData.data,
barWidth: nowSize(10, 1920),
zlevel: 1,
itemStyle: {
barBorderRadius: nowSize(5, 1920),
color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(0, 167, 245,1)',
},
{
offset: 1,
color: 'rgba(0, 238, 253,1)',
},
]),
},
},
{
name: '背景',
type: 'bar',
barWidth: nowSize(10, 1920),
barGap: '-100%',
data: props.echartData.num,
itemStyle: {
barBorderRadius: nowSize(5, 1920),
color: 'rgba(77, 149, 217, 0.15)',
},
},
],
});
}
onMounted(() => {
intChart();
window.addEventListener('resize', resizeTheChart);
});
</script>
 
<style lang="scss" scoped>
.chartBox {
width: 100%;
height: 100%;
}
</style>
View
44
src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
<div class="personnel flex">
<div class="icon"></div>
<div class="text">人员调度</div>
</div>
<div class="ScheduEcharts"></div>
<div class="ScheduEcharts">
<ChartXcry :echartData="ryData" :refresh="ryRefresh" />
</div>
</div>
</div>
 
<!--车辆调度 -->
<div class="VehiclDispatch">
<div class="topVehicl flex">
<div class="icon"></div>
</template>
 
<script setup name="ZHPS">
import ChartCl from './chartCl.vue';
import ChartXcry from './ChartXcry.vue';
import track from '@/assets/track.json';
import car from '@/assets/newImgs/car.png';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 
const ryData = ref({});
const ryRefresh = ref('');
const clData = {
xData: ['陕J6JU85'],
data1: [9.8],
data2: [21],
zoom: 13.8,
});
mapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
}
// 人员
function getData() {
let obj = {
xData: [
'市卫健委',
'市水务局',
'市城管局',
'市自然资源局',
'市交通运输局',
'市气象局',
'市公安局',
'市消防救援支队',
'市应急管理局',
],
data: [10, 15, 20, 12, 28, 30, 35, 40, 50],
num: [],
};
let max = JSON.parse(JSON.stringify(obj.data));
let one = max.sort((a, b) => b - a)[0];
max.forEach(i => {
obj.num.push(one);
});
ryData.value = obj;
ryRefresh.value = Math.random();
}
onMounted(() => {
getData();
});
</script>
 
<style lang="scss" scoped>
.Scheduling {
margin: 10px auto;
width: 410px;
height: calc(100% - 45px);
// background: red;
background: url('@/assets/images/fhpl/rydd.png') no-repeat;
background-size: 100% 100%;
// background: url('@/assets/images/fhpl/rydd.png') no-repeat;
// background-size: 100% 100%;
}
}
}
.VehiclDispatch {
View
31
src/views/oneMap/SmartDrainage/PsLeftBox.vue
<div class="upperMc">{{ item.name }}</div>
</div>
</div>
</div>
<div v-if="partName == '缺陷管网'" class="defect"></div>
<div v-if="partName == '缺陷管网'" class="defect">
<ChartRy :echartData="ryData" :refresh="ryRefresh" />
</div>
 
<div class="partList" v-else>
<div class="head">
<span style="width: 10%; text-align: center">序号</span>
import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
import fxd from '@/assets/images/zhps/fxd.png'; //风险点
import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
import yld from '@/assets/images/zhps/yld.png'; //易涝点
import ChartRy from './chartRy.vue';
import bus from '@/bus';
const AllData = reactive({});
const ryData = ref({});
const ryRefresh = ref('');
const tableData = ref([
{ name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
{ name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
{ name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
var reader = new FileReader();
reader.onload = e => createPlot(e, canvas);
reader.readAsArrayBuffer(imageFiles[index]);
};
 
// 缺陷逛网
function getData() {
let obj = {
xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
num: [],
};
let max = JSON.parse(JSON.stringify(obj.data));
let one = max.sort((a, b) => b - a)[0];
max.forEach(i => {
obj.num.push(one);
});
ryData.value = obj;
ryRefresh.value = Math.random();
}
 
onMounted(() => {
getData();
initRainImage([images[0]]);
});
onBeforeUnmount(() => {
bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
.defect {
margin: auto;
width: 430px;
height: calc(100% - 85px);
background: url('@/assets/images/zhps/gwEhs.png') no-repeat;
background-size: 100% 100%;
// background: url('@/assets/images/zhps/gwEhs.png') no-repeat;
// background-size: 100% 100%;
}
}
}
.RainfallForecast {
View
169
src/views/oneMap/SmartDrainage/chartRy.vue 0 → 100644
<template>
<div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
import { nowSize } from '@/utils/util.js';
import moment from 'moment';
const props = defineProps({
//刷新标志
refresh: {
type: [String, Number],
default: 1,
},
//数据
echartData: {
type: Object,
default: {},
},
});
 
const id = guid();
const myChart = shallowRef('');
 
watch(
() => props.refresh,
value => {
//先销毁实例
myChart.value && myChart.value.dispose();
intChart();
}
);
//自适应
function resizeTheChart() {
if (myChart.value) {
myChart.value.resize();
}
}
//初始化
function intChart() {
myChart.value = proxy.echarts.init(document.getElementById(id));
myChart.value.clear();
// 绘制图表
myChart.value.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
// label: {
// show: true,
// }
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value + '';
},
},
grid: {
top: nowSize(14, 1920),
bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
left: nowSize(100, 1920),
right: nowSize(20, 1920),
},
xAxis: {
type: 'value',
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLabel: {
show: true,
color: '#39F7FF',
fontSize: nowSize(14, 1920),
},
splitLine: {
//网格线
lineStyle: {
type: 'dashed',
color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
},
show: true, //隐藏或显示
},
},
yAxis: {
type: 'category',
data: props.echartData.xData,
name: '管网长度',
nameLocation: 'start',
nameTextStyle: {
color: '#39F7FF',
fontSize: nowSize(14, 1920),
padding: [nowSize(-8, 1920), 0, 0, nowSize(-90, 1920)],
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: 'rgba(44, 110, 189, 1)',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: 'rgba(255, 255, 255, 1)',
fontSize: nowSize(14, 1920),
},
// splitArea: {
// show: true,
// areaStyle: {
// color:["rgba(77, 149, 217, 0.15)","rgba(77, 149, 217,0)"]
// }
// }
},
series: [
{
type: 'bar',
name: '管网长度',
data: props.echartData.data,
barWidth: nowSize(10, 1920),
zlevel: 1,
itemStyle: {
barBorderRadius: nowSize(5, 1920),
color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(0, 167, 245,1)',
},
{
offset: 1,
color: 'rgba(0, 238, 253,1)',
},
]),
},
},
{
name: '背景',
type: 'bar',
barWidth: nowSize(10, 1920),
barGap: '-100%',
data: props.echartData.num,
itemStyle: {
barBorderRadius: nowSize(5, 1920),
color: 'rgba(77, 149, 217, 0.15)',
},
},
],
});
}
onMounted(() => {
intChart();
window.addEventListener('resize', resizeTheChart);
});
</script>
 
<style lang="scss" scoped>
.chartBox {
width: 100%;
height: 100%;
}
</style>
View
vite.config.js