fix：大屏线段打点逻辑修改,查看点位修改
This commit is contained in:
@@ -216,13 +216,13 @@ export default {
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
name: "架梁完成量",
|
||||
name: "累计病害",
|
||||
data: [400, 600, 1400, 1700],
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
symbolSize: 5,
|
||||
name: "墩身完成率",
|
||||
name: "巡查里程",
|
||||
smooth: 1,
|
||||
data: [10, 40, 50, 90],
|
||||
yAxisIndex: 1,
|
||||
@@ -237,30 +237,24 @@ export default {
|
||||
/* 绘制病害分布柱状图 */
|
||||
drawDistributionChart() {
|
||||
const xData = [
|
||||
{ name: "1月", value: 10 },
|
||||
{ name: "2月", value: 12 },
|
||||
{ name: "3月", value: 10 },
|
||||
{ name: "4月", value: 30 },
|
||||
{ name: "5月", value: 20 },
|
||||
{ name: "6月", value: 50 },
|
||||
{ name: "7月", value: 30 },
|
||||
{ name: "8月", value: 40 },
|
||||
{ name: "9月", value: 40 },
|
||||
{ name: "10月", value: 15 },
|
||||
{ name: "G1", value: 10 },
|
||||
{ name: "G11", value: 12 },
|
||||
{ name: "G25", value: 10 },
|
||||
{ name: "G91", value: 30 },
|
||||
{ name: "G1113", value: 20 },
|
||||
{ name: "S2", value: 50 },
|
||||
{ name: "S20", value: 30 },
|
||||
].map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const yData = [
|
||||
{ name: "1月", value: 10 },
|
||||
{ name: "2月", value: 12 },
|
||||
{ name: "3月", value: 10 },
|
||||
{ name: "4月", value: 30 },
|
||||
{ name: "5月", value: 20 },
|
||||
{ name: "6月", value: 50 },
|
||||
{ name: "7月", value: 30 },
|
||||
{ name: "8月", value: 40 },
|
||||
{ name: "9月", value: 40 },
|
||||
{ name: "10月", value: 15 },
|
||||
{ name: "G1", value: 10 },
|
||||
{ name: "G11", value: 12 },
|
||||
{ name: "G25", value: 10 },
|
||||
{ name: "G91", value: 30 },
|
||||
{ name: "G1113", value: 20 },
|
||||
{ name: "S2", value: 50 },
|
||||
{ name: "S20", value: 30 },
|
||||
].map((item, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:17:58
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 11:51:10
|
||||
* @LastEditTime: 2024-11-07 11:35:42
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
|
||||
* @Description: 首页-病害识别
|
||||
-->
|
||||
@@ -24,20 +24,6 @@
|
||||
<div class="right">
|
||||
<div ref="statisticsChart"></div>
|
||||
<div>
|
||||
<el-select
|
||||
v-model="diseaseType"
|
||||
@change="getChartData"
|
||||
placeholder="请选择"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in diseaseOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="distribution-div" ref="distributionChart"></div>
|
||||
<div class="distribution-legnd">
|
||||
<fssm-scroll>
|
||||
@@ -95,81 +81,40 @@ export default {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getOptions();
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取病害类别下拉 */
|
||||
getOptions() {
|
||||
this.diseaseOptions = [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "黄金糕",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "双皮奶",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "蚵仔煎",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "龙须面",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "北京烤鸭",
|
||||
},
|
||||
];
|
||||
},
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
this.distributionList = [
|
||||
{
|
||||
value: 15461,
|
||||
name: "一类",
|
||||
name: "纵向裂缝",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "二类",
|
||||
name: "块状裂缝",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 6546,
|
||||
name: "三类",
|
||||
name: "龟裂",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 2718,
|
||||
name: "四类",
|
||||
name: "坑槽",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1704,
|
||||
name: "五类",
|
||||
name: "车辙",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "二类",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 6546,
|
||||
name: "三类",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 2718,
|
||||
name: "四类",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1704,
|
||||
name: "五类",
|
||||
name: "沉陷",
|
||||
rate: "10%",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:30:35
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 11:46:15
|
||||
* @LastEditTime: 2024-11-07 11:29:32
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
|
||||
* @Description: 首页-路况评定
|
||||
-->
|
||||
@@ -13,11 +13,11 @@
|
||||
<div class="traffic-table">
|
||||
<el-table :data="trafficTableData" style="width: 100%" height="180">
|
||||
<el-table-column type="index" label="序号"></el-table-column>
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
<el-table-column prop="date" label="路线名称" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
<el-table-column prop="name" label="PCI" > </el-table-column>
|
||||
<el-table-column prop="pci" label="PCI等级" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="traffic-chart" ref="trafficChart"></div>
|
||||
@@ -42,64 +42,19 @@ export default {
|
||||
getTableData() {
|
||||
this.trafficTableData = [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1517 弄",
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1519 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1516 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1517 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1519 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1516 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1517 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1519 弄",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1516 弄",
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
@@ -121,7 +76,7 @@ export default {
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "道路新增病害分布",
|
||||
text: "路产趋势",
|
||||
x: "1%",
|
||||
y: "1%",
|
||||
textStyle: {
|
||||
@@ -131,7 +86,7 @@ export default {
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
right:"3%"
|
||||
right: "3%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
@@ -145,7 +100,7 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"],
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
|
||||
Reference in New Issue
Block a user