fix：大屏线段打点逻辑修改,查看点位修改
This commit is contained in:
parent
1d9f6d2b72
commit
5f4fae2c0e
@ -61,7 +61,6 @@ export function getSegment(data) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 根据选择的按钮类型查下级选项框
|
||||
export function getItemTypes(params) {
|
||||
return request({
|
||||
@ -70,3 +69,11 @@ export function getSegment(data) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取地图右上角路段下拉数据
|
||||
export function getRoadListTypes() {
|
||||
return request({
|
||||
url: "/api/v2/segment/selectList",
|
||||
method: "post",
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 09:09:50
|
||||
* @LastEditTime: 2024-11-07 12:01:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -96,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角切换坐标类型多选框 -->
|
||||
<div class="road-checkBox" v-if="!showImgBk && this.mapZoom >= 13">
|
||||
<div class="road-checkBox" v-if="!showImgBk">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
@ -108,6 +108,22 @@
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 切换路段选项框 -->
|
||||
<div class="road-checkBox-twe" v-if="!showImgBk">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
placeholder="请选择路段"
|
||||
@change="getCenterPiont"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title"></div>
|
||||
@ -178,6 +194,32 @@
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看点位图片弹窗 -->
|
||||
<el-dialog
|
||||
title="查看点位"
|
||||
:visible.sync="showImageDialog"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenImgCancel"
|
||||
>
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<img
|
||||
:src="screenImage.imageUrl"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateScreenRects"
|
||||
/>
|
||||
<div
|
||||
v-for="(rect, index) in screenRects"
|
||||
:key="index"
|
||||
class="rect-overlay"
|
||||
:style="getScreenRectStyle(rect)"
|
||||
></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -217,6 +259,7 @@ import {
|
||||
mapPciList,
|
||||
comppanyImg,
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
@ -320,10 +363,14 @@ export default {
|
||||
{ name: "路产", click: "equipment" },
|
||||
{ name: "事件", click: "event" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
// 具体icon类别
|
||||
iconTypeList: [],
|
||||
// icon类别绑定
|
||||
iconType: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 路段选择绑定
|
||||
roadSelect: "",
|
||||
// 图标类别切换标识
|
||||
mapClick: "",
|
||||
// 中间展示的动态组件绑定
|
||||
@ -354,12 +401,19 @@ export default {
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
// 查看点位图片数据
|
||||
screenImage: {},
|
||||
// 查看点位图片弹窗显隐控制
|
||||
showImageDialog: false,
|
||||
// 查看点位图片弹窗红框数据
|
||||
screenRects: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setTime();
|
||||
this.getSelect();
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取当前时间 */
|
||||
@ -404,6 +458,15 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取路段下拉数据 */
|
||||
getRoadList() {
|
||||
getRoadListTypes().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare() {
|
||||
comppanyImg().then(({ code, data }) => {
|
||||
@ -423,6 +486,11 @@ export default {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
|
||||
/* 关闭查看点位大图弹窗 */
|
||||
screenImgCancel() {
|
||||
this.showImageDialog = false;
|
||||
},
|
||||
|
||||
/* 切换icon类型多选框事件 */
|
||||
handleChecked(value) {
|
||||
this.centerPiont = this.drawPointList.filter(
|
||||
@ -455,8 +523,15 @@ export default {
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
// 如果当前已经有打点坐标
|
||||
if (!this.clusters) {
|
||||
mapPointList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
if (this.clusters) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
});
|
||||
}
|
||||
mapPointList({ type: this.mapClick, segmentId: this.roadSelect }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.drawPointList = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
@ -478,8 +553,8 @@ export default {
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 绘制地图点位 */
|
||||
@ -492,7 +567,7 @@ export default {
|
||||
geometry: point,
|
||||
data: {
|
||||
iconType: element.iconType,
|
||||
mediaUrl: element.mediaUrl,
|
||||
imageUrl: element.imageUrl,
|
||||
rect: element.rect,
|
||||
},
|
||||
// 自己设置一个标识
|
||||
@ -586,11 +661,7 @@ export default {
|
||||
getLinePoint() {
|
||||
mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data.map((item) => {
|
||||
return item?.coordinates?.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
});
|
||||
this.lineString = data;
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
@ -600,8 +671,11 @@ export default {
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const lines = element?.coordinates?.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
geometry: new geomExports.LineString(lines),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
@ -612,7 +686,7 @@ export default {
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
color: "#0ABE67",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
@ -641,7 +715,7 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 图标类别切换点击事件 */
|
||||
/* 地图下方4图标类别切换点击事件 */
|
||||
changeIconType(value) {
|
||||
if (this.mapClick !== value) {
|
||||
this.mapClick = value;
|
||||
@ -656,7 +730,7 @@ export default {
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
if (!this.mapZoom) {
|
||||
this.getZoom("10");
|
||||
this.getZoom("11");
|
||||
} else {
|
||||
this.getZoom(this.mapZoom);
|
||||
}
|
||||
@ -681,23 +755,22 @@ export default {
|
||||
|
||||
/* 传回来的地图图层 */
|
||||
getZoom(zoom) {
|
||||
if (zoom === "11" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
if (zoom * 1 >= 13) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
this.getCenterPiont();
|
||||
});
|
||||
} else if (zoom * 1 < 13) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
this.getLinePoint();
|
||||
} else if (zoom === "10" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.getLinePoint();
|
||||
}
|
||||
},
|
||||
|
||||
@ -728,6 +801,8 @@ export default {
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
this.screenImage = selectFeature.get("data");
|
||||
this.showImageDialog = true;
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
@ -894,6 +969,48 @@ export default {
|
||||
goIndex() {
|
||||
this.$router.push("/index");
|
||||
},
|
||||
|
||||
/* 图片位置信息获取 */
|
||||
updateScreenRects() {
|
||||
this.screenRects = [];
|
||||
const image = this.$refs.mainImage;
|
||||
const rects = this.screenImage?.rect?.split(",").map(Number) || [];
|
||||
this.screenRects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
/* 图片红框位置 */
|
||||
getScreenRectStyle({ left, top, width, height }) {
|
||||
const image = this.$refs.mainImage;
|
||||
const container = this.$refs.imageContainer;
|
||||
if (!image || !container) return {};
|
||||
|
||||
const scaleX = container.clientWidth / image.naturalWidth;
|
||||
const scaleY = container.clientHeight / image.naturalHeight;
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
|
||||
const renderedWidth = image.naturalWidth * scale;
|
||||
const renderedHeight = image.naturalHeight * scale;
|
||||
|
||||
const offsetX = (container.clientWidth - renderedWidth) / 2;
|
||||
const offsetY = (container.clientHeight - renderedHeight) / 2;
|
||||
|
||||
return {
|
||||
position: "absolute",
|
||||
left: `${left * scale + offsetX}px`,
|
||||
top: `${top * scale + offsetY}px`,
|
||||
width: `${width * scale}px`,
|
||||
height: `${height * scale}px`,
|
||||
border: "2px solid #FF0000",
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeFlag);
|
||||
@ -1080,6 +1197,57 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 切换线路段
|
||||
.road-checkBox-twe {
|
||||
position: absolute;
|
||||
left: 31.5%;
|
||||
top: 10%;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
z-index: 1;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 15rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
@ -1339,5 +1507,28 @@ export default {
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
|
||||
/* 查看点位大图弹窗 */
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.rect-overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 2px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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轴刻度
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user