|
|
@@ -9,12 +9,132 @@
|
|
|
<div class="echarts1">
|
|
|
<div class="title">用户类别占比</div>
|
|
|
<div id="annulus"></div>
|
|
|
+ <div class="quantity_title">
|
|
|
+ <div class="quantity">
|
|
|
+ <div class="dosage">用电量</div>
|
|
|
+ <span class="num">7,865</span><span>kw/h</span>
|
|
|
+ </div>
|
|
|
+ <div class="quantity">
|
|
|
+ <div class="dosage">用水量</div>
|
|
|
+ <span class="num">7,865</span><span>L</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="echarts1 echarts2">
|
|
|
+ <div class="title">区域统计</div>
|
|
|
+ <div id="areaTJ"></div>
|
|
|
+ <div class="quantity_title">
|
|
|
+ <div class="btn">
|
|
|
+ <div
|
|
|
+ class="btn_li"
|
|
|
+ :class="areaInd == 1 ? 'btn_active' : ''"
|
|
|
+ @click="areaStatistics(1)"
|
|
|
+ >
|
|
|
+ 水
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn_li"
|
|
|
+ :class="areaInd == 2 ? 'btn_active' : ''"
|
|
|
+ @click="areaStatistics(2)"
|
|
|
+ >
|
|
|
+ 电
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="echarts2"></div>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <div class="table1"></div>
|
|
|
- <div class="table2"></div>
|
|
|
+ <div class="table1">
|
|
|
+ <div class="title">区域能耗统计</div>
|
|
|
+ <div class="table1Data">
|
|
|
+ <div class="selInput">
|
|
|
+ <span>月份 : </span
|
|
|
+ ><el-select
|
|
|
+ v-model="tableSearch1"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ >
|
|
|
+ <!-- size="small" -->
|
|
|
+ <el-option label="1月" value="1" />
|
|
|
+ <el-option label="2月" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :data="table1Data.list"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(240, 243, 247, 1)',
|
|
|
+ height: '40px',
|
|
|
+ border: 0,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column align="center " type="index" label="序号" />
|
|
|
+ <el-table-column align="center" prop="dian" label="电（kw/h）" />
|
|
|
+ <el-table-column align="center" prop="shui" label="水（L）" />
|
|
|
+ <el-table-column align="center" prop="build" label="楼栋" />
|
|
|
+ <el-table-column align="center" prop="month" label="月份" />
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <div class="pageSize">
|
|
|
+ <span></span>
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ background
|
|
|
+ :current-page="currentPage1"
|
|
|
+ :page-size="pageSize1"
|
|
|
+ layout="total, prev, pager, next, jumper, slot"
|
|
|
+ :total="total1"
|
|
|
+ @update:current-page="handleCurrentChange1"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table1 table2">
|
|
|
+ <div class="title">实时抄表</div>
|
|
|
+ <div class="table1Data">
|
|
|
+ <div class="selInput">
|
|
|
+ <span>通讯时间 : </span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="tableSearch2"
|
|
|
+ type="date"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :prefix-icon="Calendar"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :data="table2Data.list"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(240, 243, 247, 1)',
|
|
|
+ height: '40px',
|
|
|
+ border: 0,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column align="center " type="index" label="序号" />
|
|
|
+ <el-table-column align="center" prop="dian" label="电（kw/h）" />
|
|
|
+ <el-table-column align="center" prop="shui" label="水（L）" />
|
|
|
+ <el-table-column align="center" prop="build" label="楼栋" />
|
|
|
+ <el-table-column align="center" prop="month" label="通讯时间" />
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <div class="pageSize">
|
|
|
+ <span></span>
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ background
|
|
|
+ :current-page="currentPage2"
|
|
|
+ :page-size="pageSize2"
|
|
|
+ layout="total, prev, pager, next, jumper, slot"
|
|
|
+ :total="total2"
|
|
|
+ @update:current-page="handleCurrentChange1"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -113,7 +233,15 @@
|
|
|
|
|
|
<script setup>
|
|
|
import * as echarts from "echarts";
|
|
|
-import { ref, reactive, watch, nextTick, onMounted, onUnmounted } from "vue";
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ shallowRef,
|
|
|
+ reactive,
|
|
|
+ watch,
|
|
|
+ nextTick,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
+} from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
import { Calendar } from "@element-plus/icons-vue";
|
|
|
@@ -126,270 +254,352 @@ const api = ref("");
|
|
|
const router = useRouter();
|
|
|
|
|
|
// 用户类别占比
|
|
|
-const category = ref();
|
|
|
+const category = shallowRef();
|
|
|
+// 区域统计
|
|
|
+const areaTJEcharts = shallowRef();
|
|
|
+const areaInd = ref(1);
|
|
|
|
|
|
-// 表格数据
|
|
|
-const loading = ref(false);
|
|
|
-const tableData = reactive({
|
|
|
+// 区域能耗统计
|
|
|
+const tableSearch1 = ref(); // 月份搜索
|
|
|
+const table1Data = reactive({
|
|
|
list: [
|
|
|
- // {
|
|
|
- // userName: "双人房",
|
|
|
- // userPhone: 150,
|
|
|
- // teamName: 12,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // userName: "双人房",
|
|
|
- // userPhone: 150,
|
|
|
- // teamName: 12,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // userName: "双人房",
|
|
|
- // userPhone: 150,
|
|
|
- // teamName: 12,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // userName: "双人房",
|
|
|
- // userPhone: 150,
|
|
|
- // teamName: 12,
|
|
|
- // },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "6栋",
|
|
|
+ month: 6,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "7栋",
|
|
|
+ month: 7,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "8栋",
|
|
|
+ month: 8,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ month: 9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ month: 9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ month: 9,
|
|
|
+ },
|
|
|
],
|
|
|
});
|
|
|
-const currentPage = ref(1); // 当前页
|
|
|
-const pageSize = ref(10);
|
|
|
-const total = ref(); // 当前总数
|
|
|
-
|
|
|
-// 编辑功能
|
|
|
-const titleDialog = ref("");
|
|
|
-const editVisible = ref(false);
|
|
|
-const editRef = ref();
|
|
|
-const editRuleForm = reactive({
|
|
|
- userDepartment: "", // 用户部门
|
|
|
- userName: "", // 用户名
|
|
|
- userRoles: "", // 用户角色
|
|
|
- schoolCard: "", // 微校卡号
|
|
|
- idNumber: "", // 身份证号
|
|
|
- fingerprint: "", // 指纹
|
|
|
- id: "",
|
|
|
-});
|
|
|
+const currentPage1 = ref(1); // 当前页
|
|
|
+const pageSize1 = ref(5);
|
|
|
+const total1 = ref(5); // 当前总数
|
|
|
|
|
|
-// 表单验证
|
|
|
-const editRules = reactive({
|
|
|
- userDepartment: [
|
|
|
- { required: true, message: "用户部门不能为空", trigger: "blur" },
|
|
|
- ],
|
|
|
- userName: [
|
|
|
+// 区域能耗统计
|
|
|
+const tableSearch2 = ref(); // 月份搜索
|
|
|
+const table2Data = reactive({
|
|
|
+ list: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: "用户名不能为空",
|
|
|
- trigger: "blur",
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "6栋",
|
|
|
+ time: "2023-12-08",
|
|
|
},
|
|
|
- ],
|
|
|
- userRoles: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: "用户角色不能为空",
|
|
|
- trigger: "blur",
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "7栋",
|
|
|
+ time: "2023-12-08",
|
|
|
},
|
|
|
- ],
|
|
|
- schoolCard: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: "微校卡号不能为空",
|
|
|
- trigger: "blur",
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "8栋",
|
|
|
+ time: "2023-12-08",
|
|
|
},
|
|
|
- ],
|
|
|
- idNumber: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: "身份证号不能为空",
|
|
|
- trigger: "blur",
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ time: "2023-12-08",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ month: "2023-12-08",
|
|
|
},
|
|
|
- ],
|
|
|
- fingerprint: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: "指纹不能为空",
|
|
|
- trigger: "blur",
|
|
|
+ dian: "120",
|
|
|
+ shui: 12,
|
|
|
+ build: "9栋",
|
|
|
+ time: "2023-12-08",
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
+const currentPage2 = ref(1); // 当前页
|
|
|
+const pageSize2 = ref(5);
|
|
|
+const total2 = ref(5); // 当前总数
|
|
|
|
|
|
// 用户类别占比
|
|
|
const echarts1 = async () => {
|
|
|
category.value = echarts.init(document.getElementById("annulus"));
|
|
|
- let value = 20;
|
|
|
category.value.setOption({
|
|
|
- // title: {
|
|
|
- // text: "圆环图的例子",
|
|
|
- // left: "center",
|
|
|
- // top: "center",
|
|
|
- // },
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
},
|
|
|
legend: {
|
|
|
- orient: "vertical",
|
|
|
- right: "6%",
|
|
|
- top: "15%",
|
|
|
+ orient: "horizontal",
|
|
|
+ bottom: "16%",
|
|
|
+ left: "22%",
|
|
|
itemGap: 20,
|
|
|
itemWidth: 15,
|
|
|
itemHeight: 15,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
+ name: "用户类别占比",
|
|
|
type: "pie",
|
|
|
+ radius: ["70%", "90%"],
|
|
|
+ center: ["30%", "60%"],
|
|
|
+ // adjust the start angle
|
|
|
+ startAngle: 180,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(param) {
|
|
|
+ // correct the percentage
|
|
|
+ return param.name + " (" + param.percent * 2 + "%)";
|
|
|
+ },
|
|
|
+ },
|
|
|
data: [
|
|
|
{
|
|
|
- value: 224,
|
|
|
- name: "电子资源库",
|
|
|
+ value: 1048,
|
|
|
+ name: "用电",
|
|
|
itemStyle: {
|
|
|
color: "rgba(67, 181, 244, 1)",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- value: 304,
|
|
|
- name: "课程资源库",
|
|
|
+ value: 580,
|
|
|
+ name: "用水",
|
|
|
itemStyle: {
|
|
|
- color: "rgba(137, 207, 245, 1)",
|
|
|
+ color: "#D4EDFB",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- value: 484,
|
|
|
- name: "教学方案库",
|
|
|
+ // make an record to fill the bottom 50%
|
|
|
+ value: 1048 + 580,
|
|
|
itemStyle: {
|
|
|
- color: "rgba(180, 226, 251, 1)",
|
|
|
+ // stop the chart from rendering this piece
|
|
|
+ color: "none",
|
|
|
+ decal: {
|
|
|
+ symbol: "none",
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- value: 300,
|
|
|
- name: "第三资源库",
|
|
|
- itemStyle: {
|
|
|
- color: "rgba(212, 237, 251, 1)",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
- center: ["40%", "48%"],
|
|
|
- radius: ["48%", "65%"],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- // position: "center",
|
|
|
- formatter: "{b} ({d}%)",
|
|
|
- padding: 1,
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true,
|
|
|
- // length: -1,
|
|
|
- },
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
};
|
|
|
const resizeChart = () => {
|
|
|
category.value.resize();
|
|
|
+ areaTJEcharts.value.resize();
|
|
|
};
|
|
|
+// 区域统计
|
|
|
+const echarts2 = async () => {
|
|
|
+ areaTJEcharts.value = echarts.init(document.getElementById("areaTJ"));
|
|
|
+ areaTJEcharts.value.setOption({
|
|
|
+ legend: {
|
|
|
+ orient: "horizontal",
|
|
|
+ bottom: "5%",
|
|
|
+ left: "22%",
|
|
|
+ itemGap: 20,
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 15,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
-//编辑按钮 （-------------------------------------------）
|
|
|
-const editClick = async () => {
|
|
|
- titleDialog.value = "编辑";
|
|
|
- editVisible.value = true;
|
|
|
- // let data = {
|
|
|
- // linkId: row.id,
|
|
|
- // };
|
|
|
- // let res = await axios({
|
|
|
- // method: "post",
|
|
|
- // url: api.value + "/mhotel/uploadgetByLinkId.action",
|
|
|
- // headers: {},
|
|
|
- // params: data,
|
|
|
- // });
|
|
|
- // console.log(res, "编辑中查找图片");
|
|
|
- // if (res.data.code == 200) {
|
|
|
- // // res.data.data.fileInfoList.forEach((item) => {
|
|
|
- // // item.uid = item.id;
|
|
|
- // // });
|
|
|
- // // fileList.list = res.data.data.fileInfoList;
|
|
|
- // // ruleForm.fileListJson = fileList.list;
|
|
|
- // res.data.data.forEach((item) => {
|
|
|
- // item.uid = item.id;
|
|
|
- // });
|
|
|
- // fileList.list = res.data.data;
|
|
|
- // ruleForm.fileListJson = fileList.list;
|
|
|
- // // ElMessage({
|
|
|
- // // type: "success",
|
|
|
- // // showClose: true,
|
|
|
- // // message: res.data.message,
|
|
|
- // // center: true,
|
|
|
- // // });
|
|
|
- // } else {
|
|
|
- // ElMessage({
|
|
|
- // type: "error",
|
|
|
- // showClose: true,
|
|
|
- // message: res.data.message,
|
|
|
- // center: true,
|
|
|
- // });
|
|
|
- // }
|
|
|
+ grid: {
|
|
|
+ show: false,
|
|
|
+ top: "10%", // 一下数值可为百分比也可为具体像素值
|
|
|
+ right: "8%",
|
|
|
+ bottom: "25%",
|
|
|
+ left: "10%",
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "slider",
|
|
|
+ realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 60, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
|
|
|
+ height: 5, // 组件高度
|
|
|
+ left: 5, // 左边的距离
|
|
|
+ right: 5, // 右边的距离
|
|
|
+ bottom: 2, // 下边的距离
|
|
|
+ show: true, // 是否展示
|
|
|
+ fillerColor: "rgba(180, 226, 251, 1)", // 滚动条颜色
|
|
|
+ borderColor: "rgba(180, 226, 251, 0.12)",
|
|
|
+ handleSize: 0, // 两边手柄尺寸
|
|
|
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|
|
+ zoomLock: true, // 是否只平移不缩放
|
|
|
+ moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
|
|
|
+ zoomOnMouseWheel: true, // 鼠标移动能触发数据窗口缩放
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "inside", // 支持内部鼠标滚动平移
|
|
|
+ start: 0,
|
|
|
+ end: 70,
|
|
|
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|
|
+ moveOnMouseWheel: true, // 开启滚轮平移
|
|
|
+ moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // dataset: {
|
|
|
+ // source: [
|
|
|
+ // ["product", "2015", "2016", "2017"],
|
|
|
+ // ["教学楼", 43.3, 85.8, 93.7],
|
|
|
+ // ["行政楼", 83.1, 73.4, 55.1],
|
|
|
+ // ["食堂", 86.4, 65.2, 82.5],
|
|
|
+ // ["其他", 72.4, 53.9, 39.1],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ //这是x轴文字颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: "##5B5B5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: "吨/度",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#aaa",
|
|
|
+ nameLocation: "start",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //这是x轴文字颜色
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "##5B5B5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //x轴的网格 样式
|
|
|
+ lineStyle: {
|
|
|
+ color: "#F0EEEE",
|
|
|
+ width: 1,
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // Declare several bar series, each will be mapped
|
|
|
+ // to a column of dataset.source by default.
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "教学楼",
|
|
|
+ type: "bar",
|
|
|
+ data: [120, 200, 150, 80, 70, 110, 130, 60],
|
|
|
+ itemStyle: {
|
|
|
+ color: "#43B5F4",
|
|
|
+ },
|
|
|
+ barGap: "0%", // 同一列柱子的间距
|
|
|
+ barWidth: 20, // 柱子的宽度
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ name: "行政楼",
|
|
|
+ data: [52, 20, 15, 68, 97, 11, 93, 6],
|
|
|
+ itemStyle: {
|
|
|
+ color: "#89CFF5",
|
|
|
+ },
|
|
|
+ barWidth: 20, // 柱子的宽度
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ name: "食堂",
|
|
|
+ data: [102, 120, 105, 48, 75, 101, 103, 26],
|
|
|
+ itemStyle: {
|
|
|
+ color: "#B4E2FB",
|
|
|
+ },
|
|
|
+ barWidth: 20, // 柱子的宽度
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ name: "其他",
|
|
|
+ data: [62, 120, 150, 88, 17, 211, 103, 66],
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D4EDFB",
|
|
|
+ },
|
|
|
+ barWidth: 20, // 柱子的宽度
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ // areaTJEcharts.value.setOption({
|
|
|
+ // legend: {},
|
|
|
+ // tooltip: {},
|
|
|
+ // dataset: {
|
|
|
+ // source: [
|
|
|
+ // ["product", "2015", "2016", "2017"],
|
|
|
+ // ["Matcha Latte", 43.3, 85.8, 93.7],
|
|
|
+ // ["Milk Tea", 83.1, 73.4, 55.1],
|
|
|
+ // ["Cheese Cocoa", 86.4, 65.2, 82.5],
|
|
|
+ // ["Walnut Brownie", 72.4, 53.9, 39.1],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // xAxis: { type: "category" },
|
|
|
+ // yAxis: {},
|
|
|
+ // // Declare several bar series, each will be mapped
|
|
|
+ // // to a column of dataset.source by default.
|
|
|
+ // series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
|
|
|
+ // });
|
|
|
};
|
|
|
-
|
|
|
-const cancelEdit = () => {
|
|
|
- editVisible.value = false;
|
|
|
- editRef.value.resetFields();
|
|
|
+const areaStatistics = (ind) => {
|
|
|
+ areaInd.value = ind;
|
|
|
};
|
|
|
|
|
|
-// 多选框功能
|
|
|
-const handleSelectionChange = (val) => {
|
|
|
- console.log(val);
|
|
|
- selectData.list = val;
|
|
|
+// 区域能耗统计
|
|
|
+const handleCurrentChange1 = (value) => {
|
|
|
+ // console.log(value);
|
|
|
+ currentPage.value = value;
|
|
|
};
|
|
|
-//导出功能
|
|
|
-// const importExcel = async () => {
|
|
|
-// if (searchInput.createTime == null) {
|
|
|
-// searchInput.createTime = "";
|
|
|
-// }
|
|
|
-// let data = new FormData();
|
|
|
-// data.set("car_number", searchInput.carnumber);
|
|
|
-// data.set("create_time", searchInput.createTime);
|
|
|
-// let res = await axios({
|
|
|
-// method: "post",
|
|
|
-// url: api.value + "/carBook/cinfotoExcel.action",
|
|
|
-// headers: {
|
|
|
-// token: sessionStorage.getItem("token"),
|
|
|
-// },
|
|
|
-// data: data,
|
|
|
-// });
|
|
|
-// // console.log(res, "导出账号");
|
|
|
-// if (res.data.code == 200) {
|
|
|
-// // const elt = document.createElement("a");
|
|
|
-// // elt.setAttribute(
|
|
|
-// // "href",
|
|
|
-// // "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
|
|
|
-// // );
|
|
|
-// // elt.setAttribute("download", "file.png");
|
|
|
-// // elt.style.display = "none";
|
|
|
-// // document.body.appendChild(elt);
|
|
|
-// // elt.click();
|
|
|
-// var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
|
|
|
-// console.log("获得地址数据:", downloadPath);
|
|
|
-// var downloadLink = document.createElement("a");
|
|
|
-// downloadLink.style.display = "none"; // 使其隐藏
|
|
|
-// downloadLink.href = downloadPath;
|
|
|
-// downloadLink.download = "";
|
|
|
-// downloadLink.click();
|
|
|
-// document.body.appendChild(downloadLink);
|
|
|
-// document.body.removeChild(downloadLink);
|
|
|
-// ElMessage({
|
|
|
-// type: "success",
|
|
|
-// showClose: true,
|
|
|
-// message: res.data.message,
|
|
|
-// center: true,
|
|
|
-// });
|
|
|
-// } else {
|
|
|
-// ElMessage({
|
|
|
-// type: "error",
|
|
|
-// showClose: true,
|
|
|
-// message: res.data.message,
|
|
|
-// center: true,
|
|
|
-// });
|
|
|
-// }
|
|
|
-// };
|
|
|
// 表格斑马纹颜色修改
|
|
|
const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
if (rowIndex % 2 === 0) {
|
|
|
@@ -399,28 +609,27 @@ const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
}
|
|
|
return "";
|
|
|
};
|
|
|
-// 分页
|
|
|
-const handleCurrentChange = (value) => {
|
|
|
- // console.log(value);
|
|
|
- currentPage.value = value;
|
|
|
- getList();
|
|
|
-};
|
|
|
|
|
|
onMounted(() => {
|
|
|
api.value = store.state.user.api;
|
|
|
-
|
|
|
echarts1();
|
|
|
+ echarts2();
|
|
|
window.addEventListener("resize", resizeChart);
|
|
|
});
|
|
|
+onUnmounted(() => {
|
|
|
+ category.value.dispose();
|
|
|
+ areaTJEcharts.value.dispose();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.content-box {
|
|
|
width: 97.5%;
|
|
|
height: 89%;
|
|
|
+
|
|
|
margin: 20px auto;
|
|
|
background-color: #fff;
|
|
|
- color: #fff;
|
|
|
+ // color: #fff;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
@@ -454,46 +663,239 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.echarts {
|
|
|
+ // flex: 1;
|
|
|
+ height: 360px;
|
|
|
width: 100%;
|
|
|
- margin: 20px 0 15px 0;
|
|
|
- flex: 1;
|
|
|
+ margin: 10px 0 15px 0;
|
|
|
display: flex;
|
|
|
+
|
|
|
.echarts1 {
|
|
|
- flex: 1;
|
|
|
+ width: 50%;
|
|
|
+ // min-width: 500px;
|
|
|
+ height: 100%;
|
|
|
+ // height: 500px;
|
|
|
margin-right: 20px;
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
+ position: relative;
|
|
|
.title {
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 700;
|
|
|
margin: 16px 30px;
|
|
|
}
|
|
|
#annulus {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 56px);
|
|
|
- border: 1px solid red;
|
|
|
+ height: 300px;
|
|
|
+ // height: calc(100% - 56px);
|
|
|
+ }
|
|
|
+ .quantity_title {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ top: 87px;
|
|
|
+ right: 47px;
|
|
|
+ color: rgba(91, 91, 91, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ .quantity {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .num {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(42, 42, 42, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.echarts2 {
|
|
|
- flex: 1;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
+ margin-right: 0;
|
|
|
+ #areaTJ {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 56px);
|
|
|
+ // height: 300px;
|
|
|
+ }
|
|
|
+ .quantity_title {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ top: 20px;
|
|
|
+ right: 80px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgba(0, 97, 255, 1);
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ .btn_li {
|
|
|
+ width: 65px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(235, 242, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-right: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .btn_active {
|
|
|
+ background: rgba(0, 97, 255, 1);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.table {
|
|
|
+ // flex: 1;
|
|
|
+ height: 360px;
|
|
|
width: 100%;
|
|
|
- flex: 1;
|
|
|
margin: 0 0 20px 0;
|
|
|
display: flex;
|
|
|
.table1 {
|
|
|
- flex: 1;
|
|
|
+ width: 50%;
|
|
|
+ // min-width: 500px;
|
|
|
+ height: 100%;
|
|
|
+ // height: 500px;
|
|
|
margin-right: 20px;
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 16px 30px 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .table1Data {
|
|
|
+ margin: 0 30px;
|
|
|
+ height: calc(100% - 51px);
|
|
|
+ .selInput {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table--fit {
|
|
|
+ height: 65%;
|
|
|
+
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ background-color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ tr {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__row) {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__row):nth-child(2n) {
|
|
|
+ .el-table-fixed-column--right {
|
|
|
+ background-color: rgba(240, 243, 247, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__row td) {
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__body .even) {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-table__body .odd) {
|
|
|
+ background-color: rgba(240, 243, 247, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.edit) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgba(111, 182, 184, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.look) {
|
|
|
+ padding: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: rgba(30, 125, 251, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {
|
|
|
+ padding: 0 10px;
|
|
|
+ color: rgba(212, 48, 48, 1);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ // :deep(.look):hover {
|
|
|
+ // color: red;
|
|
|
+ // }
|
|
|
+ // :deep(.del):hover {
|
|
|
+ // color: red;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .pageSize {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 18px 0 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ // width: 1600px;
|
|
|
+ :deep(.el-pagination__total) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-pagination__goto) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-pagination__classifier) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-pager li) {
|
|
|
+ margin: 0 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-pager li.is-active) {
|
|
|
+ // background-color: rgba(0, 97, 255, 0.8);
|
|
|
+ border: 1px solid rgba(0, 97, 255, 1);
|
|
|
+ color: rgba(0, 97, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.btn-prev) {
|
|
|
+ margin-right: 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.btn-next) {
|
|
|
+ margin-left: 5px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.table2 {
|
|
|
- flex: 1;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
hzj18279462576@163.com
