工作136:eachrt

<template><div><el-card><div slot="header" class="clearfix"><span>订单信息</span></div><!--样式控制全部 已经退回 待审核--><el-row><el-radio-group v-model="query.status" size="small"><el-radio-button label="全部" /><el-radio-button label="已退回" /><el-radio-button label="待审核" /><el-radio-button label="待接收" /><el-radio-button label="进行中" /><el-radio-button label="待结算" /><el-radio-button label="已完成" /></el-radio-group><!--样式控制全部 全部 昨日--><el-radio-groupv-model="query.timeSpan"size="small"style="float: right"><el-radio-button label="全部" /><el-radio-button label="昨日" /><el-radio-button label="近七日" /><el-radio-button label="近三十日" /></el-radio-group></el-row><!--引入custom组件--><custom-table@size-changes="list"@pagination-change="list":data="tableData":columns="columns":pagination="pagination"><template v-slot:action><el-table-columnfixed="right"header-align="center"label="操作"width="100"><template slot-scope="scope"><el-button type="text" @click="handleView(scope.row)">查看详情</el-button></template></el-table-column></template></custom-table></el-card><el-card><div id="main" :style="{ width: '300px', height: '300px' }"></div><div id="main1" :style="{ width: '300px', height: '300px' }"></div></el-card></div>
</template>
<script>
/*引入eachart*/
import echarts from "echarts";
import CustomTable from "@/component/table/CustomTable";
import { TableListMixin } from "@/component/table/TableMixin";
import {getAction} from "@/api";
export default {name: "Infomation",mixins: [TableListMixin],components: {CustomTable},mounted() {let myChart = echarts.init(document.getElementById("main"));let myChart1 = echarts.init(document.getElementById("main1"));getAction("/home/market_data").then(res=>{console.log(res)this.option=res.data.itemsconsole.log(this.option)for(var i in this.option){this.option1=this.option[i]}})let option = {title: {text: "柱状图"},tooltip: {},legend: {data: ["销量"]},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]};let option1 = {tooltip : {trigger: 'axis'},legend: {data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,axisTick: {show: false},data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisTick: {show: false},name: '(人)'}],series : [{name:'邮件营销',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'联盟广告',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'视频广告',type:'line',stack: '总量',data:[150, 232, 201, 154, 190, 330, 410]},{name:'直接访问',type:'line',stack: '总量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '总量',data:[820, 932, 901, 934, 1290, 1330, 1320]}]};myChart.setOption(option);myChart1.setOption(option1);},data() {return {/*表头*/columns: [/*任务名称id*/{ prop: "id", label: "ID", width: "100", sortable: true },/*订单名称 name*/{ prop: "name", label: "订单名称", sortable: true },/*创建人*/{ prop: "client", label: "客户名称", sortable: true },/*创建时间*/{ prop: "username", label: "创建人", sortable: true },/*业务单元*/{ prop: "created_at", label: "创建时间", sortable: true },/*投放账号*/{ prop: "business_module", label: "业务单元", sortable: true },/*发布时间*/{ prop: "put_department", label: "投放部门", sortable: true },/*任务状态*/{ prop: "status_name", label: "订单状态", sortable: true },/*任务状态*/{ prop: "spread_data", label: "传播数据(万)", sortable: true }],/*绑定的taskTableData里面的数据*/TableData: [],url: {list: "/home/information"}};},methods: {handleView(scope) {this.$router.push({ path: "/list/analysis/" + scope.id });}}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/table";</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

集合转数组的toArray()和toArray(T[] a)方法

1、ArrayList的toArray ArrayList提供了一个将List转为数组的一个非常方便的方法toArray。toArray有两个重载的方法&#xff1a; &#xff08;1&#xff09;list.toArray(); &#xff08;2&#xff09;list.toArray(T[] a); 对于第一个重载方法&#xff0c;是将list直接转为Ob…

windows客户端性能测试之内存泄露检查工具umdh.exe

Umdh 是 Debugging Tools for Windows 中的工具&#xff0c;在windbg的安装目录内&#xff0c;UMDH主要通过分析比较进程的Heap Stack trace信息来发现内存泄露的。 Umdh测试程序内存泄露的方法&#xff1a; 1&#xff0e;设置环境变量_NT_SYMBOL_PATH&#xff0c;系统属性-高级…

前端学习(2625):vs安装

1、官网https://code.visualstudio.com/Download下载最新版 最好下载zip格式&#xff0c;如下图所示&#xff1a; 解压到非系统盘&#xff0c;文件夹最好不要出现中文和空格&#xff0c;我解压到D:\VSCode-win32-x64-1.31.1&#xff0c;直接运行code.exe即可 2、将vscode修改…

Android 自定义环形圆形显示统计数据z

<?xml version"1.0" encoding"utf-8"?> <shape xmlns:android"http://schemas.android.com/apk/res/android" android:innerRadiusRatio"3" android:shape"ring" android:thicknessRatio"8&quo…

微信公众号开发 重要 access_token {errcode:40164,errmsg:invalid ip 114.221.159.11, not in whitelist hint:

微信公众号开发的钥匙是access_token。 我们开发者的ip就是门牌号码。 如果没有在微信开发配置中设置好白名单&#xff0c;即门牌号码。 那获取access_token过程中&#xff0c;肯定会报错&#xff0c;比如: access_token {"errcode":40164,"errmsg":&q…

安全专家的工具箱

BurpSuite BurpSuite&#xff0c;无比强大&#xff0c;功能丰富&#xff01; cupp 可以根据输入的个人信息&#xff0c;生成密码字典&#xff0c;在国内可能水土不服&#xff0c;我用它还尚未成功过呢&#xff01; nikto 站点目录扫描工具&#xff01; whois 只是命令行中反查域…

前端学习(2626):取消360为首页

浏览器右上角菜单栏中 工具--选项--基本设置--启动时打开--主页--输入您想设置的网址 即可

微信模版消息 touser 能否多个 群发

模版消息官方文档&#xff1a;https://mp.weixin.qq.com/wiki?tresource/res_main&idmp1433751277 微信模版消息大家经常用到&#xff0c;但是官方文档中touser填写的值为接收者openid。 所以模版消息是不能官方支持群发的。这些通知的对象都是单个人&#xff0c;而非群…

Android 仪表盘

1、依赖compile org.xclcharts:lib:2.4 自定义仪表盘view/*** ClassName meixi* Description 仪表盘例子* author <br/>(1085220040qq.com.com)*/ public class GaugeChart01View extends GraphicalView {private String TAG "GaugeChart01View";private Ga…

检查调试句柄泄漏

Windows任务管理查看句柄数 任务管理–>查看–>选择列–>勾选“句柄数” process explorer查看句柄详细信息 process explorer 中双击指定进程打开进程的properties窗口&#xff0c;切换到performance标签页&#xff0c;可以看到比任务管理器更详细的统计数据。 包括H…

小程序 获取 用户 unionid

首先明确&#xff0c;获取小程序的unionid需要在后台实现。下面开始详细介绍步骤。 1、首先要获得encryptedData&#xff0c;一种是通过授权函数&#xff0c;一种通过授权按钮 官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUserInfo.html?search-k…

前端学习(2627):node安装

1、在使用之前&#xff0c;先类掌握3个东西&#xff0c;明白它们是用来干什么的&#xff1a; npm: nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备&#xff0c;比如资源的合并和打包。 vue-cli: 用户生成Vu…

jmeter集合点使用方法:Synchronizing Timer

LR中集合点可以设置多个虚拟用户等待到一个点&#xff0c;同时触发一个事务,以达到模拟真实环境下多个用户同时操作,实现性能测试的最终目的。 jmeter中使用Synchronizing Timer实现Lr中集合点的功能&#xff0c;模拟多用户并发测试&#xff0c;即多个线程在同一时刻并发请求。…

微信模版消息 errmsg: 'invalid weapp pagepath hint: [OtU1OA0868a394]

我是想在公众号的模版消息中&#xff0c;点击直接跳转到体验版小程序的页面中&#xff0c;使用了官方的写法&#xff1a; miniprogram: {// 小程序appidappid: config.wapp.appid,// 打开页面pagepath: "pages/home/ad" },直接报错了&#xff0c;其实需要把pagepath…

前端学习(2628):node.js中LTS和Current的区别

2016 年 10 月 18 日&#xff0c;Node.js v6 LTS (Boron) 发布&#xff0c;这也是 Node.js 启用 LTS 发布计划以来&#xff0c;第一次同时迎来两个 active LTS(v4 与 v6&#xff09;。这系列文章将讲述 Node.js v6 LTS 带来的一系列变化&#xff0c;本篇主要围绕 LTS 展开。如果…

Android 柱状图

依赖compile org.xclcharts:lib:2.4 自定义view1/*** ClassName DemoView* Description 各个例子view的view基类*/ public class DemoView extends ChartView{public DemoView(Context context) {super(context);// TODO Auto-generated constructor stub}public DemoView(Con…

【mmall】IDEA自动Make

待更新... 转载于:https://www.cnblogs.com/bobi1234/p/7716737.html

谷歌chrome模拟手机浏览网页:iPhone/Android

部分网站通过Http头中的User-Agent判断浏览器类型&#xff0c;如果是手机&#xff0c;显示手机版页面内容&#xff0c;如果是普通PC浏览器&#xff0c;显示电脑版网页内容。 因此谷歌Chrome浏览器&#xff0c;可以通过修改User-Agent和页面分辨率模拟手机浏览器访问网页。如iPh…

js 对象数组常用操作 我用到的

1、删除一个元素 arr.splice(arr.findIndex(v > v.key demokey),1);2、根据某个字段就行排序 function compare(p) { return function (m, n) {const a m[p];const b n[p];return b - a; } } myDeparts.sort(compare("role"));3、在数组开头新增元素 arr.un…

前端学习(2629):npm安装成功配置

修改目录 修改镜像 输入命令npm config set registryhttp://registry.npm.taobao.org 配置镜像站 配置成功 测试镜像行吗