|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <div class="modelBlock">
|
|
|
+ <template v-if="permissionFiltering">
|
|
|
+ <div class="model-title">
|
|
|
+ <div class="model-title-text">运维工单完成率</div>
|
|
|
+ <div class="model-title-right">
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ v-model="date"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月"
|
|
|
+ class="saveColumn-select"
|
|
|
+ @change="changeTime"
|
|
|
+ :clearable="false"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="model-content">
|
|
|
+ <zz-echart
|
|
|
+ :option="clientOptions"
|
|
|
+ class="chart"
|
|
|
+ ></zz-echart>
|
|
|
+ <div class="totals">
|
|
|
+ <span>{{ total }}</span>
|
|
|
+ <span class="numbers">任务总数</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <no-permission
|
|
|
+ v-else
|
|
|
+ tipsText="运维工单完成率"
|
|
|
+ ></no-permission>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { GradualChange, ringType } from '../indexOptionChart';
|
|
|
+import permissionComponent from '../permissionComponent';
|
|
|
+const colors = [
|
|
|
+ GradualChange('#22D8FF', '#00B2FF'),
|
|
|
+ GradualChange('#F0646C', '#F4994E'),
|
|
|
+ GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
+ GradualChange('#7178FF', '#D2A4FF'),
|
|
|
+ GradualChange('#884DD2', '#DF63CC')
|
|
|
+];
|
|
|
+export default {
|
|
|
+ mixins: [permissionComponent],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: '17',
|
|
|
+ titleName: '运维工单'
|
|
|
+ },
|
|
|
+ mixins_query: {
|
|
|
+ communityId: '',
|
|
|
+ date: '',
|
|
|
+ },
|
|
|
+ date: '',
|
|
|
+ total: 0,
|
|
|
+ clientOptions: ringType(
|
|
|
+ colors,
|
|
|
+ [
|
|
|
+ { value: 0, name: '待派单' },
|
|
|
+ { value: 0, name: '处理中' },
|
|
|
+ { value: 0, name: '已完成' },
|
|
|
+ { value: 0, name: '已完成(超时)' },
|
|
|
+ { value: 0, name: '已关闭' }
|
|
|
+ ],
|
|
|
+ {},
|
|
|
+ { type: 'number', total: 0 }
|
|
|
+ )
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData () {
|
|
|
+ this.$http.get('/sc-community-web/statisticWorkOrderComplete', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
+ debugger
|
|
|
+ if (status == 0 && !!data.datas) {
|
|
|
+ this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeTime (v) {
|
|
|
+ this.mixins_query.date = v + '-01';
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ eachartObj (data) {
|
|
|
+ this.total = data.total || 0;
|
|
|
+ let typeName = {
|
|
|
+ '关闭': '关闭',
|
|
|
+ '处理中': '处理中',
|
|
|
+ '完成': '已完成',
|
|
|
+ '已完成(超时)': '已完成(超时)',
|
|
|
+ '已关闭': '已关闭'
|
|
|
+ };
|
|
|
+ let newData = [];
|
|
|
+ for (let a in data.datas) {
|
|
|
+ newData.push({
|
|
|
+ value: data.datas[a],
|
|
|
+ name: typeName[a]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ debugger
|
|
|
+
|
|
|
+ return newData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
|
|
|
+ this.date = this.$moment().format('YYYY-MM');
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.modelBlock {
|
|
|
+ height: 100%;
|
|
|
+ padding: rem(15) rem(20) rem(20);
|
|
|
+ background: #171f32;
|
|
|
+ .model-title {
|
|
|
+ line-height: rem(30);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: rem(15);
|
|
|
+ border-bottom: 1px solid rgba(224, 225, 227, 0.2);
|
|
|
+ .saveColumn-select {
|
|
|
+ width: rem(120);
|
|
|
+ margin-left: rem(20);
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background: transparent;
|
|
|
+ color: white;
|
|
|
+ border-color: rgba(255, 255, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .model-title-text {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .model-content {
|
|
|
+ height: calc(100% - #{rem(45)});
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ .totals {
|
|
|
+ position: absolute;
|
|
|
+ right: rem(10);
|
|
|
+ top: rem(26);
|
|
|
+ width: rem(120);
|
|
|
+ height: rem(40);
|
|
|
+ background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: rem(8) rem(10);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .numbers {
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.5;
|
|
|
+ line-height: rem(32);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|