|
@@ -0,0 +1,180 @@
|
|
|
+<template>
|
|
|
+ <div id="module-foldline">
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'font-weight:' +
|
|
|
+ fontweight +
|
|
|
+ ';font-family:' +
|
|
|
+ fontfamily +
|
|
|
+ ';font-size: ' +
|
|
|
+ fontsize +
|
|
|
+ 'px;color: ' +
|
|
|
+ color +
|
|
|
+ ';letter-spacing:' +
|
|
|
+ letterspacing +
|
|
|
+ 'px;height: ' +
|
|
|
+ titleHeight +
|
|
|
+ 'px;line-height: ' +
|
|
|
+ titleHeight +
|
|
|
+ 'px;text-align: ' +
|
|
|
+ textposition +
|
|
|
+ ';' +
|
|
|
+ padding
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ this.list.bt }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'margin-top: ' +
|
|
|
+ margintop +
|
|
|
+ 'px;width:100%;height:' +
|
|
|
+ (this.height - titleHeight - margintop) +
|
|
|
+ 'px;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div :id="this.list.bt" style="width: 100%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { Interface } from "@/api/index";
|
|
|
+import { Message } from "element-ui";
|
|
|
+export default {
|
|
|
+ props: ["height", "list"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fontweight: "",
|
|
|
+ fontsize: "",
|
|
|
+ fontfamily: "",
|
|
|
+ color: "",
|
|
|
+ letterspacing: "",
|
|
|
+ titleHeight: "",
|
|
|
+ textposition: "",
|
|
|
+ padding: "",
|
|
|
+ margintop: "",
|
|
|
+ xAxisunit: "",
|
|
|
+ option: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getCss();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCss() {
|
|
|
+ const part = JSON.parse(this.list.config);
|
|
|
+ this.fontweight = part.fontweight;
|
|
|
+ this.fontsize = part.fontsize;
|
|
|
+ this.fontfamily = part.fontfamily;
|
|
|
+ this.color = part.color;
|
|
|
+ this.letterspacing = part.letterspacing;
|
|
|
+ this.titleHeight = Number(part.titleHeight);
|
|
|
+ this.textposition = part.textposition;
|
|
|
+ this.padding =
|
|
|
+ part.textposition == "left"
|
|
|
+ ? "padding:0 0 0 " + part.padding + "px;"
|
|
|
+ : part.textposition == "right"
|
|
|
+ ? "padding:0 " + part.padding + "px 0 0 ;"
|
|
|
+ : "";
|
|
|
+ this.margintop = Number(part.margintop);
|
|
|
+ this.xAxisunit = part.xAxisunit;
|
|
|
+ this.getInfo();
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ const form = {
|
|
|
+ qqfs: this.list.qqfs,
|
|
|
+ jkUrl: this.list.jkUrl,
|
|
|
+ data: {
|
|
|
+ swjgdm: this.$route.query.swjgdm,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ Interface(form).then((res) => {
|
|
|
+ if (res.code !== 200) {
|
|
|
+ Message.error(this.list.bt + res.msg);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getInfo();
|
|
|
+ }, 10 * 1000);
|
|
|
+ } else {
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontFamily: "苹方简M",
|
|
|
+ fontSize: "10px",
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ show: false,
|
|
|
+ top: "20%",
|
|
|
+ left: "2%",
|
|
|
+ bottom: "15%",
|
|
|
+ right: "2%",
|
|
|
+ },
|
|
|
+ xAxis: [],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisTick: { show: false },
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLabel: { show: false },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [],
|
|
|
+ };
|
|
|
+ if (res.yData && res.xData) {
|
|
|
+ let series = [];
|
|
|
+ let names = ["当前在厅人数","总进厅人数","设备(窗口)数量"]
|
|
|
+ for (let i = 0; i < res.yData.length; i++) {
|
|
|
+ series.push({
|
|
|
+ name: names[i],
|
|
|
+ type: "bar",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontFamily: "苹方简M",
|
|
|
+ fontSize: "10px",
|
|
|
+ color: "#ffffff",
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ data: res.yData[i],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let xAxis = [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: {
|
|
|
+ fontFamily: "苹方简M",
|
|
|
+ fontSize: "10px",
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ data: res.xData,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ option.xAxis = xAxis;
|
|
|
+ option.series = series;
|
|
|
+ this.option = { ...option };
|
|
|
+ this.initEcharts();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initEcharts() {
|
|
|
+ const myChart = echarts.init(document.getElementById(this.list.bt));
|
|
|
+ myChart.setOption(this.option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#module-foldline {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|