|
|
@@ -1,11 +1,566 @@
|
|
|
<template>
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <div class="border-shadow">
|
|
|
+ <query></query>
|
|
|
+ <card :title="'核心指标'">
|
|
|
+ <CoreData :data-list="coreData"></CoreData>
|
|
|
+ </card>
|
|
|
+ </div>
|
|
|
+ <a-row :style="{ marginTop: '15px' }">
|
|
|
+ <a-col :span="18">
|
|
|
+ <div class="left border-shadow">
|
|
|
+ <card :title="'文印管理'">
|
|
|
+ <div
|
|
|
+ class="myChart"
|
|
|
+ ref="myChart1"
|
|
|
+ :style="{ height: '515px' }"
|
|
|
+ ></div>
|
|
|
+ </card>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <div class="right border-shadow">
|
|
|
+ <card :title="'成本趋势'">
|
|
|
+ <div class="cben">
|
|
|
+ <div class="total">成本趋势： <span>增速10%</span></div>
|
|
|
+ <div
|
|
|
+ class="myChart"
|
|
|
+ ref="myChart2"
|
|
|
+ :style="{ height: '484px' }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </card>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+ <script>
|
|
|
+import query from "@/components/common/query.vue";
|
|
|
+import card from "@/components/common/card.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ query,
|
|
|
+ card,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const listData = [];
|
|
|
+ for (let i = 0; i < 100; i++) {
|
|
|
+ listData.push({
|
|
|
+ index: i + 1,
|
|
|
+ name: "物理饭",
|
|
|
+ department: "技术开发部门",
|
|
|
+ time: "2023.02.03 00:00:00",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: "中讯1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "中讯2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ floors: [
|
|
|
+ {
|
|
|
+ value: 7,
|
|
|
+ name: "7层",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 8,
|
|
|
+ name: "8层",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ { title: "序号", dataIndex: "index", key: "1", width: 48 },
|
|
|
+ { title: "姓名", dataIndex: "name", key: "2", width: 60 },
|
|
|
+ { title: "部门", dataIndex: "department", key: "3", width: 80 },
|
|
|
+ { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
|
|
|
+ ],
|
|
|
+ listData: listData,
|
|
|
+ coreData: [
|
|
|
+ {
|
|
|
+ title: "人均消耗成本",
|
|
|
+ num: "10",
|
|
|
+ unit: "元/天",
|
|
|
+ historyDesc: "同比",
|
|
|
+ historyNum: 0.4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "人均打印纸张",
|
|
|
+ num: "80",
|
|
|
+ unit: "张/天",
|
|
|
+ historyDesc: "同比",
|
|
|
+ historyNum: 0.4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "人均打印碳排放",
|
|
|
+ num: "80",
|
|
|
+ unit: "tco2e",
|
|
|
+ historyDesc: "同比",
|
|
|
+ historyNum: 0.4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "打印人次",
|
|
|
+ num: 80,
|
|
|
+ unit: "人/月",
|
|
|
+ historyDesc: "同比",
|
|
|
+ historyNum: 0.4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ isHighLight: false,
|
|
|
+ title: "值得关注",
|
|
|
+ content: "增加三台打印机",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.setEchart1();
|
|
|
+ this.setEchart2();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(value) {
|
|
|
+ console.log(`selected ${value}`);
|
|
|
+ },
|
|
|
+ getTimeRange() {
|
|
|
+ this.$refs.timeRange.getTimeRange(); // 获取时间段
|
|
|
+ },
|
|
|
|
|
|
-<script>
|
|
|
-export default {}
|
|
|
-</script>
|
|
|
+ setEchart1() {
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart1);
|
|
|
+ let options = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ // axisPointer: {
|
|
|
+ // type: "shadow",
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: "5%",
|
|
|
+ textStyle: {
|
|
|
+ color: "#000", // 文字的颜色。
|
|
|
+ fontSize: 18,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "1%",
|
|
|
+ right: "5%",
|
|
|
+ top: "15%",
|
|
|
+ bottom: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ backgroundColor: "transparent",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ xtype: "value",
|
|
|
+ name: "纸张数量",
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "#000",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ebfda",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#000",
|
|
|
+ fontSize: 18,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ position: "right",
|
|
|
+ name: "墨盒数量",
|
|
|
+ min: 0,
|
|
|
+ max: 2000,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "#000",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ebfda",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#000",
|
|
|
+ fontSize: 18,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "00:00",
|
|
|
+ "01:00",
|
|
|
+ "02:00",
|
|
|
+ "03:00",
|
|
|
+ "04:00",
|
|
|
+ "05:00",
|
|
|
+ "06:00",
|
|
|
+ "07:00",
|
|
|
+ "08:00",
|
|
|
+ "09:00",
|
|
|
+ "10:00",
|
|
|
+ "11:00",
|
|
|
+ "12:00",
|
|
|
+ "13:00",
|
|
|
+ "14:00",
|
|
|
+ "15:00",
|
|
|
+ "16:00",
|
|
|
+ "17:00",
|
|
|
+ "18:00",
|
|
|
+ "19:00",
|
|
|
+ "20:00",
|
|
|
+ "21:00",
|
|
|
+ "22:00",
|
|
|
+ "23:00",
|
|
|
+ ],
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#1ebfda",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ebfda", //刻度线的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#000",
|
|
|
+ fontSize: 18,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "打印纸张",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 20,
|
|
|
+ barGap: "40%",
|
|
|
+ data: [
|
|
|
+ 430, 300, 320, 480, 410, 520, 570, 610, 610, 440, 630, 630, 300,
|
|
|
+ 320, 480, 410, 610, 440, 630, 320, 480, 440, 630, 200,
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [4, 24, 0, 0],
|
|
|
+ },
|
|
|
+ color: "#5087ec",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "墨盒消耗",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 20,
|
|
|
+ barGap: "40%",
|
|
|
+ data: [
|
|
|
+ 810, 580, 700, 860, 810, 1010, 1080, 1100, 1220, 1220, 1000, 1300,
|
|
|
+ 1080, 1300, 810, 580, 700, 860, 810, 1010, 1080, 1000, 1300, 1080,
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [4, 24, 0, 0],
|
|
|
+ },
|
|
|
+ color: "#68bbc4",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ chart.setOption(options);
|
|
|
+ },
|
|
|
+ setEchart2() {
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart2);
|
|
|
+ let color = ["#2eb4ff", "#9b9aea", "#f4e23e"];
|
|
|
+ let echartData = [
|
|
|
+ {
|
|
|
+ name: "1月",
|
|
|
+ value1: 1366,
|
|
|
+ value2: 0,
|
|
|
+ value3: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2月",
|
|
|
+ value1: 3694,
|
|
|
+ value2: 0,
|
|
|
+ value3: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "3月",
|
|
|
+ value1: 19727,
|
|
|
+ value2: 1000,
|
|
|
+ value3: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "4月",
|
|
|
+ value1: 17046,
|
|
|
+ value2: 1000,
|
|
|
+ value3: 500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "5月",
|
|
|
+ value1: 14780,
|
|
|
+ value2: 13396,
|
|
|
+ value3: 6365,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "6月",
|
|
|
+ value1: 19359,
|
|
|
+ value2: 13220,
|
|
|
+ value3: 5940,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "7月",
|
|
|
+ value1: 14229,
|
|
|
+ value2: 10836,
|
|
|
+ value3: 8234,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "8月",
|
|
|
+ value1: 13176,
|
|
|
+ value2: 12478,
|
|
|
+ value3: 10755,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月",
|
|
|
+ value1: 16515,
|
|
|
+ value2: 12911,
|
|
|
+ value3: 10806,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "10月",
|
|
|
+ value1: 13658,
|
|
|
+ value2: 9479,
|
|
|
+ value3: 8613,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "11月",
|
|
|
+ value1: 16364,
|
|
|
+ value2: 10839,
|
|
|
+ value3: 8826,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "12月",
|
|
|
+ value1: 19973,
|
|
|
+ value2: 10016,
|
|
|
+ value3: 9291,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ let legendItem = ["成本"];
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+ let xAxisData = echartData.map((v) => v.name);
|
|
|
+ // ["1", "2", "3", "4", "5", "6", "7", "8"]
|
|
|
+ let yAxisData1 = echartData.map((v) => v.value1);
|
|
|
+ // [100, 138, 350, 173, 180, 150, 180, 230]
|
|
|
+ const hexToRgba = (hex, opacity) => {
|
|
|
+ let rgbaColor = "";
|
|
|
+ let reg = /^#[\da-f]{6}$/i;
|
|
|
+ if (reg.test(hex)) {
|
|
|
+ rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|
|
+ "0x" + hex.slice(3, 5)
|
|
|
+ )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|
|
+ }
|
|
|
+ return rgbaColor;
|
|
|
+ };
|
|
|
|
|
|
+ let options = {
|
|
|
+ // backgroundColor: bgColor,
|
|
|
+ color: color,
|
|
|
+ legend: {
|
|
|
+ center: true,
|
|
|
+ top: 10,
|
|
|
+ data: legendItem,
|
|
|
+ textStyle: {
|
|
|
+ color: "#000000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // calculable: true,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ formatter: function (params) {
|
|
|
+ let html = "";
|
|
|
+ params.forEach((v) => {
|
|
|
+ console.log(v);
|
|
|
+ html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
|
+ <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span>
|
|
|
+ ${v.seriesName}.${v.name}
|
|
|
+ <span style="color:${
|
|
|
+ color[v.componentIndex]
|
|
|
+ };font-weight:700;font-size: 18px">${v.value}</span>
|
|
|
+ 人`;
|
|
|
+ });
|
|
|
+
|
|
|
+ return html;
|
|
|
+ },
|
|
|
+ extraCssText:
|
|
|
+ "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'shadow',
|
|
|
+ // shadowStyle: {
|
|
|
+ // // color: '#ffffff',
|
|
|
+ // shadowColor: 'rgba(225,225,225,1)',
|
|
|
+ // shadowBlur: 5
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "1%",
|
|
|
+ right: "5%",
|
|
|
+ top: "15%",
|
|
|
+ bottom: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ // x轴进度条，x轴超过15条数据就会展示出来
|
|
|
+ {
|
|
|
+ type: "slider",
|
|
|
+ show: xAxisData.length > 5,
|
|
|
+ start: 0,
|
|
|
+ end: xAxisData.length > 5 ? 30 : 100, // 控制初始化时展示的百分比数量
|
|
|
+ height: 15,
|
|
|
+ left: "5%",
|
|
|
+ right: "5%",
|
|
|
+ bottom: "2%",
|
|
|
+ moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ type: "solid",
|
|
|
+ color: "#0000004d",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ inside: false,
|
|
|
+ textStyle: {
|
|
|
+ color: "#000000", // x轴颜色
|
|
|
+ fontWeight: "normal",
|
|
|
+ fontSize: "14",
|
|
|
+ lineHeight: 22,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data: xAxisData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "",
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#000000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#000000",
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 40,
|
|
|
+ padding: [0, 0, 0, -20],
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "solid",
|
|
|
+ color: "#0000004d",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ type: "solid",
|
|
|
+ color: "#000000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: legendItem[0],
|
|
|
+ type: "line",
|
|
|
+ smooth: false, //是否平滑
|
|
|
+ // showSymbol: false,/
|
|
|
+ symbolSize: 8,
|
|
|
+ zlevel: 3,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: color[0],
|
|
|
+ shadowBlur: 3,
|
|
|
+ shadowColor: hexToRgba(color[0], 0.5),
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: hexToRgba(color[0], 0.3),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: hexToRgba(color[0], 0.1),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: hexToRgba(color[0], 0.1),
|
|
|
+ shadowBlur: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: yAxisData1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ chart.setOption(options);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+ <style lang="less" scoped>
|
|
|
+.left {
|
|
|
+ padding-right: 15px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ padding-left: 15px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.cben {
|
|
|
+ font-weight: bold;
|
|
|
+ span {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
wandequan