xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

放大图片

Browse Source
hn2.0
fanluyan 2 years ago
parent 6d00825f1c
commit d57577ddc2
12 changed files with 12325 additions and 241 deletions
Show Stats Download Patch File Download Diff File

11953
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape Escape View File

@ -12,6 +12,7 @@
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.4.2", "echarts": "^5.4.2",
"element-ui": "^2.15.13", "element-ui": "^2.15.13",
"jquery": "^3.7.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"update-element-ui-theme": "^1.0.0", "update-element-ui-theme": "^1.0.0",
"v-viewer": "^1.6.4", "v-viewer": "^1.6.4",

10
src/components/common/Sidebar.vue
Unescape Escape View File

@ -53,11 +53,11 @@ export default {
return { return {
activeIndex: "/realTimeMonitor", activeIndex: "/realTimeMonitor",
items: [ items: [
// { {
// icon: "el-icon-s-home", icon: "el-icon-s-home",
// index: "stritl", index: "/videoHistory",
// title: "首页", title: "首页",
// }, },
{ {
icon: "el-icon-camera", icon: "el-icon-camera",
index: "/realTimeMonitor", index: "/realTimeMonitor",

10
src/main.js
Unescape Escape View File

@ -11,9 +11,9 @@ Vue.use(ElementUI, {
size: "small", size: "small",
}); });
// 引入Echarts //引入Echarts;
// import * as echarts from "echarts"; import * as echarts from "echarts";
// Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
// // 引入 vue-awesome-swiper // // 引入 vue-awesome-swiper
// import VueAwesomeSwiper from "vue-awesome-swiper"; // import VueAwesomeSwiper from "vue-awesome-swiper";
@ -43,7 +43,9 @@ Vue.use(Viewer);
Viewer.setDefaults({ Viewer.setDefaults({
zIndexInline: 9999, zIndexInline: 9999,
}); });
//使用jq
import jquery from "jquery";
Vue.prototype.$ = jquery;
//使用钩子函数对路由进行权限跳转 //使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 视频监控可视化平台`; document.title = `${to.meta.title} | 视频监控可视化平台`;

16
src/router/index.js
Unescape Escape View File

@ -154,14 +154,14 @@ const routes = [
// ), // ),
// meta: { title: "监控视频", icon: "el-icon-video-camera" }, // meta: { title: "监控视频", icon: "el-icon-video-camera" },
// }, // },
// { {
// path: "/videoHistory", path: "/videoHistory",
// component: () => component: () =>
// import( import(
// /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue" /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
// ), ),
// meta: { title: "视频回放", icon: "el-icon-video-camera" }, meta: { title: "视频回放" },
// }, },
// { // {
// path: "/groupInformation", // path: "/groupInformation",

147
src/views/alarmHandling/index.vue
Unescape Escape View File

@ -77,11 +77,11 @@
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item> </el-form-item>
<!-- <el-form-item> <el-form-item>
<el-button type="primary" @click="handleListRow">{{ <el-button type="primary" @click="handleListRow">{{
tableShow ? "图片列表" : "表格列表" tableShow ? "图片列表" : "表格列表"
}}</el-button> }}</el-button>
</el-form-item> --> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -187,13 +187,17 @@
</div> </div>
</div> </div>
<div class="alarmPic"> <div class="alarmPic">
<div class="imgshow" v-loading="alarmLoading"> <div
class="imgshow"
v-loading="alarmLoading"
@click="handleBigPicbox(selectRow)"
>
<!-- @click="handleBigPicbox(selectRow)" --> <!-- @click="handleBigPicbox(selectRow)" -->
<div <div
class="picshow" class="picshow"
v-if="selectRow.path !== '' && tableData.length !== 0" v-if="selectRow.path !== '' && tableData.length !== 0"
v-viewer="OptionssalseImg"
> >
<!-- v-viewer="OptionssalseImg" -->
<!-- <div <!-- <div
class="nosee" class="nosee"
:style="'backgroundImage:url(' + photoPic + '!1366x768)'" :style="'backgroundImage:url(' + photoPic + '!1366x768)'"
@ -237,7 +241,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="pictureBox" v-else> <div class="pictureBox" v-else v-loading="loading">
<div class="piclist" v-if="tableData.length !== 0"> <div class="piclist" v-if="tableData.length !== 0">
<el-card <el-card
class="box-card imgList" class="box-card imgList"
@ -245,10 +249,10 @@
:key="index" :key="index"
> >
<div class="bigpic"> <div class="bigpic">
<div class="picshow"> <div class="picshow" @click="handlePicAlarm(item)">
<img :src="item.path + '!1366x768'" :ref="'picJpg' + index" /> <img :src="item.path + '!1366x768'" :ref="'picJpg' + index" />
<canvas <canvas
id="myCanvas" :id="'myCanvas' + index"
class="myCanvas" class="myCanvas"
:ref="'myCanvas' + index" :ref="'myCanvas' + index"
></canvas> ></canvas>
@ -305,15 +309,15 @@
</div> </div>
</div> </div>
<!-- 点击出现大图 --> <!-- 点击出现大图 -->
<div v-if="showBigpic" class="showPic" v-loading="canvasloading">
<div <div
v-if="showBigpic" class="picboxI"
class="showPic" @mousewheel.prevent="rollImg"
@click="closePic" :style="{ transform: 'scale(' + zoomD + ')' }"
v-loading="canvasloading" @mousedown="move"
> >
<div class="picboxI"> <img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" />
<img @load="imgOnload" class="maskPic" :src="bigPhotoPic" /> <canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas2"></canvas>
</div> </div>
<div class="viewClose"> <div class="viewClose">
<i @click="closePic" class="el-icon-close"></i> <i @click="closePic" class="el-icon-close"></i>
@ -379,6 +383,8 @@ export default {
alarmLoading: false, alarmLoading: false,
canvasloading: false, canvasloading: false,
tableShow: true, //表格展示 tableShow: true, //表格展示
zoomD: 1,
canvansdata: "",
}; };
}, },
mounted() { mounted() {
@ -386,6 +392,10 @@ export default {
// new Date(new Date().toLocaleDateString()).getTime(), // new Date(new Date().toLocaleDateString()).getTime(),
// new Date().getTime(), // new Date().getTime(),
// ]); // ]);
// $("#elementToZoomOn").smartZoom({
// maxScale: 2,
// });
this.$set( this.$set(
this.formdata, this.formdata,
"starttime", "starttime",
@ -396,8 +406,69 @@ export default {
this.getTableList(); this.getTableList();
}, },
methods: { methods: {
//移动demo
move(e) {
console.log(e);
e.preventDefault();
// 获取元素
var personBox = document.querySelector(".picboxI");
var img = document.querySelector(".img");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
personBox.addEventListener("mousemove", move);
function move(e) {
personBox.style.left = e.pageX - x + "px";
personBox.style.top = e.pageY - y + "px";
}
// 添加鼠标抬起事件，鼠标抬起，将事件移除
img.addEventListener("mouseup", function () {
personBox.removeEventListener("mousemove", move);
});
// 鼠标离开父级元素，把事件移除
personBox.addEventListener("mouseout", function () {
personBox.removeEventListener("mousemove", move);
});
},
// 缩放图片
rollImg(e) {
let direction = e.deltaY > 0 ? "down" : "up";
if (direction === "up") {
// 滑轮向上滚动
this.large();
} else {
// 滑轮向下滚动
this.Small();
}
},
//大
large() {
this.$nextTick(() => {
if (this.zoomD < 6) {
this.zoomD += 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
this.drawline2(this.canvansdata);
});
},
// 小
Small() {
this.$nextTick(() => {
if (this.zoomD > 0.3) {
this.zoomD -= 0.1;
}
document.querySelector(
".picboxI"
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
this.drawline2(this.canvansdata);
});
},
handleBigPicbox(val) { handleBigPicbox(val) {
this.canvasloading = true; this.canvasloading = true;
this.canvansdata = val;
if (val.path !== "" && this.tableData.length !== 0) { if (val.path !== "" && this.tableData.length !== 0) {
console.log(val); console.log(val);
this.bigPhotoPic = val.path; this.bigPhotoPic = val.path;
@ -409,6 +480,7 @@ export default {
}, },
closePic() { closePic() {
this.showBigpic = false; this.showBigpic = false;
this.zoomD = 1;
}, },
//获取电压信息 //获取电压信息
getSearchdy() { getSearchdy() {
@ -495,11 +567,13 @@ export default {
//点击分页 //点击分页
handleCurrentChange(val) { handleCurrentChange(val) {
this.page = val; this.page = val;
this.tableData = [];
this.getTableList(); this.getTableList();
}, },
//每页条数 //每页条数
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.tableData = [];
this.getTableList(); this.getTableList();
}, },
//绘制告警区域 //绘制告警区域
@ -527,15 +601,15 @@ export default {
// this.ctx.strokeStyle = "red"; //线的颜色 // this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形 this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(data.x, data.y, data.width, data.height); //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
this.ctx.font = "24px normal"; this.ctx.font = "16px normal";
this.ctx.fillStyle = "#ff0000"; this.ctx.fillStyle = "#ff0000";
console.log(top, left, width, height); console.log(top, left, width, height);
console.log(this.canvas.width, this.canvas.height); console.log(this.canvas.width, this.canvas.height);
//距离上面有空间 //距离上面有空间
if (left > 32) { if (left > 32) {
this.ctx.fillText(this.textInfo, top, left - 14); this.ctx.fillText(this.textInfo, top, left - 4);
} else if (this.canvas.height - left + height > 32) { } else if (this.canvas.height - left + height > 32) {
this.ctx.fillText(this.textInfo, top, height - 14); this.ctx.fillText(this.textInfo, top, height - 4);
} }
this.ctx.closePath(); this.ctx.closePath();
@ -543,11 +617,12 @@ export default {
}, },
//绘制告警区域 //绘制告警区域
drawline2(data) { drawline2(data) {
this.canvas = this.$refs.myCanvas2; this.canvas = this.$refs.myCanvasbig;
this.imgpic = this.$refs.picJpg; this.imgpic = this.$refs.picJpg;
this.textInfo = data.enname; this.textInfo = data.enname;
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小 this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小 this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
console.log(this.canvas.width, this.canvas.height);
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.ctx.beginPath(); this.ctx.beginPath();
//设置线条颜色，必须放在绘制之前 //设置线条颜色，必须放在绘制之前
@ -567,9 +642,15 @@ export default {
// this.ctx.strokeStyle = "red"; //线的颜色 // this.ctx.strokeStyle = "red"; //线的颜色
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形 this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
//this.ctx.strokeRect(data.x, data.y, data.width, data.height); //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
this.ctx.font = "24px normal"; this.ctx.font = "16px normal";
this.ctx.fillStyle = "#ff0000"; this.ctx.fillStyle = "#ff0000";
this.ctx.fillText(this.textInfo, top, left + 24); //this.ctx.fillText(this.textInfo, top, left + 24);
//距离上面有空间
if (left > 32) {
this.ctx.fillText(this.textInfo, top, left - 4);
} else if (this.canvas.height - left + height > 32) {
this.ctx.fillText(this.textInfo, top, height - 4);
}
this.ctx.closePath(); this.ctx.closePath();
this.ctx.stroke(); this.ctx.stroke();
}, },
@ -676,6 +757,18 @@ export default {
this.selectRow = val; this.selectRow = val;
this.handleHistory(); this.handleHistory();
}, },
handlePicAlarm(val) {
console.log(val);
this.canvasloading = true;
if (val.path !== "" && this.tableData.length !== 0) {
console.log(val);
this.bigPhotoPic = val.path;
this.showBigpic = true;
// this.$nextTick(() => {
// this.drawline2(val);
// });
}
},
dateFormat(row, column) { dateFormat(row, column) {
var date = row[column.property]; var date = row[column.property];
if (date == undefined) { if (date == undefined) {
@ -710,8 +803,8 @@ export default {
cursor: pointer; cursor: pointer;
.picboxI { .picboxI {
position: relative; position: relative;
max-width: 1366px; width: 1366px;
max-height: 768px; height: 768px;
margin: auto; margin: auto;
animation-name: scaleDraw; animation-name: scaleDraw;
/*关键帧名称*/ /*关键帧名称*/
@ -720,11 +813,15 @@ export default {
animation-iteration-count: 1; animation-iteration-count: 1;
/*动画播放的次数*/ /*动画播放的次数*/
animation-duration: 0.65s; animation-duration: 0.65s;
display: flex;
align-items: center;
justify-content: center;
img { img {
max-width: 1366px; max-width: 1366px;
max-height: 768px; max-height: 768px;
margin: auto; margin: auto;
position: absolute;
cursor: grab;
} }
.myCanvas { .myCanvas {
position: absolute; position: absolute;
@ -890,7 +987,7 @@ export default {
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
height: fit-content; height: fit-content;
height: 320px; height: auto;
.el-card__body { .el-card__body {
padding: 0px; padding: 0px;
} }
@ -924,7 +1021,7 @@ export default {
color: #e49e61; color: #e49e61;
} }
.infoTop { .infoTop {
font-size: 16px; font-size: 14px;
color: #000; color: #000;
font-weight: normal; font-weight: normal;
margin-top: 2px; margin-top: 2px;

1
src/views/components/carouselChart.vue
Unescape Escape View File

@ -594,6 +594,7 @@ export default {
line-height: 60px; line-height: 60px;
width: 40px; width: 40px;
height: 40px; height: 40px;
z-index: 4;
&:hover { &:hover {
color: @color-primary; color: @color-primary;
} }

12
src/views/management/monitoringEquipment/photographicDevice/index.vue
Unescape Escape View File

@ -233,7 +233,7 @@
<el-table-column <el-table-column
fixed="right" fixed="right"
label="操作" label="操作"
width="520" width="540"
v-if="roleUser != 2" v-if="roleUser != 2"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@ -299,15 +299,15 @@
<el-dropdown-item command="close">关闭GPS</el-dropdown-item> <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- <el-button <el-button
type="text" type="text"
class="deleteText" class="deleteText"
@click.native.stop="handleDelete(scope.row)" @click.native.stop="handleDelete(scope.row)"
>删除</el-button >删除</el-button
> --> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="320" v-else> <el-table-column fixed="right" label="操作" width="340" v-else>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@click.native.stop="handleRevisePhoto(scope.row)" @click.native.stop="handleRevisePhoto(scope.row)"
@ -343,12 +343,12 @@
<el-dropdown-item command="close">关闭GPS</el-dropdown-item> <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- <el-button <el-button
type="text" type="text"
class="deleteText" class="deleteText"
@click.native.stop="handleDelete(scope.row)" @click.native.stop="handleDelete(scope.row)"
>删除</el-button >删除</el-button
> --> >
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

16
src/views/management/userEquipment/lineInformation/index.vue
Unescape Escape View File

@ -26,6 +26,14 @@
scope.row.bsManufacturer scope.row.bsManufacturer
}}</template> }}</template>
</el-table-column> </el-table-column>
<el-table-column
prop="dyLevelname"
label="电压等级名称"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<!-- <el-table-column <!-- <el-table-column
prop="id" prop="id"
label="线路编号" label="线路编号"
@ -41,14 +49,6 @@
> >
</el-table-column> </el-table-column>
<el-table-column
prop="dyLevelname"
label="电压等级名称"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200"> <el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button

3
src/views/realTimeSearch/index.vue
Unescape Escape View File

@ -99,7 +99,7 @@
</el-form> </el-form>
</div> </div>
<div class="pictureBox" v-loading="loading"> <div class="pictureBox" v-loading="loading">
<div v-if="picList.length !== 0"> <div v-if="picList.length !== 0" style="width: 100%">
<el-card <el-card
class="box-card imgList" class="box-card imgList"
v-for="(item, index) in picList" v-for="(item, index) in picList"
@ -339,6 +339,7 @@ export default {
//点击分页 //点击分页
handleCurrentChange(val) { handleCurrentChange(val) {
this.page = val; this.page = val;
this.picList = [];
this.getPicData(); this.getPicData();
}, },
//每页条数 //每页条数

224
src/views/videoMonitor/videoHistory.vue
Unescape Escape View File

@ -1,31 +1,45 @@
<template> <template>
<div style="padding: 20px"> <div class="echartsPage">
<el-card <div class="echart-top">
><el-tabs type="border-card" v-model="tabName" @tab-click="handleClick" <el-card class="box-card">
><el-tab-pane label="用户管理" name="用户管理"
><div class="echart-top">
<div id="echart1" style="width: 100%; height: 100%"></div> <div id="echart1" style="width: 100%; height: 100%"></div>
<div id="echart2" style="width: 100%; height: 100%"></div></div></el-tab-pane </el-card>
><el-tab-pane label="配置管理" name="配置管理" <el-card class="box-card">
><div class="echart-top"> <div id="echart2" style="width: 100%; height: 100%"></div>
</el-card>
</div>
<div class="echart-top">
<el-card class="box-card">
<div id="echart3" style="width: 100%; height: 100%"></div> <div id="echart3" style="width: 100%; height: 100%"></div>
<div id="echart4" style="width: 100%; height: 100%"></div></div></el-tab-pane></el-tabs </el-card>
></el-card> <el-card class="box-card">
<div id="echart4" style="width: 100%; height: 100%"></div>
</el-card>
</div>
<!-- <el-card>
<el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
><el-tab-pane label="用户管理" name="用户管理"></el-tab-pane
><el-tab-pane label="配置管理" name="配置管理"></el-tab-pane></el-tabs
></el-card> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: '', name: "",
data() { data() {
return { tabName: '配置管理', myChart1: '', myChart2: '', myChart3: '', myChart4: '' }; return {
tabName: "配置管理",
myChart1: "",
myChart2: "",
myChart3: "",
myChart4: "",
};
}, },
mounted() { mounted() {
this.init(); this.init();
}, },
watch: { watch: {
'$store.state.collapse'(val) { "$store.state.collapse"(val) {
console.log(val); console.log(val);
setTimeout(() => { setTimeout(() => {
//echarts得重绘方法 //echarts得重绘方法
@ -34,7 +48,7 @@ export default {
this.myChart3.resize(); this.myChart3.resize();
this.myChart4.resize(); this.myChart4.resize();
}, 300); }, 300);
} },
}, },
methods: { methods: {
init() { init() {
@ -44,8 +58,8 @@ export default {
this.getEchart4(); this.getEchart4();
}, },
handleClick(value) { handleClick(value) {
console.log('value', value); console.log("value", value);
if (value.name === '用户管理') { if (value.name === "用户管理") {
this.getEchart1(); this.getEchart1();
this.getEchart2(); this.getEchart2();
} else { } else {
@ -54,115 +68,173 @@ export default {
}, },
getEchart1() { getEchart1() {
this.$nextTick(() => { this.$nextTick(() => {
this.$echarts.init(document.getElementById('echart1')).dispose(); this.$echarts.init(document.getElementById("echart1")).dispose();
this.myChart1 = this.$echarts.init(document.getElementById('echart1')); this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
let option = { let option = {
legend: { top: 'bottom' }, title: {
text: "装置数量统计",
},
legend: { top: "bottom" },
toolbox: { toolbox: {
show: true, show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}, },
series: [ series: [
{ {
name: '面积模式', name: "面积模式",
type: 'pie', type: "pie",
radius: [50, 250], radius: [50, 120],
center: ['50%', '50%'], center: ["50%", "50%"],
roseType: 'area', roseType: "area",
itemStyle: { borderRadius: 8 }, itemStyle: { borderRadius: 8 },
data: [ data: [
{ value: 40, name: 'rose 1' }, { value: 40, name: "rose 1" },
{ value: 38, name: 'rose 2' }, { value: 38, name: "rose 2" },
{ value: 32, name: 'rose 3' }, { value: 32, name: "rose 3" },
{ value: 30, name: 'rose 4' }, { value: 30, name: "rose 4" },
{ value: 28, name: 'rose 5' }, { value: 28, name: "rose 5" },
{ value: 26, name: 'rose 6' }, { value: 26, name: "rose 6" },
{ value: 22, name: 'rose 7' }, { value: 22, name: "rose 7" },
{ value: 18, name: 'rose 8' } { value: 18, name: "rose 8" },
] ],
} },
] ],
}; };
this.myChart1.setOption(option); this.myChart1.setOption(option);
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.myChart1.resize(); this.myChart1.resize();
}); });
}); });
}, },
getEchart2() { getEchart2() {
this.$nextTick(() => { this.$nextTick(() => {
this.$echarts.init(document.getElementById('echart2')).dispose(); this.$echarts.init(document.getElementById("echart2")).dispose();
this.myChart2 = this.$echarts.init(document.getElementById('echart2')); this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
let option = { let option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, title: {
yAxis: { type: 'value' }, text: "隐患分类统计",
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: { type: "value" },
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130], data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar', type: "bar",
showBackground: true, showBackground: true,
backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
} },
] ],
}; };
this.myChart2.setOption(option); this.myChart2.setOption(option);
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.myChart2.resize(); this.myChart2.resize();
}); });
}); });
}, },
getEchart3() { getEchart3() {
this.$nextTick(() => { this.$nextTick(() => {
this.$echarts.init(document.getElementById('echart3')).dispose(); this.$echarts.init(document.getElementById("echart3")).dispose();
this.myChart3 = this.$echarts.init(document.getElementById('echart3')); this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
let option = { let option = {
xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, title: {
yAxis: { type: 'value' }, text: "装置信息统计",
series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} }] },
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: { type: "value" },
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
areaStyle: {},
},
],
}; };
this.myChart3.setOption(option); this.myChart3.setOption(option);
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.myChart3.resize(); this.myChart3.resize();
}); });
}); });
}, },
getEchart4() { getEchart4() {
this.$nextTick(() => { this.$nextTick(() => {
this.$echarts.init(document.getElementById('echart4')).dispose(); this.$echarts.init(document.getElementById("echart4")).dispose();
this.myChart4 = this.$echarts.init(document.getElementById('echart4')); this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
let option = { let option = {
xAxis: {}, title: {
yAxis: {}, text: "装置在线统计",
},
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [ series: [
{ {
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [ data: [
[10, 40], { value: 1048, name: "在线" },
[50, 100], { value: 735, name: "离线" },
[40, 20] ],
},
], ],
type: 'line'
}
]
}; };
this.myChart4.setOption(option); this.myChart4.setOption(option);
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.myChart4.resize(); this.myChart4.resize();
}); });
}); });
} },
} },
}; };
</script> </script>
<style scoped> <style lang="less">
.echart-top { .echartsPage {
height: calc(100% - 32px);
padding: 16px;
display: flex; display: flex;
flex-direction: column;
justify-content: space-around;
.echart-top {
display: flex;
height: 48%;
justify-content: space-between; justify-content: space-between;
width: 100%;
height: 500px; .el-card {
width: 48%;
height: 100%;
.el-card__body {
height: calc(100% - 40px);
}
}
}
} }
</style> </style>

11
vue.config.js
Unescape Escape View File

@ -1,5 +1,6 @@
const { defineConfig } = require("@vue/cli-service"); const { defineConfig } = require("@vue/cli-service");
const path = require("path"); const path = require("path");
const webpack = require("webpack");
module.exports = defineConfig({ module.exports = defineConfig({
//打包清除console //打包清除console
chainWebpack(config) { chainWebpack(config) {
@ -37,4 +38,14 @@ module.exports = defineConfig({
}, },
}, },
}, },
chainWebpack: (config) => {
config.plugin("provide").use(webpack.ProvidePlugin, [
{
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
},
]);
},
}); });

Write Preview
Loading…
Cancel
Save