|
@@ -9,249 +9,249 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-// 该组件和wind-road组件基本上一摸一样,只不过该组件是适配首页中间的卡片而做的
|
|
|
-import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
|
|
|
-import { SvgIcon } from '/@/components/Icon';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
+ // 该组件和wind-road组件基本上一摸一样,只不过该组件是适配首页中间的卡片而做的
|
|
|
+ import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
|
|
|
-let props = defineProps({
|
|
|
- measureData: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
+ let props = defineProps({
|
|
|
+ measureData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-});
|
|
|
-const roadTitle = '监测点位统计与分析';
|
|
|
-const measureRef = ref();
|
|
|
-let router = useRouter(); //路由
|
|
|
-// let xData = ref<any[]>([]);
|
|
|
-// let yData = ref<any[]>([]);
|
|
|
-// let maxData = reactive<any[]>([]);
|
|
|
+ });
|
|
|
+ const roadTitle = '监测点位统计与分析';
|
|
|
+ const measureRef = ref();
|
|
|
+ let router = useRouter(); //路由
|
|
|
+ // let xData = ref<any[]>([]);
|
|
|
+ // let yData = ref<any[]>([]);
|
|
|
+ // let maxData = reactive<any[]>([]);
|
|
|
|
|
|
-function getOption() {
|
|
|
- nextTick(() => {
|
|
|
- const myChart = echarts.init(measureRef.value);
|
|
|
- // let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
+ function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ const myChart = echarts.init(measureRef.value);
|
|
|
+ // let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- legend: {
|
|
|
- textStyle: {
|
|
|
- color: '#ffffff', // 字体颜色
|
|
|
+ legend: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff', // 字体颜色
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '40',
|
|
|
- left: '10',
|
|
|
- bottom: '10',
|
|
|
- right: '10',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: [
|
|
|
- '柳塔矿',
|
|
|
- '寸草塔二矿',
|
|
|
- '布尔台矿',
|
|
|
- '乌兰木伦矿',
|
|
|
- '寸草塔矿',
|
|
|
- '石圪台矿',
|
|
|
- '补连塔矿',
|
|
|
- '哈拉沟矿',
|
|
|
- '上湾矿',
|
|
|
- '活鸡兔井',
|
|
|
- '大柳塔井',
|
|
|
- '锦界矿',
|
|
|
- '榆家梁矿',
|
|
|
- '保德矿',
|
|
|
- ],
|
|
|
- // data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
|
|
|
- //data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- color: '#ffffff',
|
|
|
- rotate: 0,
|
|
|
- formatter: function (params) {
|
|
|
- let newParamsName = '';
|
|
|
- const paramsNameNumber = params.length;
|
|
|
- const provideNumber = 3; // 单行显示文字个数
|
|
|
- const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|
|
- if (paramsNameNumber > provideNumber) {
|
|
|
- for (let p = 0; p < rowNumber; p++) {
|
|
|
- let tempStr = '';
|
|
|
- const start = p * provideNumber;
|
|
|
- const end = start + provideNumber;
|
|
|
- if (p === rowNumber - 1) {
|
|
|
- tempStr = params.substring(start, paramsNameNumber);
|
|
|
- } else {
|
|
|
- tempStr = params.substring(start, end) + '\n';
|
|
|
+ grid: {
|
|
|
+ top: '40',
|
|
|
+ left: '10',
|
|
|
+ bottom: '10',
|
|
|
+ right: '10',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [
|
|
|
+ '柳塔矿',
|
|
|
+ '寸草塔二矿',
|
|
|
+ '布尔台矿',
|
|
|
+ '乌兰木伦矿',
|
|
|
+ '寸草塔矿',
|
|
|
+ '石圪台矿',
|
|
|
+ '补连塔矿',
|
|
|
+ '哈拉沟矿',
|
|
|
+ '上湾矿',
|
|
|
+ '活鸡兔井',
|
|
|
+ '大柳塔井',
|
|
|
+ '锦界矿',
|
|
|
+ '榆家梁矿',
|
|
|
+ '保德矿',
|
|
|
+ ],
|
|
|
+ // data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
|
|
|
+ //data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ color: '#ffffff',
|
|
|
+ rotate: 0,
|
|
|
+ formatter: function (params) {
|
|
|
+ let newParamsName = '';
|
|
|
+ const paramsNameNumber = params.length;
|
|
|
+ const provideNumber = 3; // 单行显示文字个数
|
|
|
+ const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|
|
+ if (paramsNameNumber > provideNumber) {
|
|
|
+ for (let p = 0; p < rowNumber; p++) {
|
|
|
+ let tempStr = '';
|
|
|
+ const start = p * provideNumber;
|
|
|
+ const end = start + provideNumber;
|
|
|
+ if (p === rowNumber - 1) {
|
|
|
+ tempStr = params.substring(start, paramsNameNumber);
|
|
|
+ } else {
|
|
|
+ tempStr = params.substring(start, end) + '\n';
|
|
|
+ }
|
|
|
+ newParamsName += tempStr;
|
|
|
}
|
|
|
- newParamsName += tempStr;
|
|
|
+ } else {
|
|
|
+ newParamsName = params;
|
|
|
}
|
|
|
- } else {
|
|
|
- newParamsName = params;
|
|
|
- }
|
|
|
- return newParamsName;
|
|
|
+ return newParamsName;
|
|
|
+ },
|
|
|
},
|
|
|
+ // data: xData.value,
|
|
|
},
|
|
|
- // data: xData.value,
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- max:20,
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(21,80,126,.3)',
|
|
|
- type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ max: 20,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(21,80,126,.3)',
|
|
|
+ type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线
|
|
|
+ },
|
|
|
+ // show: item.linetype == 'line' ? true : false,
|
|
|
+ show: true,
|
|
|
},
|
|
|
- // show: item.linetype == 'line' ? true : false,
|
|
|
- show: true,
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
+ ],
|
|
|
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '测点异常数',
|
|
|
- type: 'bar',
|
|
|
- stack: 'Ad',
|
|
|
- barMaxWidth: '24',
|
|
|
- emphasis: {
|
|
|
- focus: 'series',
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#F56731',
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- formatter: (params) => (params.value > 0 ? params.value : ''),
|
|
|
- },
|
|
|
- data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '测点正常数',
|
|
|
- type: 'bar',
|
|
|
- stack: 'Ad',
|
|
|
- barMaxWidth: '24',
|
|
|
- emphasis: {
|
|
|
- focus: 'series',
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#00E8FFBB',
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '测点异常数',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ barMaxWidth: '24',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#F56731',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: (params) => (params.value > 0 ? params.value : ''),
|
|
|
+ },
|
|
|
+ data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
|
|
|
},
|
|
|
+ {
|
|
|
+ name: '测点正常数',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ barMaxWidth: '24',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00E8FFBB',
|
|
|
+ },
|
|
|
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- //数值样式
|
|
|
- color: '#000',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ //数值样式
|
|
|
+ color: '#000',
|
|
|
+ },
|
|
|
},
|
|
|
+ data: [5, 6, 5, 8, 8, 6, 8, 11, 6, 7, 4, 7, 7, 7],
|
|
|
},
|
|
|
- data: [5, 6, 5, 8, 8, 6, 8, 11, 6, 7, 4, 7, 7, 7],
|
|
|
- },
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'bar',
|
|
|
- // stack: 'Ad',
|
|
|
- barGap: '-100%',
|
|
|
- barMaxWidth: '24',
|
|
|
- z: 1,
|
|
|
- emphasis: {
|
|
|
- focus: 'series',
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#00E8FF00',
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top', //在上方显示
|
|
|
- textStyle: {
|
|
|
- //数值样式
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ // stack: 'Ad',
|
|
|
+ barGap: '-100%',
|
|
|
+ barMaxWidth: '24',
|
|
|
+ z: 1,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00E8FF00',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top', //在上方显示
|
|
|
+ textStyle: {
|
|
|
+ //数值样式
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
|
|
|
},
|
|
|
- data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- // 监听柱状图的点击事件
|
|
|
- myChart.on('click', function (params) {
|
|
|
- if (params.componentType === 'series') {
|
|
|
- // alert('您点击的是第 ' + (params.dataIndex + 1) + ' 个柱子,其值为 ' + params.value);
|
|
|
- router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=dusting')
|
|
|
- }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 监听柱状图的点击事件
|
|
|
+ myChart.on('click', function (params) {
|
|
|
+ if (params.componentType === 'series') {
|
|
|
+ // alert('您点击的是第 ' + (params.dataIndex + 1) + ' 个柱子,其值为 ' + params.value);
|
|
|
+ router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=dusting');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
});
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- });
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-watch(
|
|
|
- () => props.measureData,
|
|
|
- (newV, oldV) => {
|
|
|
- if (JSON.stringify(newV) != '{}') {
|
|
|
- getOption();
|
|
|
+ watch(
|
|
|
+ () => props.measureData,
|
|
|
+ (newV, oldV) => {
|
|
|
+ if (JSON.stringify(newV) != '{}') {
|
|
|
+ getOption();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- }
|
|
|
-);
|
|
|
-onMounted(() => {
|
|
|
- getOption();
|
|
|
-});
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ getOption();
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@font-face {
|
|
|
- font-family: 'douyuFont';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
-}
|
|
|
-
|
|
|
-.measure-point {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- left: 50px;
|
|
|
- top: 10px;
|
|
|
- color: #fff;
|
|
|
+ @font-face {
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
}
|
|
|
|
|
|
- .measure-content {
|
|
|
- // width: 100%;
|
|
|
- // position: relative;
|
|
|
+ .measure-point {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 42px 40px 15px 40px;
|
|
|
- box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .echart-box {
|
|
|
- // position: absolute;
|
|
|
- width: 100%;
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 10px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .measure-content {
|
|
|
+ // width: 100%;
|
|
|
+ // position: relative;
|
|
|
height: 100%;
|
|
|
+ padding: 42px 40px 15px 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .measure {
|
|
|
+ .echart-box {
|
|
|
+ // position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+
|
|
|
+ .measure {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|