背景图

fuliqi

2024-03-12 f72f2916f7606a38232223a4092590034852fd2d

背景图

 src/assets/images/login-background.jpg

 src/main.js

@@ -1,7 +1,7 @@
import Vue from 'vue'

import Cookies from 'js-cookie'

import {getToken} from "@/utils/auth";
import Element from 'element-ui'
import './assets/styles/element-variables.scss'

@@ -48,6 +48,7 @@
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.getToken = getToken

// 全局组件挂载
Vue.component('DictTag', DictTag)

 src/views/home/data-chart/index.vue

@@ -73,12 +73,12 @@
    initChart() {
      const option = {
        legend: {
          right: '2%',
          top: '5%',
          right: 'right',
          top: 'top',
          orient: "vertical",
          icon: 'rect',
          data: [
            {

              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
@@ -192,7 +192,6 @@
  justify-content: space-between;
  align-items: center;
  z-index: 2;


  .more-button {
    cursor: pointer;

 src/views/home/data-check/index.vue

@@ -109,7 +109,7 @@

<style lang="scss" scoped>
.data-table-container {
  height: 400px;
  height: 445px;

  .data-card {
    height: 100%;

 src/views/home/data-wrapper/index.vue

@@ -3,11 +3,17 @@
    <el-row :gutter="40">
      <el-col :xs='24' :md="24" :sm="24" :lg="17" :xl="17">
        <data-table></data-table>
        <data-chart></data-chart>
        <examine></examine>
      </el-col>
      <el-col :xs='24' :md="24" :sm="24" :lg="7" :xl="7">
        <data-rank></data-rank>
        <data-check></data-check>
      </el-col>
      <el-col :xs='24' :md="24" :sm="24" :lg="17" :xl="12">
        <data-chart></data-chart>
      </el-col>
      <el-col :xs='24' :md="24" :sm="24" :lg="17" :xl="12">
        <work-order></work-order>
      </el-col>
    </el-row>
  </div>
@@ -15,8 +21,10 @@

<script>
import DataTable from '../data-table/index.vue';
import Examine from '../examine/index.vue';
import DataRank from '../data-rank/index.vue';
import DataCheck from '../data-check/index.vue';
import WorkOrder from '../work-order/index.vue';
import DataChart from '../data-chart/index.vue';
export default {
  name: 'DataWrapper',
@@ -24,6 +32,8 @@
    DataTable,
    DataRank,
    DataCheck,
    WorkOrder,
    Examine,
    DataChart
  }
}

 src/views/home/examine/index.vue

New file
@@ -0,0 +1,143 @@
<template>
  <div class="data-table-container">

    <el-card class="data-card" :body-style="{ height: '100%' }">
      <div class="card-content">
        <div class="title-container">
          <h1>考核预警</h1>
          <div class="more-button">
            <span>更多</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>

        <el-table :data="tableData" height="400">
          <el-table-column prop="date" label="警报时间" align="center">
          </el-table-column>
          <el-table-column prop="name" label="公司名称" align="center">
          </el-table-column>
          <el-table-column prop="rule" label="考核规则" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  data() {
    return {
      tableData: [
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '车辆考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '点位考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '车辆考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '点位考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '车辆考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '车辆考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '点位考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '点位考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '车辆考核',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          rule: '点位考核',
          num: 111,
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.data-table-container {
  height: 450px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}
</style>

 src/views/home/work-order/index.vue

New file
@@ -0,0 +1,251 @@
<template>
  <div class="data-chart-container">
    <el-card class="data-card" :body-style="{ height: '100%' }">
      <div class="card-content">
        <div class="title-container">
          <h1>运维监控报表</h1>
          <div class="select-container">
            <el-select v-model="company" placeholder="请选择运维公司" @change="companyChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="date-container">
            <el-select v-model="dateRange" placeholder="请选择时间范围">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-container">
          <div id="chartContent" ref="chartContent"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let lineChart = null;
let observer = null;
export default {
  name: 'DataChart',
  data() {
    return {
      dateRange: '',
      company: '',
      options: [
        { label: '全部', value: '全部' },
        { label: 'XX运维公司1', value: 'XX运维公司1' },
        { label: 'XX运维公司2', value: 'XX运维公司2' },
        { label: 'XX运维公司3', value: 'XX运维公司3' },
        { label: 'XX运维公司4', value: 'XX运维公司4' },
      ],
      options2: [
        { label: '日工单数', value: '日工单数' },
        { label: '周工单数', value: '周工单数' },
        { label: '月工单数', value: '月工单数' },
      ],
      dataList: [
        {
          name: '全部',
          complete: { '1月': 10310, '2月': 23200, '3月': 16430, '4月': 24000, '5月': 31700 },
          waiting: { '1月': 1500, '2月': 2310, '3月': 14530, '4月': 231, '5月': 1235 },
          pending: { '1月': 2530, '2月': 2450, '3月': 4000, '4月': 4300, '5月': 3210 }
        },
        {
          name: 'XX运维公司1',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 200, '2月': 235, '3月': 300, '4月': 400, '5月': 500 }
        },
        {
          name: 'XX运维公司2',
          complete: { '1月': 213, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 123, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 135, '2月': 422, '3月': 425, '4月': 323, '5月': 400 }
        },
        {
          name: 'XX运维公司3',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 213, '3月': 123, '4月': 23, '5月': 123 },
          pending: { '1月': 534, '2月': 435, '3月': 422, '4月': 121, '5月': 313 }
        },
        {
          name: 'XX运维公司4',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 613, '3月': 1412, '4月': 2336, '5月': 123 },
          pending: { '1月': 123, '2月': 321, '3月': 131, '4月': 321, '5月': 421 }
        },
        {
          name: 'XX运维公司5',
          complete: { '1月': 1000, '2月': 433, '3月': 1233, '4月': 2132, '5月': 8886 },
          waiting: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 333, '2月': 245, '3月': 233, '4月': 222, '5月': 111 }
        },
      ],
    }
  },
  methods: {
    initChart() {
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          icon: 'rect',
          orient: "vertical",
          data: [
            {
              name: '完成工单数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '待完成工单数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
            {
              name: '待审批工单数',
              itemStyle: {
                color: 'rgba(255, 165, 0, 1)'
              }
            },
          ],
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '20%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.acitveData.complete),
        },
        yAxis: {},
        series: [
          {
            name: '完成工单数',
            data: Object.entries(this.acitveData.complete).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '待完成工单数',
            data: Object.entries(this.acitveData.waiting).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          },
          {
            name: '待审批工单数',
            data: Object.entries(this.acitveData.pending).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },


    companyChange() {
      this.acitveData = this.dataList.find((item) => {
        return item.name === this.company;
      });
      if (this.acitveData) {
        this.initChart();
      }
    },

    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.chartContent);
    },
    // 窗口变换
    handleResize() {
      if (lineChart) {
        lineChart.resize();
      }
    }

  },
  mounted() {
    this.acitveData = this.dataList[0];
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    this.observe();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
      observer.unobserve(this.$refs.chartContent);
    }
  },
}
</script>

<style lang="scss" scoped>
.data-chart-container {
  height: 400px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}

.title-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;


  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}

.chart-container {

  width: 100%;
  height: 100%;

  #chartContent {
    width: 100%;
    height: 100%;
  }
}

.select-container {
  margin: 0 20px;
  width: 180px;
}
</style>

 src/views/login.vue

@@ -59,7 +59,7 @@
      </el-form-item>
    </el-form>

    <el-dialog title="为了您的账号安全,首次登陆请修改密码" :visible.sync="loginInfo.firstLogin==0?true:false">
    <el-dialog title="为了您的账号安全,首次登陆请修改密码" :visible.sync="loginInfo.firstLogin==0">
         <el-form>
           <el-form-item label="新密码">
               <el-input v-model="newPassword" autocomplete="off"></el-input>

 src/views/system/publish/index.vue

@@ -39,6 +39,7 @@
          />
        </el-select>
      </el-form-item>

      <el-form-item label="考核状态" prop="state">
        <el-select
          v-model="queryParams.state"
@@ -107,6 +108,10 @@
        <dict-tag :options="dict.type.platform_examine_frequency" :value="scope.row.frequency"/>
      </template>
      </el-table-column>
      <el-table-column label="报警分数阈值" align="center" prop="alarmScore" />
      <el-form-item label="报警分数阈值" prop="alarmScore">
        <el-input v-model="form.alarmScore" placeholder="请输入分数" />
      </el-form-item>
      <el-table-column label="考核状态" align="center" prop="state">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.state"/>
@@ -144,7 +149,7 @@

    <!-- 添加或修改考核发布对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="考核名" prop="examineName">
          <el-input v-model="form.examineName" placeholder="请输入考核名" />
        </el-form-item>
@@ -159,7 +164,6 @@
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="考核范围" prop="examineRange">
          <el-select
            v-model="form.examineRange"
@@ -190,6 +194,9 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报警分数阈值" prop="alarmScore">
          <el-input v-model="form.alarmScore" placeholder="请输入分数" style="width: 170px"/>
        </el-form-item>
        <el-form-item label="考核状态" prop="state">
          <el-select
            v-model="form.state"

 src/views/system/work-order/index.vue

@@ -85,6 +85,7 @@
      <el-table-column label="运维结果" align="center" prop="ywResult" />
      <el-table-column label="运维情况" align="center" prop="ywCondition" width="150"/>
      <el-table-column label="运维检测结果" align="center" prop="ywCheckResult" width="230"/>

      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>

      <el-table-column label="操作" fixed="right" width="150"  align="center" class-name="small-padding fixed-width">
@@ -163,6 +164,34 @@
        </el-form-item>
        <el-form-item label="运维人员" prop="ywPeopleName">
          <el-input v-model="ywConditionForm.ywPeopleName" disabled />
        </el-form-item>
        <el-form-item label="现场图片" prop="picture">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/common/upload"
            name="file"
            :headers="{'Authorization': 'Bearer ' + getToken()}"
            :on-success="pictureUploadSuccess"
            :on-remove="pictureRemove"
            :file-list="pictureList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="佐证材料" prop="certificates">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/common/upload"
            name="file"
            :headers="{'Authorization': 'Bearer ' + getToken()}"
            :on-success="certificateUploadSuccess"
            :on-remove="certificateRemove"
            :file-list="certificateList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="运维情况" prop="ywCondition">
          <el-input v-model="ywConditionForm.ywCondition" type="textarea" maxlength="150" show-word-limit/>
@@ -253,6 +282,8 @@
  name: "Work-order",
  data() {
    return {
      certificateList:[],
      pictureList: [],
      // 遮罩层
      loading: true,
      // 选中数组
@@ -368,6 +399,32 @@
      this.auditingForm = {};
      this.auditingOpen = false;
    },
    pictureRemove(file, fileList) {
      this.form.picture = null,

        this.pictureList = this.pictureList.filter(item => item.name !== file.name)
    },
    certificateRemove(file, fileList) {
      this.form.certificate = null,

        this.certificateList = this.certificateList.filter(item => item.name !== file.name)
    },
    pictureUploadSuccess(response, file, fileList) {
      this.form.picture = response.fileName,
        this.pictureList.push({
          name: response.originalFilename,
          url: response.url,
          fileName: response.fileName
        })
    },
    certificateUploadSuccess(response, file, fileList) {
      this.form.certificate = response.fileName,
        this.certificateList.push({
          name: response.originalFilename,
          url: response.url,
          fileName: response.fileName
        })
    },
    // 提交运维情况
    submitYwCondition() {
      this.$refs["ywConditionForm"].validate(valid => {
@@ -466,6 +523,20 @@
        this.form = response.data;
        this.open = true;
        this.title = "修改运维工单";
        this.pictureList = JSON.parse(response.data.picture).map(item => {
          return {
            name: item,
            url: process.env.VUE_APP_FILE_API + '/' + item,
            fileName: item
          }
        })
        this.certificateList = JSON.parse(row.certificate).map(item => {
          return {
            name: item,
            url: process.env.VUE_APP_FILE_API + '/' + item,
            fileName: item
          }
        })
      });
    },
    /** 提交按钮 */