工单，数据中心用户查看数据的权限，合同考核每日，以及导出每日和按月

zxl

2025-06-19 3c6bdb6f439ff7af04765259fd6a91b6d201d095

 src/views/screen/components/lineChart.vue

@@ -3,14 +3,38 @@
</template>

<script>

export default {
  name: 'lineChart',
  data () {
  props: {
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      // 配置
      option: {
      name: [],
      data1: [],
      data2: [],

      myDrawLine: null
    }
  },

  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },
    initDrawLine() {
      const that = this
      let option = {
        grid: {
          width: '100%'
          left: '15%',
          right: '5%'
        },
        tooltip: {
          trigger: 'item',
@@ -20,7 +44,7 @@
            return str
          },
          textStyle: {
            fontSize: 12
            fontSize: this.setFontSize(16)
          }
        },

@@ -30,7 +54,8 @@
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0'
            color: '#A0AEC0',
            fontSize: this.setFontSize(14)
          }
        },

@@ -49,19 +74,11 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            fontSize: this.setFontSize(14),
            margin: 20,
            rotate: 30
          },
          data: [
            '富顺区',
            '大安区',
            '自流景区',
            '贡景区',
            '容县',
            '高新区',
            '沿滩区'
          ]
          data: that.name,
        },
        // Y轴配置
        yAxis: {
@@ -78,8 +95,8 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 15
            fontSize: this.setFontSize(14),
            margin: 5
          }
        },
        // 系列列表（多个折线图）
@@ -87,13 +104,13 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            data: that.data1,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00a2ff' },
                { offset: 0.5, color: 'rgba(0,162,255,0.1)' },
                { offset: 1, color: 'rgba(0,162,255,0.1)' }
                {offset: 0, color: '#00a2ff'},
                {offset: 0.5, color: 'rgba(0,162,255,0.1)'},
                {offset: 1, color: 'rgba(0,162,255,0.1)'}
              ])
            },

@@ -108,13 +125,13 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: [90, 140, 160, 55, 88, 99, 100],
            data: that.data2,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#e4b54f' },
                { offset: 0.5, color: 'rgba(228,181,79,0.1)' },
                { offset: 1, color: 'rgba(228,181,79,0.1)' }
                {offset: 0, color: '#e4b54f'},
                {offset: 0.5, color: 'rgba(228,181,79,0.1)'},
                {offset: 1, color: 'rgba(228,181,79,0.1)'}
              ])
            },

@@ -127,24 +144,33 @@
            }
          }
        ]
      },
      }

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine () {
      const that = this
      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(that.option)
      that.myDrawLine.setOption(option)
      window.addEventListener('resize', function () {
        that.myDrawLine.resize()
      })
    }
  },

  mounted () {
  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        this.name = []
        this.data1 = []
        this.data2 = []
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);
          this.data2.push(item.todoNum);
        })
        this.initDrawLine()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initDrawLine()